feat: add dark/light theme toggle (closes #3)#20
Open
morwol wants to merge 7 commits intoDatafyingTech:masterfrom
Open
feat: add dark/light theme toggle (closes #3)#20morwol wants to merge 7 commits intoDatafyingTech:masterfrom
morwol wants to merge 7 commits intoDatafyingTech:masterfrom
Conversation
Fixes terminal spawning on Fedora and other RPM-based distributions where
`x-terminal-emulator` (a Debian/Ubuntu mechanism) does not exist.
Changes:
- Replace hardcoded terminal list in `open_terminal` with a new
`find_terminal_emulator()` helper that probes installed terminals in
order of preference: x-terminal-emulator → gnome-terminal → konsole →
xfce4-terminal → alacritty → kitty → tilix → xterm → urxvt
- Add Wayland awareness: under a pure Wayland session (WAYLAND_DISPLAY
set, DISPLAY unset) X11-only terminals (xterm, urxvt) are skipped to
avoid launch failures when XWayland is not running
- Use correct argument separator per terminal ("--" for gnome-terminal,
konsole, kitty; "-e" for everything else)
- Update README with Fedora/DNF build dependencies, cronie setup, and
a Wayland compatibility note
Tested on Fedora 43 with GNOME (Wayland + XWayland), producing a working
.rpm and .AppImage via `pnpm tauri build`.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a dark/light mode toggle to the Settings panel. The selected theme
persists across restarts via ~/.aui/settings.json.
Changes:
- ui-store.ts: add `theme` state ("dark" | "light", default "dark") and
`setTheme()` action
- App.css: add `[data-theme="light"]` block with GitHub-light-inspired
color variables overriding the dark defaults
- App.tsx: read saved theme from ~/.aui/settings.json on startup and
call setTheme(); apply `data-theme` attribute to <html> reactively
via useEffect so all CSS variables update instantly
- SettingsPanel.tsx: add `theme` field to AppSettings, render a
Dark / Light two-button toggle in the Preferences section, call
setTheme() on load and on save, persist theme to ~/.aui/settings.json
so the preference survives app restarts
- FileViewer, MarkdownEditor, SettingsEditor, AgentEditor: switch Monaco
editor theme between "vs-dark" and "vs" based on the active theme
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…cards All low-opacity color tints were nearly invisible on a white background. - App.css: extract tinted background colors into CSS variables (--tint-blue/green/orange/purple/gold/subagent, --bg-toast, --shadow-panel, --shadow-dropdown); light theme overrides use higher opacity so tints remain clearly visible - Toast.tsx: replace hardcoded #1e1e3a with var(--bg-toast); add border so toasts have visible edges in light mode; use var(--shadow-dropdown) - OrgNode.tsx: replace all hardcoded rgba tints with CSS variables so group/member/pipeline/root cards adapt correctly to the active theme - InspectorPanel.tsx, GroupEditor.tsx: replace rgba(63,185,80,0.05) and rgba(74,158,255,0.05/0.12) with --tint-green / --tint-blue / --tint-blue-hover - SettingsPanel.tsx, ContextHub.tsx: use --shadow-panel for side-panel drop shadows Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- OrgNode.tsx: replace hardcoded #fff / #a0a0a0 text colors with var(--text-primary), var(--text-secondary), var(--text-tertiary) so node names and descriptions are readable on a light background; skill badge background now uses var(--tint-green) - SettingsPanel.tsx: call setTheme() immediately on toggle click so the theme switches live without waiting for Save Settings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Both panels used white-alpha colors (rgba(255,255,255,...)) for inputs, borders, dividers, and hover states that are invisible on a light background. - App.css: add --bg-input, --border-input, --border-input-hover, --border-subtle, --bg-hover-subtle CSS variables; in light theme these map to solid CSS-var equivalents (--bg-primary, --border-color, etc.) - ContextHub.tsx: replace all rgba(255,255,255,0.04-0.25) usages with the new CSS variables (search input, filter pills, dividers, hover states, file viewer item borders) - SchedulePanel.tsx: fix hardcoded inputStyle (#1a1a2e background, #2a2a4a border, white text) → CSS vars; fix "New Schedule" form container background (#1a1a2e → var(--bg-elevated)) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The Catalog header used linear-gradient(rgba(21,27,35,...)) which was hardcoded to the dark theme palette. Replaced with var(--bg-secondary) so it adapts to the active theme like the rest of the panel. Removed backdrop-filter since it only makes sense with a transparent bg. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Browser-native <select> and <input> elements ignore CSS background/color by default and render with OS defaults — causing white dropdowns on dark backgrounds and dark dropdowns on light backgrounds. - Add global CSS rules so all selects and inputs inherit var(--bg-input) / var(--text-primary) / var(--border-input) - Set color-scheme: dark on root; override to color-scheme: light under [data-theme="light"] so the browser also adapts scrollbars, focus rings, and option list backgrounds to the active theme Fixes the white-background Parent dropdown in CreateNodeDialog and all other native form elements across the app (SchedulePanel, InspectorPanel, AgentEditor, etc.) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #3
Summary
Adds a dark/light mode toggle to the Settings panel. The selected theme persists across app restarts via
~/.aui/settings.json.What changed
UI (
SettingsPanel.tsx)Theme engine (
App.css,App.tsx,ui-store.ts)[data-theme="light"]CSS block added toApp.csswith GitHub-light-inspired color variables, cleanly overriding the existing dark defaultsthemestate andsetTheme()action added to the Zustand UI storeApp.tsxreads the saved theme from~/.aui/settings.jsonon startup and applies it; auseEffectsetsdocument.documentElement.setAttribute("data-theme", theme)reactively so all CSS variables flip instantlyMonaco editors (4 files)
FileViewer,MarkdownEditor,SettingsEditor,AgentEditornow usetheme === "light" ? "vs" : "vs-dark"so the code editors match the active UI themeImplementation notes
"dark"is the default--accent-blue,--accent-green, etc.) and only overrides the background/text/border variablesTesting
Verified on Fedora 43, GNOME + Wayland:
vs-darkandvscorrectly