Skip to content

feat(ui/dashboard): implement dark mode support across app - #2607

Draft
steveninhle wants to merge 22 commits into
mainfrom
feat-implement-dark-mode
Draft

feat(ui/dashboard): implement dark mode support across app#2607
steveninhle wants to merge 22 commits into
mainfrom
feat-implement-dark-mode

Conversation

@steveninhle

@steveninhle steveninhle commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

feat: implement dark mode for admin dashboard

Summary

This PR introduces the foundational dark mode implementation for the Bucketeer admin dashboard. The work is split across multiple PRs; this one establishes the theme infrastructure and covers the Feature Flag Details page along with all shared components it depends on.

Theme system

A new ThemeProvider context (hooks/use-theme.tsx) manages theme state globally. On first visit it reads the OS prefers-color-scheme setting so users get a sensible default without any configuration. The chosen theme is persisted to localStorage and survives page refreshes. Toggling applies or removes the dark class on <html> — Tailwind's class strategy picks this up with no full re-render. A sun/moon icon button is wired into the user menu popover so any user can switch themes at any time.

Design tokens

tailwind.config.ts is extended with darkMode: 'class' and a purpose-built dark palette:

  • dark-black (950 → 700) — page backgrounds and surface layers
  • dark-purple (100 → 600) — active states, borders, accents
  • dark-gray (100 → 400) — muted text and secondary labels

Custom box-shadow utilities (dark-card, dark-glow, border-dark-purple-300, button-primary-glow) are also added to give dark surfaces appropriate depth without relying on borders alone.

Theme infrastructure

  • hooks/use-theme.tsx — new ThemeProvider + useTheme hook
  • tailwind.config.ts — darkMode: 'class', dark color tokens, dark shadows
  • main.tsx — wrapped app in ThemeProvider
  • index.css — base bg, scrollbar, sidebar active, tab active dark overrides

Pages covered

  • Feature Flag Details
    • Targeting — rules, strategy dropdowns, audience/prerequisite conditions, flag switch, add-rule button
    • Evaluation — chart (runtime color swap via useTheme()), results table, filter bar
    • Operations — event-rate/rollout/schedule modals, progress indicators, status badges, recurring schedule list
    • Variations — variation list, default variation selector, submit bar
    • Trigger — trigger item list, create-trigger form, trigger status

Core feature management

  • Feature Flags — grid view, add/filter/archive/clone/confirm modals
  • Create Flag — general info form, variations
  • Dashboard — overview cards, activity summary

Experimentation

  • Experiments — list, create/update modal, filter, goals connection, overview
  • Experiment Details — header, settings, define-audience form, experiment state, results table, confidence variants, rollout variant modal
  • Goals — list, add modal, connections modal
  • Goal Details — update form, connections panel, delete modal

Observability & audit

  • Audit Logs — log list items, detail modal, entity-type dropdown
  • Insights — charts require useTheme() runtime color swap for recharts palette

User & access management

  • Members — list, add/edit/delete/filter/details modals
  • User Segments — list, create/filter/delete/upload modals

Configuration

  • API Keys — list, create/update modal, secret modal, filter
  • Pushes — list, create/update modal, filter
  • Notifications — list, create/update modal, filter
  • Settings — page content

Project & organization management

  • Projects — list, create/update modal, filter
  • Project Details — settings, environments list, environment modal
  • Organizations — list, create/update modal, filter
  • Organization Details — settings, members list

Developer tools & auth

  • Debugger — user ID input, attribute fields, result list, reason tooltip
  • Sign-in — auth wrapper, email step, org picker, information step
  • Access Denied / Not Found — error pages
  • Demo

