[websites/kdeconnect-kde-org] /: Modify download.html to display the icons for dark mode too.

Git commit 0127ed24e17fb39e1dbc118dd0190637ccac9659 by Ethan Lee Qi Yang.
Committed on 14/07/2026 at 12:35.
Pushed by albertvaka into branch 'master'.

Modify download.html to display the icons for dark mode too.

The download.html file was displaying poor contrast black on black icons in dark mode, so I added CSS media queries to show icons depending on the theme. Also added a dark mode macOS icon.

BUG: 488021

A  +5    -0    assets/SVG/macos-dark.svg
M  +50   -3    download.html

https://invent.kde.org/websites/kdeconnect-kde-org/-/commit/0127ed24e17fb39e1dbc118dd0190637ccac9659

diff --git a/assets/SVG/macos-dark.svg b/assets/SVG/macos-dark.svg
new file mode 100644
index 0000000..c7ce122
--- /dev/null
+++ b/assets/SVG/macos-dark.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg enable-background="new 0 0 35 54" viewBox="0 0 34 34" width="34" height="34" version="1.1" id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <defs id="defs8"/>
[suppressed due to size limit]
+</svg>
\ No newline at end of file
diff --git a/download.html b/download.html
index 0772e51..78f96f4 100644
--- a/download.html
+++ b/download.html
@@ -9,6 +9,8 @@ sources:
       a GNOME extension that implements the KDE Connect protocol. [Additional information](https://userbase.kde.org/KDEConnect#Installation).
     image:
       png: /assets/img/tux.png
+    image-dark:
+      png: /assets/img/tux.png
   - name: Android
     description: >
       KDE Connect for Android is available on [Google Play](https://play.google.com/store/apps/details?id=org.kde.kdeconnect_tp),
@@ -16,6 +18,9 @@ sources:
     image:
       webp: assets/img/android.webp
       png: assets/img/android.png
+    image-dark:
+      webp: assets/img/android.webp
+      png: assets/img/android.png
   - name: Windows
     description: >
       KDE Connect for Windows is available on the [Microsoft Store](https://apps.microsoft.com/detail/9n93mrmsxbf0), on [Chocolatey](https://community.chocolatey.org/packages/kdeconnect-kde) or as an
@@ -23,11 +28,16 @@ sources:
     image:
       webp: assets/img/windows.webp
       png: assets/img/windows.png
+    image-dark:
+      webp: assets/img/windows.webp
+      png: assets/img/windows.png
   - name: Plasma Mobile
     description: >
       A mobile friendly interface for mobile Linux platforms such as Plasma Mobile is also available.
     image:
       png: assets/SVG/plasma.svg
+    image-dark:
+      png: assets/SVG/plasma.svg
   - name: SailfishOS
     description: >
       KDE Connect for SailfishOS is available on [OpenRepos](https://openrepos.net/content/r1tschy/sailfish-connect).
@@ -42,6 +52,8 @@ sources:
       A stable release of KDE Connect for macOS is [available to download](https://download.kde.org/stable/release-service/26.04.2/macos/kdeconnect-kde-macos-clang-arm64.dmg). There are also nightly versions (untested) available for [ARM](https://cdn.kde.org/ci-builds/network/kdeconnect-kde/master/macos-arm64) and [Intel](https://cdn.kde.org/ci-builds/network/kdeconnect-kde/master/macos-x86_64).
     image:
       png: assets/SVG/macos.svg
+    image-dark:
+      png: assets/SVG/macos-dark.svg
   - name: iOS
     description: >
       KDE Connect for iOS is available as a native port on the [App Store](https://apps.apple.com/app/kde-connect/id1580245991).<br/>
@@ -57,6 +69,8 @@ sources:
       For detailed instructions on how to build KDE Connect from source, check the [Get Involved](/get-involved.html) page.
     image:
       png: /assets/img/git.svg
+    image-dark:
+      png: /assets/img/git.svg
 
 trademarks:
   - "The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."
@@ -74,22 +88,41 @@ apple-itunes-app:
    {% if source.image %}
      {% if source.image.webp %}
        <picture class="w-100">
-         <source srcset="{{ source.imgage.webp }}" type="image/webp" />
+         <source srcset="{{ source.image.webp }}" type="image/webp" />
          <source srcset="{{ source.image.png }}" type="image/png" />
          <img
            alt="{{ source.name }} icon"
-           class="img-fluid"
+           class="img-fluid light-img"
            src="{{ source.image.png }}"
          />
        </picture>
      {% else %}
        <img
          alt="{{ source.name }} icon"
-         class="img-fluid w-100"
+         class="img-fluid w-100 light-img"
          src="{{ source.image.png }}"
        />
      {% endif %}
    {% endif %}
+   {% if source.image-dark %}
+     {% if source.image-dark.webp %}
+       <picture class="w-100">
+         <source srcset="{{ source.image-dark.webp }}" type="image/webp" />
+         <source srcset="{{ source.image-dark.png }}" type="image/png" />
+         <img
+           alt="{{ source.name }} icon"
+           class="img-fluid dark-img"
+           src="{{ source.image-dark.png }}"
+         />
+       </picture>
+     {% else %}
+       <img
+         alt="{{ source.name }} icon"
+         class="img-fluid w-100 dark-img"
+         src="{{ source.image-dark.png }}"
+       />
+     {% endif %}
+   {% endif %}
   </div>
   <div>
     <h2>{{ source.name }}</h2>
@@ -149,3 +182,17 @@ apple-itunes-app:
 {% for trademark in page.trademarks %}
   <p><small>{{ trademark }}</small></p>
 {% endfor %}
+
+<style>
+  @media (prefers-color-scheme: light) {
+    .dark-img {
+      display: none;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .light-img {
+      display: none;
+    }
+  }
+</style>
\ No newline at end of file