Guide for Making Dark & Light Themes!
Intro
Details about selectors
Many websites will use data-theme="dark", class="dark" or similar variants in the HTML element. Since pastry.diy uses the former, that's what I'll be using.
data-theme="dark" is a data-attribute — this means our attribute selector for CSS would be html[data-theme="dark"] for dark mode and html[data-theme="light"] for light mode. As light mode is often the default, variables typically only need to be modified or specified for dark mode.
If you want to avoid using !important at the end of each modified variable, it's easier to use html[data-theme="light"].
Given Variables
Here are the variables Pastry has in the code!
:root[data-theme="light"] {
--background-color: #f7eee2;
--text-color: #3e2f1c;
--accent-text-color: #92795f;
--link-color: #b27e5a;
--container-background-color: #fdf8f1;
--accent-background-color: #fbf3e9;
}
:root[data-theme="dark"] {
--background-color: #332b26;
--text-color: #f7e3cb;
--accent-text-color: #947666;
--link-color: #d9a066;
--container-background-color: #4d3d34;
--accent-background-color: #3f322b;
}
Examples! Yay!
You can add your own variables to even change background images and the content of ::before and ::after pseudo-elements.
Example 1
Example #1 Code
#example_1 {
height: 40px;
width: 40px;
background-image: var(--custom-image);
background-size: 100%;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
#example_1::before {
content: var(--custom-text);
min-width: 140px;
position: absolute;
left: 150%;
display: block;
font-size: .9rem;
}
:root[data-theme="light"] {
--custom-image: url(https://graphic.neocities.org/emlan_dessert_22.png)
--custom-text: "I show up in light mode!"
}
:root[data-theme="dark"] {
--custom-image: url(https://graphic.neocities.org/emlan_dessert_26.png)
--custom-text: "I show up in dark mode!"
}
Example 2: Basic retheming
Click to see the custom theme!
Example #2 Code
:root[data-theme="light"] {
--background-color: #eef5db;
--text-color: #000;
--accent-text-color: #455949;
--link-color: #2949b2;
--container-background-color: #fefefe;
--accent-background-color: #fee4df;
}
:root[data-theme="dark"] {
--background-color: #0d0e11;
--text-color: #ebebd3;
--accent-text-color: #565960;
--link-color: #ffb985;
--container-background-color: #333745;
--accent-background-color: #0d0e11;
}
::selection {
background: var(--text-color);
color: var(--background-color);
}
Example 3: Changing Fonts
I am a different font in mode.
Example #3 Code
/* Google Font, put the @import at the top of the CSS */
@import url('https://fonts.googleapis.com/....');
/* Custom imported font */
@font-face {
font-family: 'Font Name';
src: url('font_URL')
}
body /* or selector */ {
font-family: "Font Name";
}
/* Use this if you want elements and their contents to keep the same font as its container. */
body * {
font-family: inherit;
}