From c788a302020e81fe1de433dccf76ccd2c132a718 Mon Sep 17 00:00:00 2001 From: Sam Adam-Day Date: Thu, 14 Mar 2024 01:42:46 +0000 Subject: [PATCH] Added "follow system" option to theme toggle (#2261) The theme toggle button now has a third option, which follows the user's system preferences. - In the code there's now a distinction between the theme setting (which can be "dark", "light" or "system") and the computed theme. - The theme setting is now stored as the "theme-setting" local storage variable. Since this is different from the old variable ("theme"), this will effectively reset all current user themes to the default "system". Maybe this is not what you want. - The "system" theme icon is currently a half circle symbol. - The toggle button now displays the current theme setting, rather than the next theme setting (as far as I know this is consistent with other sites which have three theme options). - `theme.js` is now loaded regardless of `site.enable_darkmode`. This is because other scripts which were always loaded relied on being able to determine the theme. `theme.js` no longer initialises the theme itself though; this only happens when `site.enable_darkmode`. - When the theme setting is "system", the theme will change immediately whenever the user changes their system theme. #2261 --------- Signed-off-by: George Araujo Co-authored-by: George Araujo --- _includes/giscus.liquid | 2 +- _includes/head.liquid | 5 +- _includes/header.liquid | 5 +- _includes/scripts/diff2html.liquid | 2 +- _includes/scripts/echarts.liquid | 2 +- _includes/scripts/mermaid.liquid | 2 +- _includes/scripts/vega.liquid | 2 +- _sass/_themes.scss | 44 +- _sass/_variables.scss | 3 + _sass/tabler-icons/tabler-icons-filled.scss | 2661 +++ _sass/tabler-icons/tabler-icons-outline.scss | 18374 +++++++++++++++ _sass/tabler-icons/tabler-icons.scss | 20993 +++++++++++++++++ assets/css/main.scss | 5 +- assets/fonts/tabler-icons-filled.ttf | Bin 0 -> 211228 bytes assets/fonts/tabler-icons-filled.woff | Bin 0 -> 102480 bytes assets/fonts/tabler-icons-filled.woff2 | Bin 0 -> 81816 bytes assets/fonts/tabler-icons-outline.ttf | Bin 0 -> 2042316 bytes assets/fonts/tabler-icons-outline.woff | Bin 0 -> 1035616 bytes assets/fonts/tabler-icons-outline.woff2 | Bin 0 -> 730124 bytes assets/fonts/tabler-icons.ttf | Bin 0 -> 2264276 bytes assets/fonts/tabler-icons.woff | Bin 0 -> 1137384 bytes assets/fonts/tabler-icons.woff2 | Bin 0 -> 804560 bytes assets/js/common.js | 8 +- assets/js/no_defer.js | 2 +- assets/js/theme.js | 119 +- 25 files changed, 42162 insertions(+), 67 deletions(-) create mode 100644 _sass/tabler-icons/tabler-icons-filled.scss create mode 100644 _sass/tabler-icons/tabler-icons-outline.scss create mode 100644 _sass/tabler-icons/tabler-icons.scss create mode 100644 assets/fonts/tabler-icons-filled.ttf create mode 100644 assets/fonts/tabler-icons-filled.woff create mode 100644 assets/fonts/tabler-icons-filled.woff2 create mode 100644 assets/fonts/tabler-icons-outline.ttf create mode 100644 assets/fonts/tabler-icons-outline.woff create mode 100644 assets/fonts/tabler-icons-outline.woff2 create mode 100644 assets/fonts/tabler-icons.ttf create mode 100644 assets/fonts/tabler-icons.woff create mode 100644 assets/fonts/tabler-icons.woff2 diff --git a/_includes/giscus.liquid b/_includes/giscus.liquid index 10a5d5d813b8..8ac16ee1d06a 100644 --- a/_includes/giscus.liquid +++ b/_includes/giscus.liquid @@ -1,7 +1,7 @@
{% if site.giscus.repo %} {% if site.enable_darkmode %} - + {% endif %} diff --git a/_includes/header.liquid b/_includes/header.liquid index e4e25b5b7434..6a5829efdcd6 100644 --- a/_includes/header.liquid +++ b/_includes/header.liquid @@ -111,8 +111,9 @@
    • {% endif %} diff --git a/_includes/scripts/diff2html.liquid b/_includes/scripts/diff2html.liquid index e3add886e74e..1e3ddd5697d0 100644 --- a/_includes/scripts/diff2html.liquid +++ b/_includes/scripts/diff2html.liquid @@ -7,7 +7,7 @@ crossorigin="anonymous" > {% endif %} {% endif %}