86 lines
2.9 KiB
SCSS
86 lines
2.9 KiB
SCSS
:root {
|
|
// https://sass-lang.com/documentation/breaking-changes/css-vars
|
|
--body-bg-color: #{$body-bg-color};
|
|
--content-bg-color: #{$content-bg-color};
|
|
--card-bg-color: #{$card-bg-color};
|
|
--text-color: #{$text-color};
|
|
--selection-bg: #{$grey-lighter};
|
|
--selection-color: #{$black-deep};
|
|
--blockquote-color: #{$blockquote-color};
|
|
--link-color: #{$link-color};
|
|
--link-hover-color: #{$link-hover-color};
|
|
--brand-color: #{$brand-color};
|
|
--brand-hover-color: #{$brand-hover-color};
|
|
--table-row-odd-bg-color: #{$table-row-odd-bg-color};
|
|
--table-row-hover-bg-color: #{$table-row-hover-bg-color};
|
|
--menu-item-bg-color: #{$menu-item-bg-color};
|
|
--theme-color: #{$theme-color};
|
|
|
|
--border-color: #{$border-color};
|
|
|
|
--btn-default-bg: #{$btn-default-bg};
|
|
--btn-default-color: #{$btn-default-color};
|
|
--btn-default-border-color: #{$btn-default-border-color};
|
|
--btn-default-hover-bg: #{$btn-default-hover-bg};
|
|
--btn-default-hover-color: #{$btn-default-hover-color};
|
|
--btn-default-hover-border-color: #{$btn-default-hover-border-color};
|
|
|
|
--highlight-background: #{$highlight-background};
|
|
--highlight-foreground: #{$highlight-foreground};
|
|
--highlight-gutter-background: #{$highlight-gutter-background};
|
|
--highlight-gutter-foreground: #{$highlight-gutter-foreground};
|
|
|
|
--highlight-img-fill: brightness(1) invert(0);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--body-bg-color: #{$body-bg-color-dark};
|
|
--content-bg-color: #{$content-bg-color-dark};
|
|
--card-bg-color: #{$card-bg-color-dark};
|
|
--text-color: #{$text-color-dark};
|
|
--selection-bg: #{$gainsboro};
|
|
--selection-color: #{$black-dim};
|
|
--blockquote-color: #{$blockquote-color-dark};
|
|
--link-color: #{$link-color-dark};
|
|
--link-hover-color: #{$link-hover-color-dark};
|
|
--brand-color: #{$brand-color-dark};
|
|
--brand-hover-color: #{$brand-hover-color-dark};
|
|
--table-row-odd-bg-color: #{$table-row-odd-bg-color-dark};
|
|
--table-row-hover-bg-color: #{$table-row-hover-bg-color-dark};
|
|
--menu-item-bg-color: #{$menu-item-bg-color-dark};
|
|
--theme-color: #{$theme-color-dark};
|
|
|
|
--border-color: #{$border-color-dark};
|
|
|
|
--btn-default-bg: #{$btn-default-bg-dark};
|
|
--btn-default-color: #{$btn-default-color-dark};
|
|
--btn-default-border-color: #{$btn-default-border-color-dark};
|
|
--btn-default-hover-bg: #{$btn-default-hover-bg-dark};
|
|
--btn-default-hover-color: #{$btn-default-hover-color-dark};
|
|
--btn-default-hover-border-color: #{$btn-default-hover-border-color-dark};
|
|
|
|
--highlight-background: #{$highlight-background-dark};
|
|
--highlight-foreground: #{$highlight-foreground-dark};
|
|
--highlight-gutter-background: #{$highlight-gutter-background-dark};
|
|
--highlight-gutter-foreground: #{$highlight-gutter-foreground-dark};
|
|
|
|
--highlight-img-fill: brightness(0) invert(1);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
img[data-theme="dark"] {
|
|
opacity: .75;
|
|
filter: brightness(1) invert(0);
|
|
|
|
&:hover {
|
|
opacity: .9;
|
|
}
|
|
}
|
|
|
|
iframe[data-theme="dark"] {
|
|
color-scheme: light;
|
|
}
|