A compilation of any information I have for making color schemes and theme switchers (ex. darkmode vs lightmode).
This one is for people who like making minimally styled HTML pages, keeping the default white background and black text. If you like doing this, but would like to make it darkmode instead you can use color-scheme!
html {
color-scheme: dark;}Maybe you want to keep everything basic, but want to change the blue color links and form elements use.
html {
accent-color: purple;}I have a more detailed CSS variable guide, but heres a quick run down.
Maybe you're the opposite and love using a ton of different colors, but find it difficult to keep track of which color is which, especialy if you're using hex color codes. With variables you can assign color codes a name, and use said name in the CSS instead of a color code. This is particularly helpful when you want to change a color value but you've already used said color code a whole bunch in your CSS. Now all you have to do is change the value of the variable. Variables will also be very useful if you want to make different themes for the same page.
:root {
--bg: rgb(20,10,10);
--text: #5A78BC;
--head: #F4A719;
--link: hotpink;}You can name the variables whatever you want, they just need to be in the :root selector and have two dashes (--) infront of the name. The value of them will of course have to be defined as a valid color in whichever format you prefer (rgb, hex, html names, hsl, etc)
The variables will look a little different in the CSS though. You have to put it in var(--variable) form.
body {
color: var(--text);
background: var(--bg);}
a {
color: var(--link);}The background of the page will be dark grey (rgb(20,10,10)), the text of the page will be whatever #5A78BC is, and links will be hot pink!
This section will be much longer, detailing a variety of ways you can provide different themes or light/dark modes for your readers :3.
This media query defines CSS styles for viewers who have dark or light mode selected as a preference in their browser settings.
@media (prefers-color-scheme: dark;) {
body {
color: white;
background: black;}}
@media (prefers-color-scheme: light;) {
body {
color: black;
background: white;}}There are two options for prefered color scheme: light and dark. Like with any other media query (@media) you can put specific CSS styling for any elements inside the media query brackets.
You can make one mode "default" by only using a query for the non-default color scheme.
body {
color: white;
background: black;}
@media (prefers-color-scheme: light;) {
body {
color: black;
background: white;}}Here I have made darkmode the default style, but if a viewer has lightmode as their prefered browser setting, they will see the styles defined in the media query.
You can of course combine this method with color-scheme or variables.
html {
color-scheme: light;}
@media (prefers-color-scheme: dark;) {
html {
color-scheme: dark;}}:root {
--bg: navy;
--text: ivory;}
@media (prefers-color-scheme: light;) {
:root {
--bg: ivory;
--text: navy;}}
body {
color: var(--text);
background: var(--bg);
border: 1px solid var(--text);}First the default color of the variables are defined (a dark mode in this case), then the variables are redefined for users who prefer light mode, lastly the variables are used to give colors to elements. This makes it so that you only have to redefine the varibles in the media query rather than redefining every property in the CSS that uses color.
The thing about these media queries is that the user can't switch between your color schemes unless they do it in their browser settings, not really convienient. They are also limited to one lightmode and one darkmode, where as you may want to create a bunch of different themes for your viewers to be able to pick from. JavaScript becomes necessary.
We can use JavaScript to either add a stylesheet, or change the value of the :root variables.
Either way we will need at least two buttons and functions (more if you have three or more themes)
<button onclick="darkmode()">dark theme</button>
<button onclick="lightmode()">light theme</button>Each theme button is given a different function that will be applied when the user clicks the button. These buttons will go in the body where ever you want them to be on your page.
If you're lazy like me and put your CSS in the style element rather than using style sheets, you can use JS to change the variable values.
<script>
var rootsel = document.querySelector(':root');
function darkmode() {
rootsel.style.setProperty('--bg', 'rgb(30,30,30)');
rootsel.style.setProperty('--text', 'rgb(220,190,170)');}
function lightmode() {
rootsel.style.setProperty('--bg', 'rgb(250,220,190)');
rootsel.style.setProperty('--text', 'rgb(35,35,35)');}
</script>The variable rootsel is defined to select :root, this just makes the following JS a little neater rather than repeating the same chunk over and over. Note that this won't work if you are not using variables in the :root selector.
A function for each theme is named, and in each function every color variable is redefined.
Note that you have to redefine the colors for even your default theme, otherwise viewers will not be able to switch back to it. Unfortunately this means that if you change the default colors in your CSS, you will have to copy the changes in your JS manually.
Once I figure out a more elegent solution with style sheets I'll add it.
You may want to store a users prefered theme, so whenever they visit your site, they dont have to manually change it every time. This is done using JS localStorage, which stores a tiny bit of info in the users browser. This info is just a value you define and what group it belongs to.
To our light and dark functions we are going to add a line like this:
localStorage.setItem('keyname', 'valuename');Where "keyname" is any name we are going to give our tiny set of items. All themes will have the same key name. If you wanted the users browser to save number of clicks on a button, you would make a different set of items by giving it a different key name. The value represented by "valuename" is the name we are going to assign that specific theme, like dark or light. setItem means we are defining these bits.
In our functions they will look like this:
<script>
var rootsel = document.querySelector(':root');
function darkmode() {
rootsel.style.setProperty('--bg', 'rgb(30,30,30)');
rootsel.style.setProperty('--text', 'rgb(220,190,170)');
localStorage.setItem('theme', 'dark');}
function lightmode() {
rootsel.style.setProperty('--bg', 'rgb(250,220,190)');
rootsel.style.setProperty('--text', 'rgb(35,35,35)');
localStorage.setItem('theme', 'light');}
</script>This stores the item for each theme, but nothing will actually happen with the saved item. Now we have to retrieve the data and define what happens depending on its value. After and outside of our theme functions we will have these conditions:
if(localStorage.getItem('theme') == 'dark'){
darkmode();}
if(localStorage.getItem('theme') == 'light'){
lightmode();}We retrieve the data by using getItem instead of set item. We see if it equals one of our values, and if it does the JS will then preform the function we put inside of it, one of the theme functions we already made. Just make sure the function corresponds to the value (ex. 'dark' and 'darkmode()' )
That's it! you can make as many as you need for all your themes.