@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch from 3c8d031 to d153818 Compare June 4, 2026 03:39
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch 2 times, most recently from b237221 to 4d59c40 Compare June 15, 2026 02:43
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch from 4d59c40 to bf9618e Compare June 26, 2026 01:40
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch 3 times, most recently from 16530b4 to c167d39 Compare July 20, 2026 03:01
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch from c167d39 to 8dd28aa Compare July 27, 2026 08:21
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch 2 times, most recently from d4645c4 to ede3f52 Compare August 12, 2026 01:55
@steveninhle
feat: implement tailwind config and theme hook for dark mode
ea68dca
@steveninhle
implement dark mode for app root and navigation components
4435b32
@steveninhle
feat: implement dark mode for targeting
657d4e2
@steveninhle
feat: implement dark mode for targeting evaluation
5f97a0f
@steveninhle
feat: implement dark mode for targeting variations
7f55409
@steveninhle
feat: implement dark mode targeting operation
84671d1
@steveninhle
feat: implement dark mode for targeting trigger section
80a6d4a
@steveninhle
feat: implement dark mode for targeting setting
0283b0c
@steveninhle
feat: implement dark mode for user segment page
63d43c7
@steveninhle
feat: implement dark mode for insight page
bc21245
@steveninhle
feat: implement dark mode for debugger page
b461faf
@steveninhle
feat: implement dark mode for goal detail page
9af33e5
@steveninhle
feat: implement dark mode for experiment page
696ea8f
@steveninhle
feat: implement dark mode for organization page
72084c5
@steveninhle
feat: implement dark mode for organization detail page
2653af2
@steveninhle
feat implement dark mode for setting organization page
90dd86b
@steveninhle
feat: implement dark mode for project pages
c3aa628
@steveninhle
feat: implement dark mode for environtment page
d9e450c
@steveninhle
feat: implement dark mode for memeber page
e7515ea
@steveninhle
feat: implement dark mode for API KEY page
3df960e
@t-kikuc
t-kikuc requested a balanced review from Copilot August 28, 2026 07:24
Copilot AI reviewed Aug 28, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Introduces persisted, OS-aware dark mode across the dashboard and updates shared components and major application pages to use dark-theme styling.

Changes:

  • Adds ThemeProvider, persistence, and a user-menu theme toggle.
  • Adds dark styling to shared controls, navigation, modals, tables, and page content.
  • Adapts dashboard charts and authentication views for dark mode.

Reviewed changes

