github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-21 12:40:39 +00:00
Code Issues Projects Releases Wiki Activity

feat: add option geekblogDarkModeCode to enforce dark code blocks (#255)

Browse Source
This commit is contained in:
Robert Kaussow 2022-06-02 14:01:56 +02:00 committed by GitHub
parent 77791d1f8e
commit 29021a4cb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 116 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
exampleSite/content/posts/usage/configuration.md
View File

@ -121,6 +121,9 @@ enableRobotsTXT = true
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekblogDarkModeDim = false geekblogDarkModeDim = false
# (Optional, default false) Enforce code blocks to always use the dark color theme.
geekblogDarkModeCode = false
# (Optional, default true) Display a "Back to top" link in the site footer. # (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop = true geekblogBackToTop = true
@ -250,6 +253,9 @@ params:
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekblogDarkModeDim: false geekblogDarkModeDim: false
# (Optional, default false) Enforce code blocks to always use the dark color theme.
geekblogDarkModeCode: false
# (Optional, default true) Display a "Back to top" link in the site footer. # (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop: true geekblogBackToTop: true

4
exampleSite/static/custom.css.example
View File

@ -6,7 +6,7 @@
/* Light mode theming */ /* Light mode theming */
:root, :root,
:root[color-mode="light"] { :root[color-theme="light"] {
--header-background: #4ec58a; --header-background: #4ec58a;
--header-font-color: #ffffff; --header-font-color: #ffffff;
@ -78,7 +78,7 @@
} }
/* Dark mode theming */ /* Dark mode theming */
:root[color-mode="dark"] { :root[color-theme="dark"] {
--header-background: #4ec58a; --header-background: #4ec58a;
--header-font-color: #ffffff; --header-font-color: #ffffff;

1
layouts/_default/baseof.html
View File

@ -4,6 +4,7 @@
itemtype="http://schema.org/WebPage" itemtype="http://schema.org/WebPage"
lang="{{ .Site.Language.Lang }}" lang="{{ .Site.Language.Lang }}"
class="color-toggle-hidden" class="color-toggle-hidden"
{{ if default false .Site.Params.GeekblogDarkModeCode }}code-theme="dark"{{ end }}
> >
<head> <head>
{{ partial "head/meta" . }} {{ partial "head/meta" . }}

2
layouts/partials/site-header.html
View File

@ -17,7 +17,7 @@
</a> </a>
</div> </div>
<div class="gblog-header__col-3 flex justify-end"> <div class="gblog-header__col-3 flex justify-end">
<span id="gblog-dark-mode"> <span id="gblog-color-theme">
<svg class="gblog-icon gblog_brightness_dark"> <svg class="gblog-icon gblog_brightness_dark">
<title>{{ i18n "button_toggle_dark" }}</title> <title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_dark"></use> <use xlink:href="#gblog_brightness_dark"></use>

2
src/js/app.js
View File

@ -1,4 +1,4 @@
const { applyTheme } = require("./darkmode") const { applyTheme } = require("./colorTheme")
const { createCopyButton } = require("./copycode.js") const { createCopyButton } = require("./copycode.js")
const Clipboard = require("clipboard") const Clipboard = require("clipboard")

53
src/js/colorTheme.js Normal file
View File

@ -0,0 +1,53 @@
const Storage = require("store2")
const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js")
document.addEventListener("DOMContentLoaded", (event) => {
const colorThemeToggle = document.getElementById("gblog-color-theme")
colorThemeToggle.onclick = function () {
let lstore = Storage.namespace(THEME)
let currentColorTheme = lstore.get("color-theme")
let nextColorTheme = toggle(TOGGLE_COLOR_THEMES, currentColorTheme)
lstore.set("color-theme", TOGGLE_COLOR_THEMES[nextColorTheme])
applyTheme(false)
}
})
export function applyTheme(init = true) {
if (Storage.isFake()) return
let lstore = Storage.namespace(THEME)
let html = document.documentElement
let currentColorTheme = TOGGLE_COLOR_THEMES.includes(lstore.get("color-theme"))
? lstore.get("color-theme")
: COLOR_THEME_AUTO
html.setAttribute("class", "color-toggle-" + currentColorTheme)
lstore.set("color-theme", currentColorTheme)
if (currentColorTheme === COLOR_THEME_AUTO) {
html.removeAttribute("color-theme")
} else {
html.setAttribute("color-theme", currentColorTheme)
}
if (!init) {
// Reload required to re-initialise e.g. Mermaid with the new theme
// and re-parse the Mermaid code blocks.
location.reload()
}
}
function toggle(list = [], value) {
let current = list.indexOf(value)
let max = list.length - 1
let next = 0
if (current < max) {
next = current + 1
}
return next
}

8
src/js/config.js
View File

@ -1,5 +1,5 @@
export const DARK_MODE = "dark" export const COLOR_THEME_DARK = "dark"
export const LIGHT_MODE = "light" export const COLOR_THEME_LIGHT = "light"
export const AUTO_MODE = "auto" export const COLOR_THEME_AUTO = "auto"
export const THEME = "hugo-geekblog" export const THEME = "hugo-geekblog"
export const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE] export const TOGGLE_COLOR_THEMES = [COLOR_THEME_AUTO, COLOR_THEME_DARK, COLOR_THEME_LIGHT]

53
src/js/darkmode.js
View File

@ -1,53 +0,0 @@
const Storage = require("store2")
const { TOGGLE_MODES, THEME, AUTO_MODE } = require("./config.js")
document.addEventListener("DOMContentLoaded", (event) => {
const darkModeToggle = document.getElementById("gblog-dark-mode")
darkModeToggle.onclick = function () {
let lstore = Storage.namespace(THEME)
let currentMode = lstore.get("color-mode")
let nextMode = toggle(TOGGLE_MODES, currentMode)
lstore.set("color-mode", TOGGLE_MODES[nextMode])
applyTheme(false)
}
})
export function applyTheme(init = true) {
if (Storage.isFake()) return
let lstore = Storage.namespace(THEME)
let html = document.documentElement
let currentMode = TOGGLE_MODES.includes(lstore.get("color-mode"))
? lstore.get("color-mode")
: AUTO_MODE
html.setAttribute("class", "color-toggle-" + currentMode)
lstore.set("color-mode", currentMode)
if (currentMode === AUTO_MODE) {
html.removeAttribute("color-mode")
} else {
html.setAttribute("color-mode", currentMode)
}
if (!init) {
// Reload required to re-initialise e.g. Mermaid with the new theme
// and re-parse the Mermaid code blocks.
location.reload()
}
}
function toggle(list = [], value) {
let current = list.indexOf(value)
let max = list.length - 1
let next = 0
if (current < max) {
next = current + 1
}
return next
}

9
src/js/mermaid.js
View File

@ -1,14 +1,17 @@
const Storage = require("store2") const Storage = require("store2")
const { DARK_MODE, THEME, AUTO_MODE } = require("./config.js") const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {
let lstore = Storage.namespace(THEME) let lstore = Storage.namespace(THEME)
let currentMode = lstore.get("color-mode") let currentColorTheme = lstore.get("color-theme")
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)") let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
let darkMode = false let darkMode = false
let theme = "default" let theme = "default"
if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) { if (
currentColorTheme === COLOR_THEME_DARK ||
(currentColorTheme === COLOR_THEME_AUTO && darkModeQuery.matches)
) {
darkMode = true darkMode = true
theme = "dark" theme = "dark"
} }

2
src/sass/_asciidoc.scss
View File

@ -48,7 +48,7 @@
@each $name, $icon in $hint-icons { @each $name, $icon in $hint-icons {
i.fa.icon-#{$name} { i.fa.icon-#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon}); background-image: url(img/geekblog-stack.svg##{$icon});
} }
} }
} }

