rajch_ales/product-import-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply theme toggle to sidebar drawer

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 15:43:40 +02:00
parent 902f1927a2
commit 1914c7d141
3 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+22
View File
@@ -184,6 +184,28 @@
.sidebar-overlay { display: none; }
}
html:not(.dark) .control-panel { @apply bg-slate-100 text-slate-700; }
html:not(.dark) .sidebar-drawer-header,
html:not(.dark) .sidebar-footer { @apply border-slate-300; }
html:not(.dark) .sidebar-drawer-title { @apply text-slate-500; }
html:not(.dark) .sidebar-close-button,
html:not(.dark) .sidebar-open-button,
html:not(.dark) .drawer-trigger,
html:not(.dark) .arrow-button,
html:not(.dark) .action-button,
html:not(.dark) .input-like { @apply border-slate-300 bg-white text-slate-700; }
html:not(.dark) .sidebar-close-button:hover,
html:not(.dark) .sidebar-open-button:hover,
html:not(.dark) .drawer-trigger:hover,
html:not(.dark) .arrow-button:hover:not(:disabled),
html:not(.dark) .action-button:hover:not(:disabled) { @apply border-slate-400 bg-slate-200 text-slate-900; }
html:not(.dark) .arrow-button::before { @apply text-slate-700; }
html:not(.dark) #scanInput { @apply bg-slate-200 placeholder:text-slate-500; }
html:not(.dark) .picture-slot,
html:not(.dark) .mapping-box { @apply border-slate-300 bg-white text-slate-600; }
html:not(.dark) .mapping-toggle::before { @apply text-slate-700; }
html:not(.dark) .app-status { @apply border-slate-300 bg-white text-slate-700; }
html.dark body { @apply bg-slate-950 text-slate-100; }
html.dark .control-panel { @apply bg-slate-950; }
html.dark .secondary-panel { @apply border-slate-700 bg-slate-800; }
tests/ui/catalog-maker.smoke.spec.ts
+3
View File
@@ -50,10 +50,13 @@ test("left controls open in a responsive sidebar drawer", async ({ page }) => {
test("theme toggle switches and persists dark mode", async ({ page }) => {
await page.goto("/");
await expect(page.locator("html")).not.toHaveClass(/dark/);
const lightPanelBackground = await page.locator("#sidebarDrawer").evaluate((element) => getComputedStyle(element).backgroundColor);
await page.locator("#themeToggle").click();
await expect(page.locator("html")).toHaveClass(/dark/);
await expect(page.locator("#themeToggle")).toHaveText("Light theme");
const darkPanelBackground = await page.locator("#sidebarDrawer").evaluate((element) => getComputedStyle(element).backgroundColor);
expect(darkPanelBackground).not.toBe(lightPanelBackground);
await page.reload();
await expect(page.locator("html")).toHaveClass(/dark/);