update theme switcher

Filip Łukasik · pikinier20 · commit adcd37555b82 · 2022-04-12T12:04:35.000+02:00
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/default.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/disabled.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/focus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#A09FA6"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#CCCCCC"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/dark/selected.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#EDEDEF"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/active.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/default.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/default.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/disabled.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/disabled.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/focus.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/focus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#6F6E77"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/hover.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/selected.svg b/scaladoc/resources/dotty_res/images/icon-buttons/moon/light/selected.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.47085 1.4707C5.16678 2.25514 5 3.10802 5 3.99985C5 7.86584 8.13401 10.9999 12 10.9999C12.8918 10.9999 13.7447 10.8331 14.5291 10.529C13.5151 13.145 10.9742 14.9999 8 14.9999C4.13401 14.9999 1 11.8658 1 7.99985C1 5.02569 2.85484 2.48475 5.47085 1.4707Z" fill="#1A1523"/>
+</svg>
diff --git a/scaladoc/resources/dotty_res/scripts/theme.js b/scaladoc/resources/dotty_res/scripts/theme.js
@@ -1,4 +1,4 @@
-;(function () {
+; (function () {
   const supportsLocalStorage = (() => {
     try {
       localStorage.setItem('test', 'test');
@@ -32,16 +32,14 @@
 
   /* Wait for the DOM to be loaded before we try to attach event listeners to things in the DOM */
   window.addEventListener("DOMContentLoaded", () => {
-    const themeToggler = document.querySelector('#theme-toggle input');
-    themeToggler.checked = !currentlyDark;
-    themeToggler.addEventListener("change", e => {
-      toggleDarkTheme(!e.target.checked);
+    const themeToggler = document.querySelector('#theme-toggle');
+    themeToggler.addEventListener("click", e => {
+      toggleDarkTheme(!currentlyDark);
     });
 
     /* Auto-swap the dark/light theme if the user changes it in their system */
     colorSchemePrefMql.addEventListener('change', e => {
       const preferDark = e.matches;
-      themeToggler.checked = !preferDark;
       toggleDarkTheme(preferDark);
     });
   });
diff --git a/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css b/scaladoc/resources/dotty_res/styles/theme/components/button/icon-button.css
@@ -1,10 +1,103 @@
 .icon-button {
+  background: unset;
+  border: none;
+  cursor: pointer;
 }
 
-.icon-button.sun::after {
+/* sun button */
+#theme-toggle.icon-button::after {
+  content: url("../../../../images/icon-buttons/moon/light/default.svg");
+}
+
+#theme-toggle.icon-button:hover::after {
+  content: url("../../../../images/icon-buttons/moon/light/hover.svg");
+}
+
+#theme-toggle.icon-button:active::after {
+  content: url("../../../../images/icon-buttons/moon/light/active.svg");
+}
+
+#theme-toggle.icon-button:disabled::after {
+  content: url("../../../../images/icon-buttons/moon/light/disabled.svg");
+}
+
+#theme-toggle.icon-button:focus::after {
+  content: url("../../../../images/icon-buttons/moon/light/focus.svg");
+}
+
+#theme-toggle.icon-button.selected::after {
+  content: url("../../../../images/icon-buttons/moon/light/selected.svg");
+}
+
+.theme-dark #theme-toggle.icon-button::after {
   content: url("../../../../images/icon-buttons/sun/dark/default.svg");
 }
 
+.theme-dark #theme-toggle.icon-button:hover::after {
+  content: url("../../../../images/icon-buttons/sun/dark/hover.svg");
+}
+
+.theme-dark #theme-toggle.icon-button:active::after {
+  content: url("../../../../images/icon-buttons/sun/dark/active.svg");
+}
+
+.theme-dark #theme-toggle.icon-button:disabled::after {
+  content: url("../../../../images/icon-buttons/sun/dark/disabled.svg");
+}
+
+.theme-dark #theme-toggle.icon-button:focus::after {
+  content: url("../../../../images/icon-buttons/sun/dark/focus.svg");
+}
+
+.theme-dark #theme-toggle.icon-button.selected::after {
+  content: url("../../../../images/icon-buttons/sun/dark/selected.svg");
+}
+
+/* hamburger button */
 .icon-button.hamburger::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/default.svg");
+}
+
+.icon-button.hamburger:hover::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/hover.svg");
+}
+
+.icon-button.hamburger:active::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/active.svg");
+}
+
+.icon-button.hamburger:disabled::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/disabled.svg");
+}
+
+.icon-button.hamburger:focus::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/focus.svg");
+}
+
+.icon-button.hamburger.selected::after {
+  content: url("../../../../images/icon-buttons/hamburger/light/selected.svg");
+}
+
+.theme-dark .icon-button.hamburger::after {
   content: url("../../../../images/icon-buttons/hamburger/dark/default.svg");
 }
+
+.theme-dark .icon-button.hamburger:hover::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/hover.svg");
+}
+
+.theme-dark .icon-button.hamburger:active::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/active.svg");
+}
+
+.theme-dark .icon-button.hamburger:disabled::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/disabled.svg");
+}
+
+.theme-dark .icon-button.hamburger:focus::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/focus.svg");
+}
+
+.theme-dark .icon-button.hamburger.selected::after {
+  content: url("../../../../images/icon-buttons/hamburger/dark/selected.svg");
+}
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -279,6 +279,18 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       dottyRes("images/icon-buttons/hamburger/light/hover.svg"),
       dottyRes("images/icon-buttons/hamburger/light/selected.svg"),
       dottyRes("images/icon-buttons/hamburger/light/default.svg"),
+      dottyRes("images/icon-buttons/moon/dark/active.svg"),
+      dottyRes("images/icon-buttons/moon/dark/disabled.svg"),
+      dottyRes("images/icon-buttons/moon/dark/focus.svg"),
+      dottyRes("images/icon-buttons/moon/dark/hover.svg"),
+      dottyRes("images/icon-buttons/moon/dark/selected.svg"),
+      dottyRes("images/icon-buttons/moon/dark/default.svg"),
+      dottyRes("images/icon-buttons/moon/light/active.svg"),
+      dottyRes("images/icon-buttons/moon/light/disabled.svg"),
+      dottyRes("images/icon-buttons/moon/light/focus.svg"),
+      dottyRes("images/icon-buttons/moon/light/hover.svg"),
+      dottyRes("images/icon-buttons/moon/light/selected.svg"),
+      dottyRes("images/icon-buttons/moon/light/default.svg"),
       searchData(pages),
       scastieConfiguration()
     )