Copilot reviewed 259 out of 259 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
ui/dashboard/src/pages/user-segments/user-segment-modal/segment-warning.tsx Styles warnings for dark mode.
ui/dashboard/src/pages/user-segments/user-segment-modal/segment-uploading-modal/index.tsx Styles upload modal text.
ui/dashboard/src/pages/user-segments/user-segment-modal/flags-connected-modal/index.tsx Styles connected-flags modal.
ui/dashboard/src/pages/user-segments/user-segment-modal/filter-segment-modal/index.tsx Styles segment filters.
ui/dashboard/src/pages/user-segments/user-segment-modal/delete-segment-modal/index.tsx Styles delete confirmation.
ui/dashboard/src/pages/user-segments/collection-layout/data-collection.tsx Styles segment table cells.
ui/dashboard/src/pages/signin/organization.tsx Styles organization selection.
ui/dashboard/src/pages/signin/information.tsx Styles information form.
ui/dashboard/src/pages/signin/index.tsx Styles sign-in heading and errors.
ui/dashboard/src/pages/signin/email.tsx Styles email sign-in content.
ui/dashboard/src/pages/signin/elements/auth-wrapper.tsx Adds dark branding and surface.
ui/dashboard/src/pages/settings/page-content.tsx Styles settings card.
ui/dashboard/src/pages/pushes/push-modal/push-create-update-modal/index.tsx Styles push editor modal.
ui/dashboard/src/pages/pushes/push-modal/filter-push-modal/index.tsx Styles push filters.
ui/dashboard/src/pages/pushes/collection-layout/data-collection.tsx Styles push table dates.
ui/dashboard/src/pages/projects/project-modal/project-create-update-modal/index.tsx/index.tsx Styles project editor modal.
ui/dashboard/src/pages/projects/project-modal/filter-project-modal/index.tsx Styles project filters.
ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx Styles project table cells.
ui/dashboard/src/pages/project-details/settings/index.tsx Styles project settings.
ui/dashboard/src/pages/project-details/environments/environment-modal/environment-create-update-modal/index.tsx Styles environment editor.
ui/dashboard/src/pages/project-details/environments/collection-layout/data-collection.tsx Styles environment table cells.
ui/dashboard/src/pages/organizations/organization-modal/organization-create-update-modal/index.tsx Styles organization editor.
ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/index.tsx Styles organization filters.
ui/dashboard/src/pages/organizations/collection-layout/data-collection.tsx Styles organization table cells.
ui/dashboard/src/pages/organization-details/settings/index.tsx Styles organization settings.
ui/dashboard/src/pages/notifications/notification-modal/filter-notification-modal/index.tsx Styles notification filters.
ui/dashboard/src/pages/notifications/collection-layout/data-collection.tsx Styles notification table cells.
ui/dashboard/src/pages/not-found/index.tsx Styles not-found page.
ui/dashboard/src/pages/members/member-modal/filter-member-modal/index.tsx Styles member filters.
ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx Styles member editor.
ui/dashboard/src/pages/members/member-modal/delete-member-modal/index.tsx Styles member deletion.
ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx Styles member invitation.
ui/dashboard/src/pages/members/member-modal/add-member-modal/environment-roles.tsx Styles environment role heading.
ui/dashboard/src/pages/members/collection-layout/data-collection.tsx Styles member table cells.
ui/dashboard/src/pages/insights/elements/TimeSeriesLineChart/index.tsx Adds themed line-chart colors.
ui/dashboard/src/pages/insights/elements/MonthlyBarChart/index.tsx Adds themed bar-chart colors.
ui/dashboard/src/pages/insights/elements/LegendTable/index.tsx Styles chart legend table.
ui/dashboard/src/pages/insights/elements/DateCustom/index.tsx Styles date-picker actions.
ui/dashboard/src/pages/insights/elements/chart-utils.tsx Styles shared chart cards.
ui/dashboard/src/pages/goals/goals-modal/connections-modal/index.tsx Styles goal connections.
ui/dashboard/src/pages/goals/goals-modal/add-goal-modal/index.tsx Styles goal creation.
ui/dashboard/src/pages/goals/collection-layout/data-collection.tsx Styles goal table cells.
ui/dashboard/src/pages/goal-details/elements/goal-update-form.tsx Styles goal update card.
ui/dashboard/src/pages/goal-details/elements/goal-connections.tsx Styles connections panel.
ui/dashboard/src/pages/goal-details/elements/goal-actions.tsx Styles goal action cards.
ui/dashboard/src/pages/goal-details/elements/delete-goal-modal.tsx Styles goal deletion.
ui/dashboard/src/pages/feature-flags/overview/index.tsx Styles selected overview cards.
ui/dashboard/src/pages/feature-flags/flags-modal/filter-flag-modal/index.tsx Styles flag filters.
ui/dashboard/src/pages/feature-flags/flags-modal/confirm-required-modal/index.tsx Styles confirmation modal.
ui/dashboard/src/pages/feature-flags/flags-modal/clone-flag-modal/index.tsx Styles clone modal.
ui/dashboard/src/pages/feature-flags/flags-modal/archive-modal/index.tsx Styles archive modal.
ui/dashboard/src/pages/feature-flags/flags-modal/archive-modal/archive-warning.tsx Styles archive warning.
ui/dashboard/src/pages/feature-flags/flags-modal/add-flag-modal/variations.tsx Styles variation labels.
ui/dashboard/src/pages/feature-flags/flags-modal/add-flag-modal/create-flag-form.tsx Styles flag form.
ui/dashboard/src/pages/feature-flags/collection-layout/grid-view-collection.tsx Styles grid timestamps.
ui/dashboard/src/pages/feature-flag-details/variation/variations-section/variations.tsx Styles variation content.
ui/dashboard/src/pages/feature-flag-details/variation/variations-section/variation-list.tsx Styles variation selectors.
ui/dashboard/src/pages/feature-flag-details/variation/variations-section/index.tsx Styles section dividers.
ui/dashboard/src/pages/feature-flag-details/variation/submit-bar.tsx Styles variation submit bar.
ui/dashboard/src/pages/feature-flag-details/variation/index.tsx Styles rollout notice.
ui/dashboard/src/pages/feature-flag-details/trigger/trigger-section/index.tsx Styles trigger section.
ui/dashboard/src/pages/feature-flag-details/trigger/create-trigger-form/index.tsx Styles trigger form.
ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/percentage-input.tsx Styles percentage input.
ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/audience-select.tsx Styles audience selection.
ui/dashboard/src/pages/feature-flag-details/targeting/prerequisite-rule/prerequisite-banner.tsx Styles prerequisite banner.
ui/dashboard/src/pages/feature-flag-details/targeting/prerequisite-rule/index.tsx Styles prerequisite controls.
ui/dashboard/src/pages/feature-flag-details/targeting/prerequisite-rule/condition.tsx Styles prerequisite conditions.
ui/dashboard/src/pages/feature-flag-details/targeting/individual-rule/index.tsx Styles individual targeting.
ui/dashboard/src/pages/feature-flag-details/targeting/index.tsx Adds targeting divider graphic.
ui/dashboard/src/pages/feature-flag-details/targeting/flag-switch/index.tsx Styles flag switch card.
ui/dashboard/src/pages/feature-flag-details/targeting/flag-off-description/index.tsx Styles disabled description.
ui/dashboard/src/pages/feature-flag-details/targeting/default-rule/index.tsx Styles default rule.
ui/dashboard/src/pages/feature-flag-details/targeting/debugger/create-form.tsx Styles debugger action bar.
ui/dashboard/src/pages/feature-flag-details/targeting/audience-traffic/index.tsx Styles audience traffic heading.
ui/dashboard/src/pages/feature-flag-details/settings/general-info-form/modals/save-with-comment/index.tsx Styles save scheduling options.
ui/dashboard/src/pages/feature-flag-details/settings/general-info-form/index.tsx Styles general-info heading.
ui/dashboard/src/pages/feature-flag-details/settings/clone-flag/index.tsx Styles clone settings card.
ui/dashboard/src/pages/feature-flag-details/settings/archive-flag/index.tsx Styles archive settings card.
ui/dashboard/src/pages/feature-flag-details/operations/index.tsx Styles operations heading.
ui/dashboard/src/pages/feature-flag-details/operations/elements/overview/index.tsx Styles operations overview.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation/index.tsx Styles operation cards.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/schedule-progress/index.tsx Styles schedule progress.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/rollout-progress/index.tsx Styles rollout progress.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/recurring-schedule-progress/index.tsx Styles recurring progress.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/progress-date-time-point.tsx Styles progress markers.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/operation-description.tsx Styles operation descriptions.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/event-rate-progress/index.tsx Styles event-rate progress.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-pagination/index.tsx Styles operation pagination.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/schedule-operation/schedule-list.tsx Styles schedule list.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/schedule-operation/index.tsx Styles schedule modal.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/rollout/warning.tsx Styles rollout warning.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/rollout/index.tsx Styles rollout modal.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/rollout-clone/index.tsx Styles rollout clone modal.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/action-operation/operation-info-card.tsx Styles operation info card.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-actions.tsx Styles disabled operations.
ui/dashboard/src/pages/feature-flag-details/evaluation/index.tsx Adds evaluation counter typing.
ui/dashboard/src/pages/feature-flag-details/evaluation/filter-bar/index.tsx Styles evaluation filters.
ui/dashboard/src/pages/feature-flag-details/evaluation/evaluation-table/index.tsx Styles evaluation table.
ui/dashboard/src/pages/feature-flag-details/elements/scheduled-changes-panel/index.tsx Styles scheduled-change states.
ui/dashboard/src/pages/feature-flag-details/elements/scheduled-changes-banner/index.tsx Styles scheduled-change banner.
ui/dashboard/src/pages/feature-flag-details/elements/scheduled-changes-banner/edit-schedule-dialog.tsx Styles schedule editor.
ui/dashboard/src/pages/feature-flag-details/elements/scheduled-changes-banner/cancel-schedule-dialog.tsx Styles schedule cancellation.
ui/dashboard/src/pages/feature-flag-details/elements/scheduled-changes-banner/apply-now-dialog.tsx Styles apply-now dialog.
ui/dashboard/src/pages/feature-flag-details/elements/header-details.tsx Styles flag title.
ui/dashboard/src/pages/feature-flag-details/elements/discard-change-items.tsx Styles discard-change items.
ui/dashboard/src/pages/feature-flag-details/elements/card.tsx Styles feature-detail cards.
ui/dashboard/src/pages/feature-flag-details/code-refs/filters-bar/index.tsx Styles code-reference filters.
ui/dashboard/src/pages/feature-flag-details/code-refs/code-accordion/index.tsx Styles code accordion.
ui/dashboard/src/pages/feature-flag-details/code-refs/code-accordion/highlighter/index.tsx Styles code line numbers.
ui/dashboard/src/pages/experiments/overview/index.tsx Styles experiment overview selection.
ui/dashboard/src/pages/experiments/experiments-modal/goals-connection-modal/index.tsx Styles connected goals.
ui/dashboard/src/pages/experiments/experiments-modal/filter-experiment-modal/index.tsx Styles experiment filters.
ui/dashboard/src/pages/experiments/collection-layout/data-collection.tsx Styles experiment statuses and dates.
ui/dashboard/src/pages/experiment-details/elements/srm-banner/srm-variations-table.tsx Styles SRM variation table.
ui/dashboard/src/pages/experiment-details/elements/header-details.tsx Styles experiment metadata.
ui/dashboard/src/pages/experiment-details/collection-loader/settings/index.tsx Styles experiment settings.
ui/dashboard/src/pages/experiment-details/collection-loader/settings/experiment-state/index.tsx Styles experiment state.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/timeseries-line-chart.tsx Adds themed line-chart colors.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/timeseries-area-line-chart.tsx Adds themed area-chart colors.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/rollout-variant-modal.tsx Styles variant modal.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/index.tsx Styles goal result cards.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/goal-results-table-element.tsx Styles result table cells.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/evaluation-table.tsx Styles result dividers.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/conversion-rate-table.tsx Styles conversion table dividers.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/confidence-variants.tsx Styles confidence summary.
ui/dashboard/src/pages/demo/index.tsx Styles demo access page.
ui/dashboard/src/pages/demo/demo-create.tsx Styles demo creation page.
ui/dashboard/src/pages/debugger/index.tsx Styles debugger header.
ui/dashboard/src/pages/debugger/debugger-user-ids.tsx Styles user-ID guidance.
ui/dashboard/src/pages/debugger/debugger-results/result-list/result-item.tsx Styles debugger result cards.
ui/dashboard/src/pages/debugger/debugger-results/result-list/reason-tooltip.tsx Styles reason text.
ui/dashboard/src/pages/debugger/debugger-results/result-list/data-collection.tsx Styles debugger result cells.
ui/dashboard/src/pages/debugger/debugger-results/action-bar.tsx Styles results heading.
ui/dashboard/src/pages/debugger/debugger-attributes.tsx Styles attribute guidance.
ui/dashboard/src/pages/dashboard/index.tsx Styles dashboard example modals.
ui/dashboard/src/pages/create-update-segment/segment-form/confirm-rules-impact-modal.tsx Styles impact warning.
ui/dashboard/src/pages/create-flag/flag-form/general-info.tsx Styles flag information card.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/variations.tsx Styles variation labels.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/variations-switch.tsx Styles variation switch.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/index.tsx Styles variation card.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/default-variations.tsx Styles default variation selectors.
ui/dashboard/src/pages/audit-logs/elements/entity-type-dropdown/index.tsx Styles entity dropdown.
ui/dashboard/src/pages/audit-logs/elements/audit-logs-modal/audit-log-details.tsx Styles audit details.
ui/dashboard/src/pages/audit-logs/collection-layout/audit-log-title.tsx Styles audit titles and links.
ui/dashboard/src/pages/audit-logs/collection-layout/audit-log-list.tsx Styles audit date groups.
ui/dashboard/src/pages/api-keys/collection-layout/data-collection.tsx Styles API-key table cells.
ui/dashboard/src/pages/api-keys/api-key-modal/filter-api-key-modal/index.tsx Styles API-key filters.
ui/dashboard/src/pages/api-keys/api-key-modal/api-key-created-secret-modal.tsx Styles secret display.
ui/dashboard/src/pages/api-keys/api-key-modal/api-key-create-update-modal/index.tsx Styles API-key editor.
ui/dashboard/src/pages/access-denied/index.tsx Styles access-denied page.
ui/dashboard/src/main.tsx Installs global theme provider.
ui/dashboard/src/hooks/use-unsaved-leave-page.tsx Styles leave confirmation.
ui/dashboard/src/hooks/use-theme.tsx Implements theme state and persistence.
ui/dashboard/src/elements/table-list-container/index.tsx Adjusts dark table spacing.
ui/dashboard/src/elements/status/index.tsx Styles status variants.
ui/dashboard/src/elements/select-menu/index.tsx Styles select tags and options.
ui/dashboard/src/elements/rule-clauses-form/attribute-key-select.tsx Adds theme-aware select styles.
ui/dashboard/src/elements/page-layout/index.tsx Styles page header divider.
ui/dashboard/src/elements/page-header/support/index.tsx Styles support popover.
ui/dashboard/src/elements/page-header/sdk-api-endpoint/index.tsx Styles API endpoint display.
ui/dashboard/src/elements/page-header/notifications/index.tsx Styles notification popover.
ui/dashboard/src/elements/page-header/index.tsx Styles shared page headers.
ui/dashboard/src/elements/page-details-header/index.tsx Styles detail-page header.
ui/dashboard/src/elements/page-details-header/header-details-id/index.tsx Styles detail identifiers.
ui/dashboard/src/elements/page-details-header/created-at-time/index.tsx Styles creation timestamps.
ui/dashboard/src/elements/name-with-tooltip/index.tsx Styles shared name trigger.
ui/dashboard/src/elements/filter/index.tsx Styles shared filter button.
ui/dashboard/src/elements/expandable-tag/index.tsx Styles expandable tags.
ui/dashboard/src/elements/empty-state/index.tsx Styles empty-state content.
ui/dashboard/src/elements/dropdown-with-search/index.tsx Styles empty search result.
ui/dashboard/src/elements/data-table/index.tsx Styles table rows.
ui/dashboard/src/elements/confirm-modal/index.tsx Styles confirmation description.
ui/dashboard/src/elements/card/index.tsx Styles shared cards.
ui/dashboard/src/components/upload-files/index.tsx Styles upload controls.
ui/dashboard/src/components/tooltip/index.tsx Styles tooltip surfaces.
ui/dashboard/src/components/toast/index.tsx Styles toast variants.
ui/dashboard/src/components/textarea/index.tsx Styles textarea states.
ui/dashboard/src/components/tabs/index.tsx Styles tab controls.
ui/dashboard/src/components/tabs-link/index.tsx Styles linked tabs.
ui/dashboard/src/components/table/index.tsx Styles table headers.
ui/dashboard/src/components/switch/index.tsx Styles switch states.
ui/dashboard/src/components/scroll-area/index.tsx Styles scrollbar thumb.
ui/dashboard/src/components/radio/index.tsx Styles radio controls.
ui/dashboard/src/components/popover/popover-item.tsx Styles popover items.
ui/dashboard/src/components/popover/index.tsx Styles popover surfaces.
ui/dashboard/src/components/photo-select/upload-zone.tsx Styles photo upload zone.
ui/dashboard/src/components/photo-select/upload-message.tsx Styles upload instructions.
ui/dashboard/src/components/pagination/pagination-count.tsx Styles pagination count.
ui/dashboard/src/components/pagination/pagination-cell.tsx Styles pagination cells.
ui/dashboard/src/components/pagination/pagination-actions.tsx Styles pagination ellipsis.
ui/dashboard/src/components/navigation/user-menu.tsx Adds theme toggle.
ui/dashboard/src/components/navigation/upload-avatar.tsx Styles avatar upload title.
ui/dashboard/src/components/navigation/switch-organization.tsx Styles organization switcher.
ui/dashboard/src/components/navigation/menu-section.tsx Styles navigation sections.
ui/dashboard/src/components/navigation/menu-item.tsx Styles navigation items.
ui/dashboard/src/components/navigation/logout-confirm.tsx Styles logout confirmation.
ui/dashboard/src/components/navigation/index.tsx Styles sidebar navigation.
ui/dashboard/src/components/modal/slide.tsx Styles slide modal.
ui/dashboard/src/components/modal/dialog.tsx Styles dialog modal.
ui/dashboard/src/components/list/list-title.tsx Styles list titles.
ui/dashboard/src/components/list/list-item.tsx Styles list items.
ui/dashboard/src/components/input/index.tsx Styles input states.
ui/dashboard/src/components/input-group/index.tsx Styles input addons.
ui/dashboard/src/components/info-message/index.tsx Styles informational messages.
ui/dashboard/src/components/form/form-label.tsx Styles form labels.
ui/dashboard/src/components/divider/index.tsx Styles shared dividers.
ui/dashboard/src/components/date-time-picker/index.tsx Styles date-time input.
ui/dashboard/src/components/date-time-picker/customize-header.tsx Styles calendar selectors.
ui/dashboard/src/components/date-range-picker/index.tsx Styles range trigger.
ui/dashboard/src/components/date-range-picker/customize-navigator.tsx Styles range navigation.
ui/dashboard/src/components/date-range-picker/action-bar.tsx Styles range actions.
ui/dashboard/src/components/code-editor/style.css Adds dark editor highlights.
ui/dashboard/src/components/checkbox/index.tsx Styles checkbox controls.
ui/dashboard/src/components/button/index.tsx Styles button variants.
ui/dashboard/src/components/button-bar/index.tsx Styles action bar divider.
ui/dashboard/src/components/badge/index.tsx Styles badge variants.
ui/dashboard/src/components/autocomplete-input/index.tsx Styles autocomplete input.
ui/dashboard/src/components/auto-wrap-text/index.tsx Styles wrapped tokens.
ui/dashboard/src/components/ai-chat/suggestion-card.tsx Styles AI suggestions.
ui/dashboard/src/components/ai-chat/preset-questions.tsx Styles preset questions.
ui/dashboard/src/app/index.tsx Styles application loading screen.
ui/dashboard/src/@locales/ja/common.json Adds Japanese theme labels.
ui/dashboard/src/@locales/en/common.json Adds English theme labels.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread ui/dashboard/src/pages/insights/elements/TimeSeriesLineChart/index.tsx
environmentNameMap,
labelBuilder
}: TimeSeriesLineChartProps) => {
const isDark = document.documentElement.classList.contains('dark');
Comment thread ui/dashboard/src/hooks/use-theme.tsx
: 'light';
});

