blog/assets/scss/_dark.scss

28 lines
1.3 KiB
SCSS

// dark mode preference
@media (prefers-color-scheme: dark) {
:root {
--background: #{$black-dk};
--background-accent: #{$black-md};
--border-accent: #{$gray-md};
--border-subdued: #{$black-md};
--link-color: #{$blue-lt};
--text-color: #{$gray-lt};
--text-color-accent: #{$white};
--text-color-subdued: #{$black-lt};
--text-title-title: #{$purple-lt};
--text-color-h3: #{$teal-lt};
}
main aside h1 {
background: var(--text-color-title);
background: linear-gradient(135deg, $blue-lt 0%, $purple-lt 67%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
#toc {
background: rgba(0,0,0,.75);
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a6371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
}
}
}