diff --git a/src/main.js b/src/main.js index 2cb9cbe..c05c345 100644 --- a/src/main.js +++ b/src/main.js @@ -266,6 +266,12 @@ function generateStyle() { return `STYLES_TEMPLATE`; } +window.CSS.registerProperty({ + name: '--theme-switch-icon-color', + syntax: '', + inherits: false, + initialValue: '#000', +}); updateTheme(); window.customElements.define(ELEMENT_NAME, ThemeSwitchElement); window diff --git a/test/main.test.js b/test/main.test.js index 18acafb..f82e525 100644 --- a/test/main.test.js +++ b/test/main.test.js @@ -335,6 +335,16 @@ describe("Screenshot tests", () => { expect(screenshot).toMatchReferenceSnapshot(); }, 100_000); + test(`The icon color should be animatable`, async () => { + const screenshot = await takeScreenshot(() => { + localStorage.setItem("theme", "auto"); + }, async (page, element) => { + await element.hover(); + await page.waitForTimeout(1_000); + }, "template-8.html"); + expect(screenshot).toMatchReferenceSnapshot(); + }, 100_000); + // See https://stackoverflow.com/q/47107465/8583692 // and https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js test(`When the switch is toggled, it should trigger a "themeToggle" event`, async () => { diff --git a/test/template-8.html b/test/template-8.html new file mode 100644 index 0000000..47f4777 --- /dev/null +++ b/test/template-8.html @@ -0,0 +1,28 @@ + + + + + Theme switch test 8 + + + + + + + + +