Writing
Here's where you can find some tutorials or blogs made by me!
Tutorials:
How to Make a Custom Website Theme Changer!
My website has gone through many theme changes over the past year (almost 2 years!) and I have painstakingly have wrote a lot of CSS code. So I've seen a some websites with theme selector and I find that a good solution to my problem! So I'm gonna teach you how to make your own theme changer with many themes to choose from in CSS and JS! So here's a screenshot of my theme changer playground!
First you need to create a base CSS file and a CSS file for each theme you want. Add the following code in the <head> tags of your page once you created the CSS files.
<link rel="stylesheet" href="" id="themeCSSLink" />
Next, you need to add the dropdown selection to choose the theme and a script tag to add the CSS code.
<select name="theme" id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<script src="theme.js"></script>
You can add however many themes you like. But make sure whenever you add a new theme, in the dropdown, make the <option> tag's value attribute the same as the theme's CSS file without the .css. For example, If I were to add a blue theme, the blue theme CSS file would be named blue.css and I would add the following to the dropdown (<option> tag):
Notice how the option value is blue and the theme CSS file is named blue.css. Now that the HTML and CSS is out of the way, let's get to the JavaScript! So create a JavaScript file and add the following:
var themeStorage = localStorage.getItem("themeStorage");
var themeCSSLink = document.querySelector("#themeCSSLink");
if (themeStorage === null) {
localStorage.setItem("themeStorage", "add default select option here");
themeCSSLink.href = "add default CSS file here";
} else {
themeCSSLink.href = themeStorage + ".css";
themeSelector.value = themeStorage;
}
themeSelector.onchange = (event) => {
var themeSelected = event.target.value;
localStorage.setItem("themeStorage", themeSelected);
themeCSSLink.href = themeSelected + ".css";
}
First, what you have to do is in the following line, replace "add default CSS file here" with what theme you want people who first visit your site to have.
And to prove it works, here's a demo!
And there you have it! You have a working theme selector in HTML, CSS, and JS! If you have any questions, email me at itsmeariu@gmail.com!
How to Change Your Neocities Thumbnail!
This will be a relativly short post because I have to study for exams ðŸ˜. Your Neocities thumbnail is the big large image that you see if you go to neocities.org/site/[your username]/. Here is a picture of my thumbnail (Epik squirtle 😎):
It's technically called your site preview but I like to call it a thumbnail. Your thumbnail is bascially a computer over at Neocities taking a screenshot of your site every couple days. But you can add some simple JS code to your index.html file:
if (/headless/i.test(window.navigator.userAgent)) {
window.location.replace("/thumbnail/");
}
</script>
You can make a thumbnail folder and create /thumbnail/index.html. Then your site thumbnail will preview /thumbnail/index.html instead of /index.html. Enjoy!
P.S. If you want an epik squirtle 😎 thumbnail like me, replace /thumbnail/ in the code above with https://arandomsite.neocities.org/thumbnail/