github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-22 04:40:40 +00:00
Code Issues Projects Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,6 +106,9 @@ enableRobotsTXT = true
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekdocDarkModeDim = false geekdocDarkModeDim = false
# (Optional, default false) Enforce code blocks to always use the dark color theme.
geekdocDarkModeCode = 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.
geekdocBackToTop = true geekdocBackToTop = true
@ -225,6 +228,9 @@ params:
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekdocDarkModeDim: false geekdocDarkModeDim: false
# (Optional, default false) Enforce code blocks to always use the dark color theme.
geekdocDarkModeCode: 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.
geekdocBackToTop: true geekdocBackToTop: 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;
@ -76,7 +76,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;

6
layouts/_default/baseof.html
View File

@ -1,5 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}" class="color-toggle-hidden"> <html
lang="{{ .Site.Language.Lang }}"
class="color-toggle-hidden"
{{ if default false .Site.Params.GeekdocDarkModeCode }}code-theme="dark"{{ end }}
>
<head> <head>
{{ partial "head/meta" . }} {{ partial "head/meta" . }}
<title> <title>

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

@ -31,7 +31,7 @@
{{ end }} {{ end }}
<span id="gdoc-dark-mode"> <span id="gdoc-color-theme">
<svg class="gdoc-icon gdoc_brightness_dark"> <svg class="gdoc-icon gdoc_brightness_dark">
<title>{{ i18n "button_toggle_dark" }}</title> <title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gdoc_brightness_dark"></use> <use xlink:href="#gdoc_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("gdoc-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-geekdoc" export const THEME = "hugo-geekdoc"
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("gdoc-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 currentMode = 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 (
currentMode === COLOR_THEME_DARK ||
(currentMode === COLOR_THEME_AUTO && darkModeQuery.matches)
) {
darkMode = true darkMode = true
theme = "dark" theme = "dark"
} }

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 {
#gdoc-dark-mode { #gdoc-color-theme {
.gdoc_brightness_auto, .gdoc_brightness_auto,
.gdoc_brightness_dark, .gdoc_brightness_dark,
.gdoc_brightness_light { .gdoc_brightness_light {
@ -37,7 +45,7 @@ html {
} }
&.color-toggle-light { &.color-toggle-light {
#gdoc-dark-mode { #gdoc-color-theme {
.gdoc_brightness_light { .gdoc_brightness_light {
display: inline-block; display: inline-block;
} }
@ -49,7 +57,7 @@ html {
} }
&.color-toggle-dark { &.color-toggle-dark {
#gdoc-dark-mode { #gdoc-color-theme {
.gdoc_brightness_dark { .gdoc_brightness_dark {
display: inline-block; display: inline-block;
} }
@ -61,7 +69,7 @@ html {
} }
&.color-toggle-auto { &.color-toggle-auto {
#gdoc-dark-mode { #gdoc-color-theme {
.gdoc_brightness_light { .gdoc_brightness_light {
display: none; display: none;
} }
@ -131,7 +139,7 @@ img {
vertical-align: middle; vertical-align: middle;
} }
#gdoc-dark-mode { #gdoc-color-theme {
cursor: pointer; cursor: pointer;
} }

35
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};
@ -15,11 +13,6 @@
--link-color: #{$link-color}; --link-color: #{$link-color};
--link-color-visited: #{$link-color-visited}; --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-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")};
@ -55,9 +48,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};
@ -77,10 +68,6 @@
--code-accent-color-lite: #{darken($code-background-dark, 2)}; --code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark}; --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: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)}; --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};
}