98 lines
2.6 KiB
SCSS
98 lines
2.6 KiB
SCSS
@mixin light_mode {
|
|
@include chroma_github;
|
|
|
|
--header-background: #{$main-color};
|
|
--header-font-color: #{$white};
|
|
|
|
--body-background: #{$body-background};
|
|
--body-font-color: #{$body-font-color};
|
|
|
|
--mark-color: #{$mark-color};
|
|
|
|
--button-background: #{lighten($main-color, 2)};
|
|
--button-border-color: #{$main-color};
|
|
|
|
--link-color: #{$link-color};
|
|
--link-color-visited: #{$link-color-visited};
|
|
|
|
--code-background: #{$code-background};
|
|
--code-accent-color: #{darken($code-background, 6)};
|
|
--code-accent-color-lite: #{darken($code-background, 2)};
|
|
--code-font-color: #{$code-font-color};
|
|
|
|
--code-copy-font-color: #{lighten($body-font-color, 24)};
|
|
--code-copy-border-color: #{lighten($body-font-color, 48)};
|
|
--code-copy-success-color: #{map.get($hint-colors, "ok")};
|
|
|
|
--accent-color: #{$gray-200};
|
|
--accent-color-lite: #{$gray-100};
|
|
|
|
--control-icons: #{lighten($body-font-color, 50)};
|
|
|
|
--footer-background: #{$second-color};
|
|
--footer-font-color: #{$white};
|
|
--footer-link-color: #{$link-color-footer};
|
|
--footer-link-color-visited: #{$link-color-footer};
|
|
|
|
.dark-mode-dim .gdoc-markdown {
|
|
img {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
.gdoc-markdown {
|
|
.gdoc-hint {
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin dark_mode {
|
|
@include chroma_dark;
|
|
|
|
--header-background: #{$main-color};
|
|
--header-font-color: #{$white};
|
|
|
|
--body-background: #{$body-background-dark};
|
|
--body-font-color: #{lighten($body-background-dark, 60)};
|
|
|
|
--mark-color: #{$mark-color};
|
|
|
|
--button-background: #{lighten($main-color, 2)};
|
|
--button-border-color: #{$main-color};
|
|
|
|
--link-color: #{$link-color-dark};
|
|
--link-color-visited: #{$link-color-visited-dark};
|
|
|
|
--code-background: #{$code-background-dark};
|
|
--code-accent-color: #{darken($code-background-dark, 4)};
|
|
--code-accent-color-lite: #{darken($code-background-dark, 2)};
|
|
--code-font-color: #{$code-font-color-dark};
|
|
|
|
--code-copy-font-color: #{lighten($body-font-color, 48)};
|
|
--code-copy-border-color: #{lighten($body-font-color, 32)};
|
|
--code-copy-success-color: #{map.get($hint-colors, "ok")};
|
|
|
|
--accent-color: #{darken($body-background-dark, 4)};
|
|
--accent-color-lite: #{darken($body-background-dark, 2)};
|
|
|
|
--control-icons: #{lighten($body-font-color, 50)};
|
|
|
|
--footer-background: #{$second-color};
|
|
--footer-font-color: #{$white};
|
|
--footer-link-color: #{$link-color-footer};
|
|
--footer-link-color-visited: #{$link-color-footer};
|
|
|
|
.dark-mode-dim .gdoc-markdown {
|
|
img {
|
|
filter: brightness(0.75) grayscale(0.2);
|
|
}
|
|
}
|
|
|
|
.gdoc-markdown {
|
|
.gdoc-hint,
|
|
.gdoc-post__codecopy--success {
|
|
filter: saturate(2.5) brightness(0.85);
|
|
}
|
|
}
|
|
}
|