Skip to content

FE: Add dark mode view to storybook #43469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RachelElysia merged 2 commits into from
Apr 14, 2026
Merged

FE: Add dark mode view to storybook #43469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14f1fcd
FE: Add dark mode view to storybook
Apr 13, 2026
16cca83
Use variables for stoybook color values
Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
import React, { useEffect } from "react";
import "../frontend/index.scss";

export const globalTypes = {
theme: {
description: "Toggle dark/light mode",
defaultValue: "light",
toolbar: {
items: [
{ value: "light", icon: "sun", title: "Light mode" },
{ value: "dark", icon: "moon", title: "Dark mode" },
],
dynamicTitle: true,
},
},
};

const applyTheme = (isDark) => {
document.body.classList.toggle("dark-mode", isDark);
document.body.style.backgroundColor = isDark ? "var(--core-fleet-white)" : "";
document.body.style.color = isDark ? "var(--core-fleet-black)" : "";

document.querySelectorAll(".docs-story").forEach((el) => {
el.style.backgroundColor = isDark ? "var(--core-fleet-white)" : "";
});
};

const withTheme = (Story, context) => {
const isDark = context.globals.theme === "dark";

useEffect(() => {
applyTheme(isDark);
}, [isDark]);
Comment on lines +28 to +33
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

withTheme calls useEffect, but the function name is lowercase. With plugin:react-hooks/recommended enabled, this violates react-hooks/rules-of-hooks (hooks must be called from a React component or custom hook). Rename the decorator to an uppercase component name (e.g., WithTheme) or move the effect into a properly named custom hook, so lint/build doesn’t fail.

Copilot uses AI. Check for mistakes.

return <Story />;
};

export const decorators = [withTheme];

export const parameters = {
controls: {
matchers: {
Expand All @@ -6,4 +45,5 @@ export const parameters = {
},
},
};

export const tags = ["autodocs"];
9 changes: 0 additions & 9 deletions frontend/components/LiveQuery/TargetChipSelector/TargetChipSelector.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,6 @@ const meta: Meta<typeof TargetChipSelector> = {
action: "clicked", // Use Storybook's action to track clicks
},
},
parameters: {
backgrounds: {
default: "light",
values: [
{ name: "light", value: "#ffffff" },
{ name: "dark", value: "#333333" },
],
},
},
};

export default meta;
Expand Down
15 changes: 0 additions & 15 deletions frontend/components/TabNav/TabNav.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,6 @@ import TabNav from "./TabNav";
const meta: Meta<typeof TabNav> = {
component: TabNav,
title: "Components/TabNav",
parameters: {
backgrounds: {
default: "light",
values: [
{
name: "light",
value: "#ffffff",
},
{
name: "dark",
value: "#333333",
},
],
},
},
};

export default meta;
Expand Down
8 changes: 8 additions & 0 deletions frontend/components/TeamsDropdown/TeamsDropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { noop } from "lodash";

Expand All @@ -6,6 +7,13 @@ import TeamsDropdown from ".";
const meta: Meta<typeof TeamsDropdown> = {
title: "Components/TeamsDropdown",
component: TeamsDropdown,
decorators: [
(Story) => (
<div style={{ minHeight: 300 }}>
<Story />
</div>
),
],
args: {
currentUserTeams: [
{ id: 1, name: "Team 1" },
Expand Down
12 changes: 0 additions & 12 deletions frontend/components/buttons/DropdownButton/DropdownButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const meta: Meta<typeof DropdownButton> = {
variant: {
options: [
"default",
"success",
"alert",
"pill",
"link",
Comment thread
RachelElysia marked this conversation as resolved.
Expand All @@ -49,17 +48,6 @@ const meta: Meta<typeof DropdownButton> = {
control: "select",
},
},
parameters: {
backgrounds: {
default: "header",
values: [
{
name: "header",
value: "linear-gradient(270deg, #202226 0%, #353840 100%)",
},
],
},
},
args: {
variant: "unstyled",
className: "story",
Expand Down
6 changes: 6 additions & 0 deletions frontend/components/buttons/DropdownButton/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,9 @@
margin-top: 1px;
}
}

// Override the chevron icon stroke to inherit the button's text color
// so it adapts correctly in dark mode
.dropdown-button .icon svg path {
stroke: currentColor;
Comment on lines +75 to +76
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Target the actual chevron markup here.

frontend/components/buttons/DropdownButton/DropdownButton.jsx:101-109 renders <Icon /> directly inside <Button>, so Line 75’s .icon selector never matches the caret. That means the new dark-mode override won’t affect the icon, and Line 76 also still fails Stylelint because the keyword casing is wrong.

Suggested fix 
-.dropdown-button .icon svg path {
-  stroke: currentColor;
+.dropdown-button svg path {
+  stroke: currentcolor;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.dropdown-button .icon svg path {
stroke: currentColor;
.dropdown-button svg path {
stroke: currentcolor;
🧰 Tools
🪛 Stylelint (17.6.0)

[error] 76-76: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/components/buttons/DropdownButton/_styles.scss` around lines 75 -
76, The selector .dropdown-button .icon doesn't match the caret because
DropdownButton.jsx renders <Icon /> directly inside <Button> (see the JSX around
the caret rendering), so change the selector to target the actual SVG markup
(e.g. target the svg/path produced by <Icon /> such as .dropdown-button svg path
or .dropdown-button > svg path) and fix the keyword casing to lowercase (use
currentcolor) so Stylelint passes and the dark-mode stroke override applies to
the chevron.

}
Loading