From a15722b8644e694f7bc3a93fcc4cae4ba7355e6f Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sat, 17 Apr 2021 12:42:03 +0200 Subject: [PATCH 1/2] 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 (cherry picked from commit 60251d89ee1de87b6df00ca7a91529d4acb6ee46) Signed-off-by: Philip Molares --- docs/content/images/hedgedoc_logo_black.svg | 1 + .../images/hedgedoc_logo_horizontal.svg | 31 ---------- docs/content/images/hedgedoc_logo_white.svg | 1 + docs/content/images/logo.svg | 15 +---- docs/content/index.md | 3 +- docs/content/theme/styles/hedgedoc-custom.css | 58 +++++++++++++++++-- docs/mkdocs.yml | 18 +++++- 7 files changed, 73 insertions(+), 54 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 000000000..b8bcd7ae0 --- /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 e6dc0aa5d..000000000 --- a/docs/content/images/hedgedoc_logo_horizontal.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/docs/content/images/hedgedoc_logo_white.svg b/docs/content/images/hedgedoc_logo_white.svg new file mode 100644 index 000000000..6a6fa39a0 --- /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 c194df468..d38f91d49 100644 --- a/docs/content/images/logo.svg +++ b/docs/content/images/logo.svg @@ -1,14 +1 @@ - - - - - + diff --git a/docs/content/index.md b/docs/content/index.md index 3bf566fcd..72ac38b6c 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -1,6 +1,7 @@ # Welcome to the HedgeDoc 2 Documentation -![HedgeDoc Logo](images/hedgedoc_logo_horizontal.svg) +HedgeDoc Logo +HedgeDoc Logo ๐Ÿšงโš ๏ธ๐Ÿšง **HedgeDoc 2.0 is still in development!** You are probably looking for the 1.x docs. diff --git a/docs/content/theme/styles/hedgedoc-custom.css b/docs/content/theme/styles/hedgedoc-custom.css index 4d7cbcb7d..6938713e2 100644 --- a/docs/content/theme/styles/hedgedoc-custom.css +++ b/docs/content/theme/styles/hedgedoc-custom.css @@ -4,12 +4,44 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +[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] { @@ -21,3 +53,19 @@ .md-grid { max-width: 1440px; } + +.twitter { + color: #1DA1F2; +} + +.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 dabb999f4..012d5ceaf 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -30,9 +30,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 From 1dfe84be1c7a51f42904c5854fb1dd6897bf0be4 Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sun, 25 Apr 2021 12:54:29 +0200 Subject: [PATCH 2/2] Reuse: Add license information for dark mode logos Signed-off-by: Philip Molares --- .reuse/dep5 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.reuse/dep5 b/.reuse/dep5 index 7aa58a018..cd7e61b2e 100644 --- a/.reuse/dep5 +++ b/.reuse/dep5 @@ -47,7 +47,7 @@ Files: docs/content/images/logo.svg Copyright: 2021 The HedgeDoc developers (see AUTHORS file) License: LicenseRef-HedgeDoc-Icon-Usgae-Guidelines -Files: docs/content/images/hedgedoc_logo_horizontal.svg +Files: docs/content/images/hedgedoc_logo_*.svg Copyright: 2021 The HedgeDoc developers (see AUTHORS file) License: LicenseRef-HedgeDoc-Icon-Usgae-Guidelines