278de67822
This change refactors all of the 'dark mode' settings into a single CSS file (that can be optionally loaded) This was mostly from the variables.css file, but there were also a few small customizations in other files that were also included.
33 lines
No EOL
1.8 KiB
CSS
33 lines
No EOL
1.8 KiB
CSS
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
|
|
:root {
|
|
--global--color-primary: #ff6a81;
|
|
--global--color-primary-hover: #ffffff;
|
|
--global--color-secondary: #b2b2b2;
|
|
--global--color-secondary-hover: #cccccc;
|
|
--global--color-foreground: #ffffff;
|
|
--global--color-foreground-low-contrast: #b2b2b2;
|
|
--global--color-background: #1e1f21;
|
|
--global--color-background-high-contrast: #2d3139;
|
|
--global--color-text-selection: #000000;
|
|
--sticky-posts--color-background: var(--global--color-background);
|
|
--sticky-posts--alt-color-background: var(--global--color-background-high-contrast);
|
|
--primary-nav--color-background: var(--global--color-background-high-contrast);
|
|
--primary-nav--dropdown-color-link: var(--global--color-foreground);
|
|
}
|
|
|
|
.author-link:after {
|
|
background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23ff6a81'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
.search-form > label:before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23ffffff' d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
|
|
}
|
|
|
|
body[class*="woocommerce"] #page span.onsale {
|
|
background-color: var(--global--color-foreground);
|
|
border: 1px solid var(--global--color-background);
|
|
}
|
|
} |