Default theme
Creating variable for default theme or let's say color palette.
Color palette for our default theme.
[data-theme="default"] {
--bg-color: #D0DCE9;
--border-color: #FFFFFF;
--header-bg-color: #3B71A6;
--main-bg-color: #FFFFFF;
--aside-1-bg-color: #82A4C6;
--aside-2-bg-color: #0ebeff;
--footer-bg-color: #96D5F1;
}
Now we can apply above created default theme variables to our components.
body{
background: var(--bg-color);
}
h1{
color: var(--footer-bg-color);
}
header{
background: var(--header-bg-color);
}
main{
background: var(--main-bg-color);
}
.aside-1{
background: var(--aside-1-bg-color);
}
.aside-2{
background: var(--aside-2-bg-color);
}
footer{
background: var(--footer-bg-color);
}
Apply data-theme attribute to the body of our html and you see how your new color palette is applied to the theme. We can add more color palette as we needed and change the color as per the requirements.
data-theme = "glow"
Let's see an example.
If you change the value of data-theme attribute in the <body> element you will see new color palette is applied.
Concern
I am not sure how well it scale and how it fits in your requirements. I believe if you're creating small site where you require changes of the theme colors for marketing purposees this approach can save some time.
Top comments (0)