nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

favicon: add light & dark option for OS's prefered color scheme #549

Browse source
This commit is contained in:
Sören Weber 2023-06-06 01:36:37 +02:00
parent cba1d38595
commit d39c0fb402
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 23 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/content/basics/customization/_index.en.md
View file

@ -43,7 +43,7 @@ The size of the logo will adapt automatically
If your favicon is a SVG, PNG or ICO, just drop off your image in your local `static/images/` folder and name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.
Alternatively, if you want your site to use light & dark theme SVG favicons that follow the OS' (and in some cases, the browser's) color scheme, add the image files to your local `static/images/` folder and name them `favicon-light.svg` and `favicon-dark.svg` respectively.
Additionally, if you want your site to use light & dark theme favicons that follow the OS' (and in some cases, the browser's) color scheme, add the image files to your local `static/images/` folder and name them eg. `favicon-light.svg` and/or `favicon-dark.svg` respectively corresponding to your file format. In case one of the files is missing, the theme falls back to eg. `favicon.svg` for the missing file. All supplied favicons must be of the same file format.
{{% notice warning %}}
IE and old browser versions do not support [media queries](https://caniuse.com/css-media-interaction), which are necessary for the light & dark theme favicon option.

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -24,6 +24,8 @@ This document shows you what's new in the latest release. For a detailed list of
Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports [separate favicons]({{%relref "basics/customization/#change-the-favicon" %}}) for light & dark mode optionally.
---
## 5.15.0 (2023-05-29)

50
layouts/partials/favicon.html
View file

@ -1,46 +1,32 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{- $faviconMatch := false }}
{{- $svg := dict "ext" "svg" "type" "image/svg+xml" }}
{{- $png := dict "ext" "png" "type" "image/png" }}
{{- $ico := dict "ext" "ico" "type" "image/x-icon" }}
{{- $svg := dict "ext" "svg" "type" "type=\"image/svg+xml\"" }}
{{- $png := dict "ext" "png" "type" "type=\"image/png\"" }}
{{- $ico := dict "ext" "ico" "type" "type=\"image/x-icon\" sizes=\"any\"" }}
{{- $faviconTypes := slice $svg $png $ico }}
{{- $faviconNames := slice "favicon" "logo" }}
{{- range $faviconNames }}
{{- $faviconName := . }}
{{- range $faviconTypes }}
{{- if and
(eq $faviconMatch false)
(or
(fileExists (printf "/static/images/favicon-light.%s" .ext))
(fileExists (printf "/static/images/favicon-dark.%s"))
)
}}
{{- if fileExists (printf "/static/images/%s.%s" $faviconName .ext) }}
{{- $faviconMatch = true }}
{{$c:=""}}{{/*
<link href="{{ printf "images/%s.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }}>
{{- end }}
{{- $c:="" }}{{/*
Warning: IE and old browser versions do not support media queries necessary for the light & dark theme option.
If you have requirements to support IE and/or older browser versions, use one of the other options.
Reference: https://caniuse.com/css-media-interaction
*/}}
{{- if (fileExists (printf "/static/images/favicon-light.%s" .ext)) }}
<link href="{{ printf "images/favicon-light.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}" media="(prefers-color-scheme: light)">
{{- end }}
{{- if (fileExists (printf "/static/images/favicon-dark.%s" .ext)) }}
<link href="{{ printf "images/favicon-dark.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}" media="(prefers-color-scheme: dark)">
{{- end }}
{{- end }}
{{- end }}
{{- range $faviconTypes }}
{{- if and
(eq $faviconMatch false)
(fileExists (printf "/static/images/favicon.%s" .ext))
}}
{{- if (fileExists (printf "/static/images/%s-light.%s" $faviconName .ext)) }}
{{- $faviconMatch = true }}
<link href="{{ printf "images/favicon.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}">
<link href="{{ printf "images/%s-light.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: light)">
{{- end }}
{{- if (fileExists (printf "/static/images/%s-dark.%s" $faviconName .ext)) }}
{{- $faviconMatch = true }}
<link href="{{ printf "images/%s-dark.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: dark)">
{{- end }}
{{- end }}
{{- range $faviconTypes }}
{{- if and
(eq $faviconMatch false)
(fileExists (printf "/static/images/logo.%s" .ext))
}}
{{- $faviconMatch := true }}
<link href="{{ printf "images/logo.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}">
{{- if $faviconMatch }}
{{- break }}
{{- end }}
{{- end }}