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/theme/styles/hedgedoc-custom.css | 50 ++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 5 deletions(-) (limited to 'docs/content/theme/styles/hedgedoc-custom.css') 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; +} -- cgit v1.2.3