alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

✨ feat: add browser_theme_color config option (#143)

Browse Source
This commit is contained in:
Óscar 2023-09-09 19:48:53 +02:00 committed by GitHub
parent 9acaba6e35
commit 772ca29dcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
config.toml
View File

@ -162,6 +162,12 @@ default_theme = "light"
# All other skins have optimal contrast. # All other skins have optimal contrast.
skin = "" skin = ""
# Set browser theme colour. Can be a single colour or [light, dark].
# Note: Bright colors may be ignored in dark mode.
# More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
browser_theme_color = "#087e96"
# browser_theme_color = ["#ffffff", "#000000"] # Example of light/dark colours.
# List additional stylesheets to load site-wide. # List additional stylesheets to load site-wide.
# These stylesheets should be located in your site's `static` directory. # These stylesheets should be located in your site's `static` directory.
# Example: stylesheets = ["extra1.css", "path/extra2.css"] # Example: stylesheets = ["extra1.css", "path/extra2.css"]

9
templates/partials/header.html
View File

@ -53,6 +53,15 @@
<meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}" /> <meta name="color-scheme" content="{%- if config.extra.theme_switcher -%}light dark{%- elif config.extra.default_theme -%}{{config.extra.default_theme}}{%- else -%}light{%- endif -%}" />
{%- if config.extra.browser_theme_color and config.extra.browser_theme_color is iterable -%}
{# Handle array values: theme_color[0] for light mode, theme_color[1] for dark mode #}
<meta name="theme-color" media="(prefers-color-scheme: light)" content="{{ config.extra.browser_theme_color[0] }}" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{ config.extra.browser_theme_color[1] }}" />
{%- elif config.extra.browser_theme_color -%}
{# Handle single value #}
<meta name="theme-color" content="{{ config.extra.browser_theme_color }}" />
{%- endif -%}
{%- if page.description %} {%- if page.description %}
<meta name="description" content="{{ page.description | striptags | safe }}" /> <meta name="description" content="{{ page.description | striptags | safe }}" />
<meta property="og:description" content="{{ page.description | striptags | safe }}" /> <meta property="og:description" content="{{ page.description | striptags | safe }}" />

6
theme.toml
View File

@ -47,6 +47,12 @@ default_theme = "light"
# All other skins have optimal contrast. # All other skins have optimal contrast.
skin = "" skin = ""
# Set browser theme colour. Can be a single colour or [light, dark].
# Note: Bright colors may be ignored in dark mode.
# More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
# browser_theme_color = "#087e96" # Example of single value.
# browser_theme_color = ["#ffffff", "#000000"] # Example of light/dark colours.
# List additional stylesheets to load site-wide. # List additional stylesheets to load site-wide.
# These stylesheets should be located in your site's `static` directory. # These stylesheets should be located in your site's `static` directory.
# Example: stylesheets = ["extra1.css", "path/extra2.css"] # Example: stylesheets = ["extra1.css", "path/extra2.css"]