useEffect(() => {
Comment thread ui/dashboard/src/pages/insights/elements/MonthlyBarChart/index.tsx
environmentNameMap
}: MonthlyBarChartProps) => {
const { t } = useTranslation(['common']);
const isDark = document.documentElement.classList.contains('dark');
Comment thread ...rc/pages/experiment-details/collection-loader/results/goal-results/timeseries-line-chart.tsx
}
};

const isDark = document.documentElement.classList.contains('dark');
Comment thread ...ges/experiment-details/collection-loader/results/goal-results/timeseries-area-line-chart.tsx
}
};

const isDark = document.documentElement.classList.contains('dark');
@steveninhle
steveninhle force-pushed the feat-implement-dark-mode branch from ede3f52 to a2eeff0 Compare August 28, 2026 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Balanced
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@cre8ivejp cre8ivejp Awaiting requested review from cre8ivejp cre8ivejp will be requested when the pull request is marked ready for review cre8ivejp is a code owner
@hvn2k1 hvn2k1 Awaiting requested review from hvn2k1 hvn2k1 will be requested when the pull request is marked ready for review hvn2k1 is a code owner
@t-kikuc t-kikuc Awaiting requested review from t-kikuc t-kikuc will be requested when the pull request is marked ready for review t-kikuc is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@steveninhle