From 60251d89ee1de87b6df00ca7a91529d4acb6ee46 Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sat, 17 Apr 2021 12:42:03 +0200 Subject: Documentation: Add toggleable dark theme The dark theme is mostly built on top of the mkdocs slate theme. Signed-off-by: Philip Molares Co-Authored-by: Tilman Vatteroth --- docs/content/images/hedgedoc_logo_black.svg | 1 + docs/content/images/hedgedoc_logo_horizontal.svg | 1 - docs/content/images/hedgedoc_logo_white.svg | 1 + docs/content/images/logo.svg | 2 +- docs/content/index.md | 3 +- docs/content/theme/styles/hedgedoc-custom.css | 50 +++++++++++++++++++++--- docs/mkdocs.yml | 18 +++++++-- 7 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 docs/content/images/hedgedoc_logo_black.svg delete mode 100644 docs/content/images/hedgedoc_logo_horizontal.svg create mode 100644 docs/content/images/hedgedoc_logo_white.svg diff --git a/docs/content/images/hedgedoc_logo_black.svg b/docs/content/images/hedgedoc_logo_black.svg new file mode 100644 index 00000000..b8bcd7ae --- /dev/null +++ b/docs/content/images/hedgedoc_logo_black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/content/images/hedgedoc_logo_horizontal.svg b/docs/content/images/hedgedoc_logo_horizontal.svg deleted file mode 100644 index 387e2c03..00000000 --- a/docs/content/images/hedgedoc_logo_horizontal.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/content/images/hedgedoc_logo_white.svg b/docs/content/images/hedgedoc_logo_white.svg new file mode 100644 index 00000000..6a6fa39a --- /dev/null +++ b/docs/content/images/hedgedoc_logo_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/content/images/logo.svg b/docs/content/images/logo.svg index 8e4071ea..c2b5ef43 100644 --- a/docs/content/images/logo.svg +++ b/docs/content/images/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/docs/content/index.md b/docs/content/index.md index df961b02..d2ab656c 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -1,6 +1,7 @@ # Welcome to the HedgeDoc Documentation -![HedgeDoc Logo](images/hedgedoc_logo_horizontal.svg) +HedgeDoc Logo +HedgeDoc Logo HedgeDoc lets you create real-time collaborative markdown notes. You can test-drive it by visiting our [HedgeDoc demo server][hedgedoc-demo]. diff --git a/docs/content/theme/styles/hedgedoc-custom.css b/docs/content/theme/styles/hedgedoc-custom.css index e3c52757..97baeed5 100644 --- a/docs/content/theme/styles/hedgedoc-custom.css +++ b/docs/content/theme/styles/hedgedoc-custom.css @@ -1,9 +1,41 @@ +[data-md-color-scheme="slate"][data-md-color-primary=hedgedoc] { + --md-hue: 8; + --md-default-fg-color: hsla(var(--md-hue), 20%, 80%, 1); + --md-default-fg-color--light: hsla(var(--md-hue), 20%, 80%, 1); + --md-default-fg-color--lighter: hsla(var(--md-hue), 20%, 80%, 0.5); + --md-default-fg-color--lightest: hsla(var(--md-hue), 20%, 80%, 0.2); + + --md-default-bg-color: hsla(var(--md-hue), 0%, 5%, 1); + --md-default-bg-color--light: hsla(var(--md-hue), 0%, 5%, 0.54); + --md-default-bg-color--lighter: hsla(var(--md-hue), 0%, 5%, 0.26); + --md-default-bg-color--lightest: hsla(var(--md-hue), 0%, 5%, 0.07); + + --md-typeset-color: hsl(var(--md-hue), 5%, 80%); + --md-typeset-a-color: hsl(var(--md-hue), 92%, 67%, 1); + --md-primary-fg-color: hsl(var(--md-hue), 92%, 25%, 1); + --md-table-header-fg-color: var(--md-typeset-color); + --md-table-header-bg-color: hsla(var(--md-hue), 0%, 20%, 1); + + --md-code-fg-color: hsla(var(--md-hue),0%,86%,1); + --md-code-bg-color: hsla(var(--md-hue),0%,15%,1); +} + +[data-md-color-primary=hedgedoc] .md-typeset table:not([class]) th { + background-color: var(--md-table-header-bg-color); + color: var(--md-table-header-fg-color); +} + [data-md-color-primary=hedgedoc] { - --md-primary-fg-color: #b51f08; - --md-primary-fg-color--light: #b51f08; - --md-primary-fg-color--dark: #b51f08; - --md-primary-bg-color: hsla(0, 0%, 100%, 1); - --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7); + --md-hue: 8; + --md-primary-fg-color: hsl(var(--md-hue), 92%, 37%, 1); + --md-primary-fg-color--dark: var(--md-primary-fg-color); + --md-primary-fg-color--light: var(--md-primary-fg-color); + --md-primary-bg-color: hsla(0, 15%, 100%, 1); + --md-footer-bg-color: hsla(var(--md-hue), 0%, 12%, 1); + --md-footer-bg-color--dark: hsla(var(--md-hue), 0%, 16%, 1); + + --md-table-header-fg-color: var(--md-default-bg-color); + --md-table-header-bg-color: var(--md-default-fg-color--light); } [data-md-color-accent=hedgedoc] { @@ -24,3 +56,11 @@ .mastodon { color: #2b90d9; } + +[data-md-color-scheme="slate"] .light-mode-only { + display: none; +} + +[data-md-color-scheme="light"] .dark-mode-only { + display: none; +} diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 5b04cc40..fc66f964 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -66,9 +66,21 @@ theme: favicon: images/favicon.png logo: images/logo.svg palette: - scheme: light - primary: 'hedgedoc' - accent: 'hedgedoc' + - media: "(prefers-color-scheme: light)" + scheme: light + primary: 'hedgedoc' + accent: 'hedgedoc' + toggle: + icon: material/lightbulb-outline + name: Switch to dark mode + # Dark mode + - media: "(prefers-color-scheme: dark)" + scheme: slate + primary: 'hedgedoc' + accent: 'hedgedoc' + toggle: + icon: material/lightbulb + name: Switch to light mode features: - navigation.tabs - navigation.sections -- cgit v1.2.3