From 6d34293f629b2d6bd315ca2d0be52d20b116564d Mon Sep 17 00:00:00 2001 From: ondrej Date: Fri, 21 Oct 2022 10:20:01 +0200 Subject: [PATCH] Style color scheme selector --- assets/main.css | 32 ++++++++++++++++++++++ assets/style.css | 40 +++++++++++++++++++++++++--- layouts/_default/baseof.html | 8 ++++-- layouts/partials/theme-selector.html | 27 +++++++++++++++++++ 4 files changed, 101 insertions(+), 6 deletions(-) create mode 100644 layouts/partials/theme-selector.html diff --git a/assets/main.css b/assets/main.css index f07ff5f..fd84e16 100644 --- a/assets/main.css +++ b/assets/main.css @@ -7,6 +7,38 @@ html { font-size: theme("fontSize.2xl"); } +/* Color scheme */ + +.color-scheme--sync .color-scheme--light-icon { + display: none; +} + +.color-scheme--sync .color-scheme--dark-icon { + display: block; +} + +@media (prefers-color-scheme: dark) { + .color-scheme--sync .color-scheme--light-icon { + display: block; + } + + .color-scheme--sync .color-scheme--dark-icon { + display: none; + } +} + +.color-scheme--dark .color-scheme--dark-icon, +.color-scheme--light .color-scheme--light-icon { + display: none; +} + +.color-scheme--dark .color-scheme--light-icon, +.color-scheme--light .color-scheme--dark-icon { + display: block; +} + +/* Typography */ + .prose p { @apply mb-4; } diff --git a/assets/style.css b/assets/style.css index 266322d..e112d4a 100644 --- a/assets/style.css +++ b/assets/style.css @@ -668,14 +668,14 @@ video { align-items: center; } -.gap-2 { - gap: 0.5rem; -} - .gap-6 { gap: 1.5rem; } +.gap-2 { + gap: 0.5rem; +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -724,6 +724,38 @@ html { font-size: 1.5rem; } +/* Color scheme */ + +.color-scheme--sync .color-scheme--light-icon { + display: none; +} + +.color-scheme--sync .color-scheme--dark-icon { + display: block; +} + +@media (prefers-color-scheme: dark) { + .color-scheme--sync .color-scheme--light-icon { + display: block; + } + + .color-scheme--sync .color-scheme--dark-icon { + display: none; + } +} + +.color-scheme--dark .color-scheme--dark-icon, +.color-scheme--light .color-scheme--light-icon { + display: none; +} + +.color-scheme--dark .color-scheme--light-icon, +.color-scheme--light .color-scheme--dark-icon { + display: block; +} + +/* Typography */ + .prose p { margin-bottom: 1rem; } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c4d1988..7214508 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,13 +12,17 @@ {{ partialCached "tracking.html" . }} - +
-
+
{{ site.Title }} {{ partial "language-selector.html" . }} + {{ partial "theme-selector.html" . }}
{{ partial "menu.html" . }}
diff --git a/layouts/partials/theme-selector.html b/layouts/partials/theme-selector.html new file mode 100644 index 0000000..d633006 --- /dev/null +++ b/layouts/partials/theme-selector.html @@ -0,0 +1,27 @@ +

{{ i18n "theme_select_title" }}

+ + +