Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Jun 5, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f4fd80
Add light & dark theme SVG favicon option
tlindsay42 Jun 1, 2023
6f7e1ed
Add light & dark theme SVG favicon option docs
tlindsay42 Jun 1, 2023
b5e8f9e
Loop through favicon types for selection
tlindsay42 Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions exampleSite/content/basics/customization/_index.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,13 @@ 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.

{{% 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.
If you have requirements to support IE and/or older browser versions, use one of the other options.
{{% /notice %}}

If no favicon file is found, the theme will lookup the alternative filename `logo` in the same location and will repeat the search for the list of supported file types.

If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this:
Expand Down
56 changes: 44 additions & 12 deletions layouts/partials/favicon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,46 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{- if (fileExists "/static/images/favicon.svg") }}
<link href="{{ "images/favicon.svg" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/svg+xml">
{{- else if (fileExists "/static/images/favicon.png") }}
<link href="{{ "images/favicon.png" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/png">
{{- else if (fileExists "/static/images/favicon.ico") }}
<link href="{{ "images/favicon.ico" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/x-icon">
{{- else if (fileExists "/static/images/logo.svg") }}
<link href="{{ "images/logo.svg" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/svg+xml">
{{- else if (fileExists "/static/images/logo.png") }}
<link href="{{ "images/logo.png" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/png">
{{- else if (fileExists "/static/images/logo.ico") }}
<link href="{{ "images/logo.ico" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="image/x-icon">
{{- $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" }}
{{- $faviconTypes := slice $svg $png $ico }}
{{- range $faviconTypes }}
{{- if and
(eq $faviconMatch false)
(or
(fileExists (printf "/static/images/favicon-light.%s" .ext))
(fileExists (printf "/static/images/favicon-dark.%s"))
)
}}
{{- $faviconMatch = true }}
{{/*
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))
}}
{{- $faviconMatch = true }}
<link href="{{ printf "images/favicon.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}">
{{- 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 }}">
{{- end }}
{{- end }}