From 7f4fd806e7283c98b9fd4fb39008ab6855eabb83 Mon Sep 17 00:00:00 2001 From: Troy Lindsay Date: Thu, 1 Jun 2023 16:37:33 -0400 Subject: [PATCH 1/3] Add light & dark theme SVG favicon option * #549 --- layouts/partials/favicon.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/layouts/partials/favicon.html b/layouts/partials/favicon.html index 8aec49612d8..0d6bbe3161c 100644 --- a/layouts/partials/favicon.html +++ b/layouts/partials/favicon.html @@ -1,5 +1,17 @@ {{- $assetBusting := not .Site.Params.disableAssetsBusting }} - {{- if (fileExists "/static/images/favicon.svg") }} + {{- if or (fileExists "/static/images/favicon-light.svg") (fileExists "/static/images/favicon-dark.svg") }} + {{/* + 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 "/static/images/favicon-light.svg") }} + + {{- end }} + {{- if (fileExists "/static/images/favicon-dark.svg") }} + + {{- end }} + {{- else if (fileExists "/static/images/favicon.svg") }} {{- else if (fileExists "/static/images/favicon.png") }} From 6f7e1ed917cc990444fa9067254ac4ab76967ec4 Mon Sep 17 00:00:00 2001 From: Troy Lindsay Date: Thu, 1 Jun 2023 16:39:38 -0400 Subject: [PATCH 2/3] Add light & dark theme SVG favicon option docs * #549 --- exampleSite/content/basics/customization/_index.en.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index ac4f974f34b..ce5df65efc1 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/exampleSite/content/basics/customization/_index.en.md @@ -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: From b5e8f9eb8f132e65135f86cce707e27c5d19ae9d Mon Sep 17 00:00:00 2001 From: Troy Lindsay Date: Thu, 1 Jun 2023 20:18:41 -0400 Subject: [PATCH 3/3] Loop through favicon types for selection * https://github.com/McShelby/hugo-theme-relearn/pull/553#discussion_r1213705852 --- layouts/partials/favicon.html | 54 ++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/layouts/partials/favicon.html b/layouts/partials/favicon.html index 0d6bbe3161c..ffb20f71f20 100644 --- a/layouts/partials/favicon.html +++ b/layouts/partials/favicon.html @@ -1,26 +1,46 @@ {{- $assetBusting := not .Site.Params.disableAssetsBusting }} - {{- if or (fileExists "/static/images/favicon-light.svg") (fileExists "/static/images/favicon-dark.svg") }} + {{- $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 "/static/images/favicon-light.svg") }} - + {{- if (fileExists (printf "/static/images/favicon-light.%s" .ext)) }} + {{- end }} - {{- if (fileExists "/static/images/favicon-dark.svg") }} - + {{- if (fileExists (printf "/static/images/favicon-dark.%s" .ext)) }} + + {{- end }} + {{- end }} + {{- end }} + {{- range $faviconTypes }} + {{- if and + (eq $faviconMatch false) + (fileExists (printf "/static/images/favicon.%s" .ext)) + }} + {{- $faviconMatch = true }} + + {{- end }} + {{- end }} + {{- range $faviconTypes }} + {{- if and + (eq $faviconMatch false) + (fileExists (printf "/static/images/logo.%s" .ext)) + }} + {{- $faviconMatch := true }} + {{- end }} - {{- else if (fileExists "/static/images/favicon.svg") }} - - {{- else if (fileExists "/static/images/favicon.png") }} - - {{- else if (fileExists "/static/images/favicon.ico") }} - - {{- else if (fileExists "/static/images/logo.svg") }} - - {{- else if (fileExists "/static/images/logo.png") }} - - {{- else if (fileExists "/static/images/logo.ico") }} - {{- end }} \ No newline at end of file