systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add option geekdocDarkModeCode to enforce dark codeblocks (#429)

Browse source
This commit is contained in:
Robert Kaussow 2022-05-31 14:14:01 +02:00 • committed by GitHub
parent 33ea5c37a9
commit 6545ceb24d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 117 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/sass/_base.scss
View file

@ -1,23 +1,31 @@
:root,
:root[color-mode="light"] {
:root[color-theme="light"] {
--code-max-height: none;
@include light_mode;
@include color_theme_light;
@include code_theme_light;
}
@media (prefers-color-scheme: light) {
:root {
@include light_mode;
@include color_theme_light;
@include code_theme_light;
}
}
:root[color-mode="dark"] {
@include dark_mode;
:root[color-theme="dark"] {
@include color_theme_dark;
@include code_theme_dark;
}
:root[code-theme="dark"] {
@include code_theme_dark;
}
@media (prefers-color-scheme: dark) {
:root {
@include dark_mode;
@include color_theme_dark;
@include code_theme_dark;
}
}
@ -27,7 +35,7 @@ html {
scroll-behavior: smooth;
&.color-toggle-hidden {
#gdoc-dark-mode {
#gdoc-color-theme {
.gdoc_brightness_auto,
.gdoc_brightness_dark,
.gdoc_brightness_light {
@ -37,7 +45,7 @@ html {
}
&.color-toggle-light {
#gdoc-dark-mode {
#gdoc-color-theme {
.gdoc_brightness_light {
display: inline-block;
}
@ -49,7 +57,7 @@ html {
}
&.color-toggle-dark {
#gdoc-dark-mode {
#gdoc-color-theme {
.gdoc_brightness_dark {
display: inline-block;
}
@ -61,7 +69,7 @@ html {
}
&.color-toggle-auto {
#gdoc-dark-mode {
#gdoc-color-theme {
.gdoc_brightness_light {
display: none;
}
@ -131,7 +139,7 @@ img {
vertical-align: middle;
}
#gdoc-dark-mode {
#gdoc-color-theme {
cursor: pointer;
}

35
src/sass/_color_mode.scss
View file

@ -1,6 +1,4 @@
@mixin light_mode {
@include chroma_github;
@mixin color_theme_light {
--header-background: #{$main-color};
--header-font-color: #{$white};
@ -15,11 +13,6 @@
--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")};
@ -55,9 +48,7 @@
}
}
@mixin dark_mode {
@include chroma_dark;
@mixin color_theme_dark {
--header-background: #{$main-color};
--header-font-color: #{$white};
@ -77,10 +68,6 @@
--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)};
@ -111,3 +98,21 @@
}
}
}
@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};
}
@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};
}