Work on img docs.

Orange-OpenSource · Oct 20, 2023 · 81f0652 · 81f0652
1 parent 20a75a4
commit 81f0652
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/sites/hurl.dev/_sass/_utilities.scss b/sites/hurl.dev/_sass/_utilities.scss
@@ -121,4 +121,41 @@
 
 .u-max-width-100 {
   max-width: 100%;
-}
+}
+
+@mixin dark {
+  .u-theme-light {
+    display: none;
+  }
+  .u-theme-dark {
+    display: inline-block;
+  }
+}
+
+@mixin light {
+  .u-theme-light {
+    display: inline-block;
+  }
+  .u-theme-dark {
+    display: none;
+  }
+}
+
+
+html, html[data-theme="light"] {
+  @include light;
+}
+
+html[data-theme="dark"] {
+  @include dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  html, html[data-theme="dark"] {
+    @include dark;
+  }
+
+  html[data-theme="light"] {
+    @include light;
+  }
+}
diff --git a/sites/hurl.dev/index.md b/sites/hurl.dev/index.md
@@ -6,8 +6,8 @@ section: Home
 ---
 
 <div class="home-logo">
-    <img class="light-img" src="{{ '/assets/img/logo-light.svg' | prepend:site.baseurl }}" width="277px" height="72px" alt="Hurl logo"/>
-    <img class="dark-img" src="{{ '/assets/img/logo-dark.svg' | prepend:site.baseurl }}" width="277px" height="72px" alt="Hurl logo"/>
+    <img class="u-theme-light" src="{{ '/assets/img/logo-light.svg' | prepend:site.baseurl }}" width="277px" height="72px" alt="Hurl logo"/>
+    <img class="u-theme-dark" src="{{ '/assets/img/logo-dark.svg' | prepend:site.baseurl }}" width="277px" height="72px" alt="Hurl logo"/>
 </div>