Add support for images optimized for dark themes (#2736)

.github/workflows/validate/validate.sh

@@ -56,18 +56,26 @@ while read image; do
       && [[ ! -f "${folderpath}/logo.png" ]] \
         && error "${image}" "hDPI logo was provided, but the normal version is missing"
 
+    [[ "${filename}" == "dark_icon@2x.png" ]] \
+      && [[ ! -f "${folderpath}/dark_icon.png" ]] \
+        && error "${image}" "hDPI icon was provided, but the normal version is missing"
+
+    [[ "${filename}" == "dark_logo@2x.png" ]] \
+      && [[ ! -f "${folderpath}/dark_logo.png" ]] \
+        && error "${image}" "hDPI logo was provided, but the normal version is missing"
+
     # Validate image dimensions
-    if [[ "${filename}" == "icon.png" ]]; then
+    if [[ "${filename}" == "icon.png" ]] || [[ "${filename}" == "dark_icon.png" ]]; then
       # icon dimension
       [[ "${width}" -ne 256 || "${height}" -ne 256 ]] \
         && error "${image}" "Invalid icon size! Size is ${width}x${height}px, must be 256x256px"
 
-    elif [[ "${filename}" == "icon@2x.png" ]]; then
+    elif [[ "${filename}" == "icon@2x.png" ]] || [[ "${filename}" == "dark_icon@2x.png" ]]; then
       # hDPI icon dimension
       [[ "${width}" -ne 512 || "${height}" -ne 512 ]] \
         && error "${image}" "Invalid hDPI icon size! Size is ${width}x${height}px, must be 512x512px"
 
-    elif [[ "${filename}" == "logo.png" ]]; then
+    elif [[ "${filename}" == "logo.png" ]] || [[ "${filename}" == "dark_logo.png" ]]; then
       # Minimal shortest side
       if [[ "${width}" -le "${height}" && "${width}" -lt 128 ]]; then
         error "${image}" "Invalid logo size! Size is ${width}x${height}px, shortest side must be at least 128px"
@@ -82,7 +90,7 @@ while read image; do
         error "${image}" "Invalid logo size! Size is ${width}x${height}px, shortest side must not exceed 256px"
       fi
 
-    elif [[ "${filename}" == "logo@2x.png" ]]; then
+    elif [[ "${filename}" == "logo@2x.png" ]] || [[ "${filename}" == "dark_logo@2x.png" ]]; then
       # Minimal shortest side
       if [[ "${width}" -le "${height}" && "${width}" -lt 256 ]]; then
         error "${image}" "Invalid hDPI logo size! Size is ${width}x${height}px, shortest side must be at least 256px"

README.md

@@ -56,6 +56,7 @@ For example: <`https://brands.home-assistant.io/[domain]/icon.png`>
 - If a domain is missing the `logo.png` file, the `icon.png` is served instead (if available).
 - If a domain is missing the `icon@2x.png` file, the `icon.png` is served instead (if available).
 - If a domain is missing the `logo@2x.png` file, the `logo.png` is served instead (if available).
+- If a image optimised for dark themes (image is prefixed with 'dark_') is missing, it's non-prefixed match will be served instead (if available).
 
 ### With placeholder fallback
 
@@ -84,6 +85,7 @@ All images must have the following requirements:
 - Interlaced is preferred (also known as progressive).
 - Images with transparency is preferred.
 - If multiple images are available, the ones optimized for a white background are preferred.
+  - Images optimized for a dark background can be prefixed with `dark_`
 - The image should be trimmed, so it contains the minimum amount of empty space on the edges.
   This includes things like white/black/any color borders or transparent spacing around the actual
   subject in the image.

netlify.toml

@@ -51,3 +51,31 @@
   force = false
   status = 302
   headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
+
+[[redirects]]
+  from = "/_/*/dark_icon.png"
+  to = "/_/_placeholder/icon.png"
+  force = false
+  status = 302
+  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
+
+[[redirects]]
+  from = "/_/*/dark_logo.png"
+  to = "/_/_placeholder/logo.png"
+  force = false
+  status = 302
+  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
+
+[[redirects]]
+  from = "/_/*/dark_icon@2x.png"
+  to = "/_/_placeholder/icon@2x.png"
+  force = false
+  status = 302
+  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
+
+[[redirects]]
+  from = "/_/*/dark_logo@2x.png"
+  to = "/_/_placeholder/logo@2x.png"
+  force = false
+  status = 302
+  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}

scripts/build.sh

@@ -38,6 +38,16 @@ find ./build -type f -name "logo.png" | while read logo; do
   fi
 done
 
+# Create fallback for dark variants
+find ./build -type f -type f -name "icon.png" -o -name "icon@2x.png" -o -name "logo.png" -o -name "logo@2x.png" | while read image; do
+  dir=$(dirname "${image}")
+  filename=$(basename -s .png "${image}")
+  if [[ ! -f "${dir}/dark_${filename}.png" ]]; then
+    cp "${image}" "${dir}/dark_${filename}.png"
+    echo "Using ${image} as dark_${filename}"
+  fi
+done
+
 # Create domains.json
 core_integrations=$(find ./core_integrations -maxdepth 1 -exec basename {} \; | sort | jq -sR 'split("\n")[1:]' | jq -r 'map(select(length > 0))')
 custom_integrations=$(find ./custom_integrations -maxdepth 1 -exec basename {} \; | sort | jq -sR 'split("\n")[1:]' | jq -r 'map(select(length > 0))')