68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
// theme-default.scss
|
|
/* ============================================================================
|
|
DEFAULT THEME
|
|
-------------------------------------------------------------------------------
|
|
This is the default theme for my website, which uses the prefer-color-scheme
|
|
query to provide the appropriate styles for light mode or dark mode. The other
|
|
themes can be selected with a dropdown which is only shown when JavaScript is
|
|
enabled.
|
|
============================================================================ */
|
|
|
|
@use "modules/include-media" as *;
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
.theme-default {
|
|
@media (prefers-color-scheme: light) {
|
|
background: #ddbed4;
|
|
color: #150218;
|
|
|
|
a {
|
|
color: #08659b;
|
|
}
|
|
|
|
.site-header {
|
|
background: #f9eefc;
|
|
}
|
|
|
|
.site-main {
|
|
background: #f9eefc;
|
|
}
|
|
|
|
.site-navigation {
|
|
background: #f9eefc;
|
|
}
|
|
|
|
.site-footer {
|
|
background: #f9eefc;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background: #503047;
|
|
color: #f9eefc;
|
|
|
|
a {
|
|
color: #20a4f3;
|
|
}
|
|
|
|
.site-header {
|
|
background: #261722;
|
|
}
|
|
|
|
.site-main {
|
|
background: #261722;
|
|
}
|
|
|
|
.site-navigation {
|
|
background: #261722;
|
|
}
|
|
|
|
.site-footer {
|
|
background: #261722;
|
|
}
|
|
}
|
|
}
|