Skip to content

feat: add theme preference (system/dark/light) #116

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

Closed
baptisteArno wants to merge 6 commits into from
Closed

feat: add theme preference (system/dark/light) #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
64dcc55
Add theme preference and diff theming
baptisteArno Jan 19, 2026
a72f397
Merge branch 'main' into theme-preference
Dimillian Jan 19, 2026
f127c33
Merge branch 'main' into theme-preference
Dimillian Jan 19, 2026
6f9ec23
Restore transparency in forced themes
baptisteArno Jan 19, 2026
9a35002
Merge branch 'main' into theme-preference
Dimillian Jan 19, 2026
04fa8b4
Merge branch 'main' into theme-preference
Dimillian Jan 19, 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
8 changes: 8 additions & 0 deletions src-tauri/src/types.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,8 @@ pub(crate) struct AppSettings {
pub(crate) last_composer_reasoning_effort: Option<String>,
#[serde(default = "default_ui_scale", rename = "uiScale")]
pub(crate) ui_scale: f64,
#[serde(default = "default_theme", rename = "theme")]
pub(crate) theme: String,
#[serde(
default = "default_notification_sounds_enabled",
rename = "notificationSoundsEnabled"
Expand Down Expand Up @@ -323,6 +325,10 @@ fn default_ui_scale() -> f64 {
1.0
}

fn default_theme() -> String {
"system".to_string()
}

fn default_composer_model_shortcut() -> Option<String> {
Some("cmd+shift+m".to_string())
}
Expand Down Expand Up @@ -381,6 +387,7 @@ impl Default for AppSettings {
last_composer_model_id: None,
last_composer_reasoning_effort: None,
ui_scale: 1.0,
theme: default_theme(),
notification_sounds_enabled: true,
experimental_collab_enabled: false,
experimental_steer_enabled: false,
Expand Down Expand Up @@ -421,6 +428,7 @@ mod tests {
assert!(settings.last_composer_model_id.is_none());
assert!(settings.last_composer_reasoning_effort.is_none());
assert!((settings.ui_scale - 1.0).abs() < f64::EPSILON);
assert_eq!(settings.theme, "system");
assert!(settings.notification_sounds_enabled);
assert!(!settings.experimental_steer_enabled);
assert!(!settings.dictation_enabled);
Expand Down
30 changes: 29 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,7 +1149,34 @@ function MainApp() {
onDebug: addDebugEntry,
});
const isDefaultScale = Math.abs(uiScale - 1) < 0.001;
const appClassName = `app ${isCompact ? "layout-compact" : "layout-desktop"}${
const [systemTheme, setSystemTheme] = useState<"dark" | "light">(() => {
if (typeof window === "undefined" || !window.matchMedia) {
return "dark";
}
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
});
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) {
return;
}
const media = window.matchMedia("(prefers-color-scheme: dark)");
const handleChange = (event: MediaQueryListEvent) => {
setSystemTheme(event.matches ? "dark" : "light");
};
setSystemTheme(media.matches ? "dark" : "light");
if (media.addEventListener) {
media.addEventListener("change", handleChange);
return () => media.removeEventListener("change", handleChange);
}
media.addListener(handleChange);
return () => media.removeListener(handleChange);
}, []);
const resolvedTheme =
appSettings.theme === "system" ? systemTheme : appSettings.theme;
const themeClassName = resolvedTheme === "light" ? "theme-light" : "theme-dark";
const appClassName = `app ${themeClassName} ${
isCompact ? "layout-compact" : "layout-desktop"
}${
isPhone ? " layout-phone" : ""
}${isTablet ? " layout-tablet" : ""}${
reduceTransparency ? " reduced-transparency" : ""
Expand Down Expand Up @@ -1193,6 +1220,7 @@ function MainApp() {
activeRateLimits,
approvals,
handleApprovalDecision,
themePreference: resolvedTheme,
onOpenSettings: () => handleOpenSettings(),
onOpenDictationSettings: () => handleOpenSettings("dictation"),
onOpenDebug: handleDebugClick,
Expand Down
15 changes: 11 additions & 4 deletions src/features/git/components/GitDiffViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type GitDiffViewerProps = {
scrollRequestId?: number;
isLoading: boolean;
error: string | null;
themePreference?: "system" | "dark" | "light";
pullRequest?: GitHubPullRequest | null;
pullRequestComments?: GitHubPullRequestComment[];
pullRequestCommentsLoading?: boolean;
Expand Down Expand Up @@ -119,6 +120,7 @@ export function GitDiffViewer({
scrollRequestId,
isLoading,
error,
themePreference = "system",
pullRequest,
pullRequestComments,
pullRequestCommentsLoading = false,
Expand All @@ -131,10 +133,15 @@ export function GitDiffViewer({
const ignoreActivePathUntilRef = useRef<number>(0);
const lastScrollRequestIdRef = useRef<number | null>(null);
const poolOptions = useMemo(() => ({ workerFactory }), []);
const highlighterOptions = useMemo(
() => ({ theme: { dark: "pierre-dark", light: "pierre-light" } }),
[],
);
const highlighterOptions = useMemo(() => {
if (themePreference === "dark") {
return { theme: "pierre-dark" };
}
if (themePreference === "light") {
return { theme: "pierre-light" };
}
return { theme: { dark: "pierre-dark", light: "pierre-light" } };
}, [themePreference]);
const indexByPath = useMemo(() => {
const map = new Map<string, number>();
diffs.forEach((entry, index) => {
Expand Down
2 changes: 2 additions & 0 deletions src/features/layout/hooks/useLayoutNodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ type LayoutNodesOptions = {
gitDiffs: GitDiffViewerItem[];
gitDiffLoading: boolean;
gitDiffError: string | null;
themePreference?: "system" | "dark" | "light";
onDiffActivePathChange?: (path: string) => void;
onSendPrompt: (text: string) => void | Promise<void>;
onSendPromptToNewAgent: (text: string) => void | Promise<void>;
Expand Down Expand Up @@ -597,6 +598,7 @@ export function useLayoutNodes(options: LayoutNodesOptions): LayoutNodesResult {
scrollRequestId={options.diffScrollRequestId}
isLoading={options.gitDiffLoading}
error={options.gitDiffError}
themePreference={options.themePreference}
pullRequest={options.selectedPullRequest}
pullRequestComments={options.selectedPullRequestComments}
pullRequestCommentsLoading={options.selectedPullRequestCommentsLoading}
Expand Down
24 changes: 24 additions & 0 deletions src/features/settings/components/SettingsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,6 +706,30 @@ export function SettingsView({
</button>
</div>
</div>
<div className="settings-toggle-row">
<div>
<div className="settings-toggle-title">Theme</div>
<div className="settings-toggle-subtitle">
Follow macOS appearance or force a light/dark theme.
</div>
</div>
<select
id="theme-preference"
className="settings-select settings-select--theme"
value={appSettings.theme}
onChange={(event) =>
void onUpdateAppSettings({
...appSettings,
theme: event.target.value as AppSettings["theme"],
})
}
aria-label="Theme"
>
<option value="system">System</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
<div className="settings-subsection-title">Sounds</div>
<div className="settings-subsection-subtitle">
Control notification audio alerts.
Expand Down
8 changes: 8 additions & 0 deletions src/features/settings/hooks/useAppSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const defaultSettings: AppSettings = {
lastComposerModelId: null,
lastComposerReasoningEffort: null,
uiScale: UI_SCALE_DEFAULT,
theme: "system",
notificationSoundsEnabled: true,
experimentalCollabEnabled: false,
experimentalSteerEnabled: false,
Expand All @@ -27,9 +28,16 @@ const defaultSettings: AppSettings = {
};

function normalizeAppSettings(settings: AppSettings): AppSettings {
const theme =
settings.theme === "light" ||
settings.theme === "dark" ||
settings.theme === "system"
? settings.theme
: "system";
return {
...settings,
uiScale: clampUiScale(settings.uiScale),
theme,
};
}

Expand Down
131 changes: 69 additions & 62 deletions src/styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@
--ui-scale: 1;
}

.app.theme-light {
color-scheme: light;
}

.app.theme-dark {
color-scheme: dark;
}

.app.reduced-transparency {
--surface-sidebar: rgba(18, 18, 18, 0.92);
--surface-topbar: rgba(10, 14, 20, 0.94);
Expand All @@ -95,36 +103,35 @@
--surface-popover: rgba(16, 20, 30, 0.995);
}

@media (prefers-color-scheme: light) {
:root {
--text-primary: #1a1d24;
--text-strong: #0e1118;
--text-emphasis: rgba(17, 20, 28, 0.9);
--text-stronger: rgba(17, 20, 28, 0.85);
--text-quiet: rgba(17, 20, 28, 0.75);
--text-muted: rgba(17, 20, 28, 0.7);
--text-subtle: rgba(17, 20, 28, 0.6);
--text-faint: rgba(17, 20, 28, 0.5);
--text-fainter: rgba(17, 20, 28, 0.45);
--text-dim: rgba(17, 20, 28, 0.35);
--surface-sidebar: rgba(246, 247, 250, 0.82);
--surface-topbar: rgba(250, 251, 253, 0.9);
--surface-right-panel: rgba(245, 247, 250, 0.82);
--surface-composer: rgba(250, 251, 253, 0.9);
--surface-messages: rgba(238, 241, 246, 0.9);
--surface-card: rgba(255, 255, 255, 0.72);
--surface-card-strong: rgba(255, 255, 255, 0.92);
--surface-card-muted: rgba(255, 255, 255, 0.7);
--surface-item: rgba(255, 255, 255, 0.6);
--surface-control: rgba(15, 23, 36, 0.08);
--surface-control-hover: rgba(15, 23, 36, 0.12);
.app.theme-light {
--text-primary: #1a1d24;
--text-strong: #0e1118;
Comment on lines +106 to +108
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 19, 2026

Choose a reason for hiding this comment

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

P2 Badge Apply light-theme variables outside the .app tree

The light theme variables are now scoped to .app.theme-light, which means any UI rendered outside the .app subtree will keep the dark defaults from :root. This shows up in portals like the workspace add menu (Sidebar.tsx uses createPortal(..., document.body)), which are no longer descendants of .app. When a user selects the light theme (or system is light), these popovers still render with dark colors, creating a mixed theme. Consider applying the theme class to body/:root or moving the light overrides there so portals inherit the correct variables.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Owner

@Dimillian Dimillian Jan 19, 2026

Choose a reason for hiding this comment

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

CC @baptisteArno

--text-emphasis: rgba(17, 20, 28, 0.9);
--text-stronger: rgba(17, 20, 28, 0.85);
--text-quiet: rgba(17, 20, 28, 0.75);
--text-muted: rgba(17, 20, 28, 0.7);
--text-subtle: rgba(17, 20, 28, 0.6);
--text-faint: rgba(17, 20, 28, 0.5);
--text-fainter: rgba(17, 20, 28, 0.45);
--text-dim: rgba(17, 20, 28, 0.35);
--surface-sidebar: rgba(246, 247, 250, 0.82);
--surface-topbar: rgba(250, 251, 253, 0.9);
--surface-right-panel: rgba(245, 247, 250, 0.82);
--surface-composer: rgba(250, 251, 253, 0.9);
--surface-messages: rgba(238, 241, 246, 0.9);
--surface-card: rgba(255, 255, 255, 0.72);
--surface-card-strong: rgba(255, 255, 255, 0.92);
--surface-card-muted: rgba(255, 255, 255, 0.7);
--surface-item: rgba(255, 255, 255, 0.6);
--surface-control: rgba(15, 23, 36, 0.08);
--surface-control-hover: rgba(15, 23, 36, 0.12);
--surface-control-disabled: rgba(15, 23, 36, 0.05);
--surface-hover: rgba(15, 23, 36, 0.06);
--surface-active: rgba(77, 153, 255, 0.18);
--surface-approval: rgba(246, 248, 252, 0.92);
--surface-debug: rgba(242, 244, 248, 0.9);
--surface-command: rgba(245, 247, 250, 0.95);
--surface-diff-card: rgba(240, 243, 248, 0.92);
--surface-approval: rgba(246, 248, 252, 0.92);
--surface-debug: rgba(242, 244, 248, 0.9);
--surface-command: rgba(245, 247, 250, 0.95);
--surface-diff-card: rgba(240, 243, 248, 0.92);
--surface-bubble: rgba(255, 255, 255, 0.9);
--surface-bubble-user: rgba(77, 153, 255, 0.22);
--surface-context-core: rgba(255, 255, 255, 0.9);
Expand All @@ -135,46 +142,45 @@
--text-review-active: rgba(120, 30, 70, 0.9);
--surface-review-done: rgba(140, 235, 200, 0.35);
--text-review-done: rgba(20, 90, 60, 0.9);
--border-subtle: rgba(15, 23, 36, 0.08);
--border-muted: rgba(15, 23, 36, 0.06);
--border-strong: rgba(15, 23, 36, 0.14);
--border-stronger: rgba(15, 23, 36, 0.18);
--border-quiet: rgba(15, 23, 36, 0.2);
--border-accent: rgba(77, 153, 255, 0.5);
--border-accent-soft: rgba(77, 153, 255, 0.28);
--border-subtle: rgba(15, 23, 36, 0.08);
--border-muted: rgba(15, 23, 36, 0.06);
--border-strong: rgba(15, 23, 36, 0.14);
--border-stronger: rgba(15, 23, 36, 0.18);
--border-quiet: rgba(15, 23, 36, 0.2);
--border-accent: rgba(77, 153, 255, 0.5);
--border-accent-soft: rgba(77, 153, 255, 0.28);
--text-accent: rgba(45, 93, 170, 0.7);
--shadow-accent: rgba(90, 140, 210, 0.18);
--status-success: rgba(30, 155, 110, 0.9);
--status-warning: rgba(215, 120, 20, 0.9);
--status-error: rgba(200, 45, 45, 0.9);
--status-unknown: rgba(17, 20, 28, 0.25);
--status-warning: rgba(215, 120, 20, 0.9);
--status-error: rgba(200, 45, 45, 0.9);
--status-unknown: rgba(17, 20, 28, 0.25);
--select-caret: rgba(15, 23, 36, 0.45);
}
}

.app.reduced-transparency {
--surface-sidebar: rgba(240, 242, 247, 0.98);
--surface-topbar: rgba(244, 246, 250, 0.98);
--surface-right-panel: rgba(242, 244, 248, 0.98);
--surface-composer: rgba(244, 246, 250, 0.98);
--surface-messages: rgba(240, 242, 247, 0.98);
--surface-card: rgba(255, 255, 255, 0.96);
--surface-card-strong: rgba(255, 255, 255, 0.98);
--surface-card-muted: rgba(252, 253, 255, 0.96);
--surface-item: rgba(250, 251, 253, 0.96);
--surface-control: rgba(15, 23, 36, 0.12);
--surface-control-hover: rgba(15, 23, 36, 0.18);
--surface-control-disabled: rgba(15, 23, 36, 0.08);
--surface-hover: rgba(15, 23, 36, 0.1);
--surface-active: rgba(77, 153, 255, 0.22);
--surface-approval: rgba(248, 249, 252, 0.98);
--surface-debug: rgba(246, 248, 252, 0.98);
--surface-command: rgba(250, 251, 253, 0.98);
--surface-diff-card: rgba(244, 246, 250, 0.98);
--surface-bubble: rgba(255, 255, 255, 0.98);
--surface-bubble-user: rgba(77, 153, 255, 0.28);
--surface-context-core: rgba(255, 255, 255, 0.98);
--surface-popover: rgba(255, 255, 255, 0.995);
}
.app.theme-light.reduced-transparency {
--surface-sidebar: rgba(240, 242, 247, 0.98);
--surface-topbar: rgba(244, 246, 250, 0.98);
--surface-right-panel: rgba(242, 244, 248, 0.98);
--surface-composer: rgba(244, 246, 250, 0.98);
--surface-messages: rgba(240, 242, 247, 0.98);
--surface-card: rgba(255, 255, 255, 0.96);
--surface-card-strong: rgba(255, 255, 255, 0.98);
--surface-card-muted: rgba(252, 253, 255, 0.96);
--surface-item: rgba(250, 251, 253, 0.96);
--surface-control: rgba(15, 23, 36, 0.12);
--surface-control-hover: rgba(15, 23, 36, 0.18);
--surface-control-disabled: rgba(15, 23, 36, 0.08);
--surface-hover: rgba(15, 23, 36, 0.1);
--surface-active: rgba(77, 153, 255, 0.22);
--surface-approval: rgba(248, 249, 252, 0.98);
--surface-debug: rgba(246, 248, 252, 0.98);
--surface-command: rgba(250, 251, 253, 0.98);
--surface-diff-card: rgba(244, 246, 250, 0.98);
--surface-bubble: rgba(255, 255, 255, 0.98);
--surface-bubble-user: rgba(77, 153, 255, 0.28);
--surface-context-core: rgba(255, 255, 255, 0.98);
--surface-popover: rgba(255, 255, 255, 0.995);
}

.popover-surface {
Expand Down Expand Up @@ -205,6 +211,7 @@ body {
display: grid;
grid-template-columns: var(--sidebar-width, 280px) 1fr;
background: transparent;
color: var(--text-primary);
border-radius: 0;
overflow: hidden;
position: relative;
Expand Down
14 changes: 6 additions & 8 deletions src/styles/composer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,15 +198,13 @@
position: relative;
}

@media (prefers-color-scheme: light) {
.composer-action {
border-color: var(--border-strong);
color: var(--text-strong);
}
.app.theme-light .composer-action {
border-color: var(--border-strong);
color: var(--text-strong);
}

.composer-action:hover {
color: var(--text-strong);
}
.app.theme-light .composer-action:hover {
color: var(--text-strong);
}

.composer-action--mic.is-active {
Expand Down
8 changes: 3 additions & 5 deletions src/styles/messages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,9 @@
animation: working-shimmer 2.2s ease-in-out infinite;
}

@media (prefers-color-scheme: light) {
.working-text {
color: var(--text-muted);
background: none;
}
.app.theme-light .working-text {
color: var(--text-muted);
background: none;
}

.turn-complete {
Expand Down
Loading