30
src/sass/_base.scss
View File

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

36
src/sass/_color_mode.scss
View File

@ -1,6 +1,4 @@
@mixin light_mode { @mixin color_theme_light {
@include chroma_github;
--header-background: #{$main-color}; --header-background: #{$main-color};
--header-font-color: #{$white}; --header-font-color: #{$white};
@ -16,11 +14,6 @@
--link-color-visited: #{$link-color-visited}; --link-color-visited: #{$link-color-visited};
--link-color-footer: #{$link-color-footer}; --link-color-footer: #{$link-color-footer};
--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-font-color: #{lighten($body-font-color, 24)};
--code-copy-border-color: #{lighten($body-font-color, 48)}; --code-copy-border-color: #{lighten($body-font-color, 48)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --code-copy-success-color: #{map.get($hint-colors, "ok")};
@ -49,9 +42,7 @@
} }
} }
@mixin dark_mode { @mixin color_theme_dark {
@include chroma_dark;
--header-background: #{$main-color}; --header-background: #{$main-color};
--header-font-color: #{$white}; --header-font-color: #{$white};
@ -67,11 +58,6 @@
--link-color-visited: #{$link-color-visited-dark}; --link-color-visited: #{$link-color-visited-dark};
--link-color-footer: #{$link-color-footer}; --link-color-footer: #{$link-color-footer};
--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-font-color: #{lighten($body-font-color, 48)};
--code-copy-border-color: #{lighten($body-font-color, 32)}; --code-copy-border-color: #{lighten($body-font-color, 32)};
--code-copy-success-color: #{map.get($hint-colors, "ok")}; --code-copy-success-color: #{map.get($hint-colors, "ok")};
@ -107,3 +93,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};
}

2
src/sass/_shortcodes.scss
View File

@ -165,7 +165,7 @@
@each $name, $icon in $hint-icons { @each $name, $icon in $hint-icons {
i.fa.#{$name} { i.fa.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon}); background-image: url(img/geekblog-stack.svg##{$icon});
} }
} }

2
svgsprite.config.json
View File

@ -28,7 +28,7 @@
}, },
"stack": { "stack": {
"dest": "build/img/", "dest": "build/img/",
"sprite": "geekdoc-stack.svg", "sprite": "geekblog-stack.svg",
"bust": false "bust": false
} }
} }