Fix a bug with the rays of the sun icon not being affected by `--them…

…e-switch-icon-color`
mahozad · Mar 6, 2022 · c90d787 · c90d787
1 parent 4fa5c3f
commit c90d787
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 16 deletions.
diff --git a/...css-rule-with-low-specificity-like-html-the-colors-should-be-applied-1-snap.png b/...css-rule-with-low-specificity-like-html-the-colors-should-be-applied-1-snap.png
diff --git a/...pecifies-a-custom-color-for-switch-icon-the-colors-should-be-applied-1-snap.png b/...pecifies-a-custom-color-for-switch-icon-the-colors-should-be-applied-1-snap.png
diff --git a/test2.html b/test2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Theme switch test 2</title>
+  <script src="theme-switch.js"></script>
+  <style>
+      html {
+          --theme-switch-icon-color: #c37ae7;
+      }
+      theme-switch {
+          width: 512px;
+      }
+  </style>
+</head>
+<body>
+
+<theme-switch></theme-switch>
+
+</body>
+</html>
diff --git a/theme-switch.js b/theme-switch.js
@@ -200,12 +200,9 @@ function generateStyle() {
         cursor: pointer;
     }
 
-    /* Only change the color of the core and not rays */
-    /* as it seems to make a visually better animation */
-    #circle {
-        fill: var(--theme-switch-icon-color);
-        stroke: var(--theme-switch-icon-color);
-    }
+    #circle { fill: var(--theme-switch-icon-color, #000); }
+
+    #rays { stroke: var(--theme-switch-icon-color, #000); }
     `;
 }
 

diff --git a/theme-switch.min.js b/theme-switch.min.js
diff --git a/theme-switch.min.js.map b/theme-switch.min.js.map
diff --git a/theme-switch.test.js b/theme-switch.test.js
@@ -196,10 +196,34 @@ describe("Screenshot tests", () => {
         expect(snapshotTakenNow).toMatchReferenceSnapshot();
     }, 100_000);
 
+    test(`When user specifies a custom color for switch icon, the colors should be applied`, async () => {
+        await takeScreenshot(
+            () => {localStorage.setItem("theme", "light");},
+            element => {
+                // See https://stackoverflow.com/a/64487791/8583692
+                element.evaluate((el) => {
+                    el.style.setProperty("--theme-switch-icon-color", "#ffe36e");
+                });
+            }
+        );
+        const snapshotTakenNow = fileSystem.readFileSync(snapshotFileName);
+        expect(snapshotTakenNow).toMatchReferenceSnapshot();
+    }, 100_000);
+
+    test(`When user specifies a custom color for switch icon in a CSS rule with low specificity (like html{}), the colors should be applied`, async () => {
+        await takeScreenshot(
+            () => {localStorage.setItem("theme", "light");},
+            (element) => {},
+            "test2.html"
+        );
+        const snapshotTakenNow = fileSystem.readFileSync(snapshotFileName);
+        expect(snapshotTakenNow).toMatchReferenceSnapshot();
+    }, 100_000);
+
     afterAll(() => {fileSystem.rmSync(snapshotFileName);});
 });
 
-async function takeScreenshot(init, action = () => {}) {
+async function takeScreenshot(init, action = () => {}, pageHTML = "test.html") {
     const browser = await puppeteer.launch({
             headless: true, // If false, opens the browser UI
             // channel: "chrome", // this overrides executablePath
@@ -213,11 +237,11 @@ async function takeScreenshot(init, action = () => {}) {
     // See https://stackoverflow.com/a/66530593/8583692
     await page.evaluateOnNewDocument(init);
     // page.setContent("<DOCTYPE html><html>...")
-    await page.goto(`file://${__dirname}\\test.html`);
+    await page.goto(`file://${__dirname}\\${pageHTML}`);
 
     const element = await page.$("theme-switch");
     await action(element);
-    // Wait for the element animation to finish
+    // Wait for the action or element animation to finish
     await page.waitForTimeout(1000);
 
     await element.screenshot({path: snapshotFileName});