nick
/
tabi-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: follow user OS theme with JS disabled (#357)

Browse Source
main
Óscar 7 months ago committed by GitHub
parent 5db006ac47
commit c7b79552c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File

4
config.toml
Unescape Escape View File

@ -77,11 +77,11 @@ taxonomies = [{name = "tags", feed = true}]
override_serif_with_sans = false
# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
# If disabled, your site will only use the theme specified in the `default_theme` variable.
# If disabled, your site will use the theme specified in the `default_theme` variable.
theme_switcher = true
# This setting determines the default theme on load ("light" or "dark").
# To default to the user's OS-level theme, leave it empty or unset.
# To follow the user's OS theme, leave it empty or unset.
default_theme = ""
# Choose the colourscheme (skin) for the theme. Default is "teal".

2
content/blog/customise-tabi/index.ca.md
Unescape Escape View File

@ -19,6 +19,8 @@ tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc
Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.
Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l'usuari (mode clar o fosc).
Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`.
Per exemple, per tenir un tema fosc permanent:

2
content/blog/customise-tabi/index.es.md
Unescape Escape View File

@ -19,6 +19,8 @@ tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminad
Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado.
Establecer `default_theme = ""` (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro).
Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el `theme_switcher` en `config.toml` y establecer tu tema preferido (`light` o `dark`) como el `default_theme`.
Por ejemplo, para tener un tema oscuro permanente:

2
content/blog/customise-tabi/index.md
Unescape Escape View File

@ -19,6 +19,8 @@ tabi can be customised in two ways: by setting the default theme (dark or light)
Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default.
Setting `default_theme = ""` (or commenting out the variable) will follow the user's system preference (light or dark mode).
To permanently set your site to either the dark or light theme, you need to disable the theme switcher in `config.toml` and set your preferred theme as the `default_theme`.
For example, to have a permanent dark theme:

60
sass/main.scss
Unescape Escape View File

@ -46,18 +46,8 @@
font-display: swap;
}
:root {
--max-layout-width: 1000px;
--normal-layout-width: 600px;
--medium-layout-width: 400px;
--small-layout-width: 200px;
--paragraph-spacing: max(2.3vmin, 24px);
--sans-serif-font: 'Inter', Helvetica, Arial, sans-serif;
--serif-font: 'Source Serif', 'Georgia', serif;
--code-font: 'Cascadia Code';
@mixin theme-variables($theme) {
@if $theme =='light' {
--background-color: white;
--bg-0: #f0f0f0;
--bg-1: #e7e7e7;
@ -71,16 +61,11 @@
--meta-color: #5b5b65;
--codeblock-bg: #26232e;
--codeblock-highlight: #383444;
--theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A");
color-scheme: light;
line-height: 190%;
font-family: var(--sans-serif-font);
}
[data-theme='dark'] {
}
@else {
--background-color: #1f1f1f;
--bg-0: #2f2f2f;
--bg-1: #3c3c3c;
@ -94,9 +79,30 @@
--meta-color: #B0B0B0;
--codeblock-bg: #19181e;
--codeblock-highlight: #282834;
--theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E");
color-scheme: dark;
}
}
:root {
@include theme-variables('light');
--max-layout-width: 1000px;
--normal-layout-width: 600px;
--medium-layout-width: 400px;
--small-layout-width: 200px;
--paragraph-spacing: max(2.3vmin, 24px);
--sans-serif-font: 'Inter', Helvetica, Arial, sans-serif;
--serif-font: 'Source Serif', 'Georgia', serif;
--code-font: 'Cascadia Code';
line-height: 190%;
font-family: var(--sans-serif-font);
}
[data-theme='dark'] {
@include theme-variables('dark');
.invertible-image {
filter: invert(.88);
@ -107,6 +113,20 @@
}
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
.invertible-image {
filter: invert(.88);
}
.dimmable-image {
filter: brightness(.8) contrast(1.2);
}
}
}
html {
background-color: var(--background-color);
color: var(--text-color);

3
static/feed_style.xsl
Unescape Escape View File

@ -4,6 +4,9 @@
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<xsl:attribute name="data-theme">
<xsl:value-of select="/atom:feed/str:translations/str:default_theme"/>
</xsl:attribute>
<head>
<title>
<xsl:value-of select="/atom:feed/atom:title"/> • Feed

3
templates/atom.xml
Unescape Escape View File

@ -24,6 +24,9 @@
<str:last_updated_on>
{{- macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -}}
</str:last_updated_on>
<str:default_theme>
{{- config.extra.default_theme | default(value="") -}}
</str:default_theme>
</str:translations>
{#- Load extra CSS (skin) if set in config.toml -#}

4
theme.toml
Unescape Escape View File

@ -34,11 +34,11 @@ homepage = "https://osc.garden"
override_serif_with_sans = false
# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
# If disabled, your site will only use the theme specified in the `default_theme` variable.
# If disabled, your site will use the theme specified in the `default_theme` variable.
theme_switcher = true
# This setting determines the default theme on load ("light" or "dark").
# To default to the user's OS-level theme, leave it empty or unset.
# To follow the user's OS theme, leave it empty or unset.
default_theme = ""
# Choose the colourscheme (skin) for the theme. Default is "teal".

Write Preview
Loading…
Cancel
Save