119 lines
3.3 KiB
SCSS
119 lines
3.3 KiB
SCSS
@mixin color_theme_light {
|
|
--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};
|
|
--link-color-footer: #{$link-color-footer};
|
|
|
|
--accent-color-dark: #{$gray-600};
|
|
--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 .gblog-markdown {
|
|
img {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
.gblog-markdown {
|
|
.gblog-hint {
|
|
filter: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin color_theme_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};
|
|
--link-color-footer: #{$link-color-footer};
|
|
|
|
--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-dark: #{darken($body-background-dark, 8)};
|
|
--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 {
|
|
.gblog-post__feature picture,
|
|
.gblog-markdown img {
|
|
filter: brightness(0.75) grayscale(0.2);
|
|
}
|
|
}
|
|
|
|
.gblog-markdown {
|
|
.gblog-hint,
|
|
.admonitionblock {
|
|
filter: saturate(2.5) brightness(0.85);
|
|
}
|
|
|
|
.gblog-hint__title,
|
|
.admonitionblock table td:first-child {
|
|
background-color: scale-color($gray-600, $alpha: -85%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin code_theme_dark {
|
|
@include chroma_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-background: #{$body-background-dark};
|
|
--code-copy-font-color: #{lighten($body-font-color, 24)};
|
|
--code-copy-border-color: #{lighten($body-font-color, 24)};
|
|
--code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
|
|
}
|
|
|
|
@mixin code_theme_light {
|
|
@include chroma_github;
|
|
|
|
--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-background: #{$code-background};
|
|
--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")};
|
|
}
|