Skip to content

fix(ui): improve dark mode toggle and form control colors #6

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
xsharp merged 3 commits into from
Mar 9, 2026
Merged

fix(ui): improve dark mode toggle and form control colors #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a06512
fix(ui): improve toggle and form control colors in dark mode
xsharp Mar 9, 2026
b65cbd9
fix(ui): custom radio component and make run optimization
xsharp Mar 9, 2026
59cceec
fix(dx): run app in background to prevent make exit code error
xsharp Mar 9, 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: 4 additions & 4 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ build: ## Build the application for production
build-debug: ## Build in debug mode
pnpm tauri build --debug

run: ## Build, kill old instance, and launch the app for quick testing
pnpm tauri build
-pkill -x Timlyzer 2>/dev/null; sleep 1
open src-tauri/target/release/bundle/macos/Timlyzer.app
run: ## Build release binary (no bundle), kill old instance, and launch
pnpm tauri build --no-bundle
-pkill -x Timlyzer 2>/dev/null; pkill -x timlyzer 2>/dev/null; sleep 1
./src-tauri/target/release/timlyzer &

# Quality Checks
check: ## Check Rust code for errors
Expand Down
15 changes: 11 additions & 4 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,21 @@ input[type="range"]::-moz-range-thumb {

/* Radio Input */
input[type="radio"] {
@apply w-4 h-4 text-slate-600 border-slate-300 dark:border-slate-600;
@apply focus:ring-slate-500 focus:ring-2;
@apply w-4 h-4 border-slate-300 dark:border-slate-500;
@apply focus:ring-2;
accent-color: theme('colors.slate.600');
}

/* Checkbox Input */
input[type="checkbox"] {
@apply w-4 h-4 text-slate-600 border-slate-300 dark:border-slate-600 rounded;
@apply focus:ring-slate-500 focus:ring-2;
@apply w-4 h-4 border-slate-300 dark:border-slate-500 rounded;
@apply focus:ring-2;
accent-color: theme('colors.slate.600');
}

.dark input[type="radio"],
.dark input[type="checkbox"] {
accent-color: theme('colors.green.500');
}

/* Text Input */
Expand Down
53 changes: 31 additions & 22 deletions src/pages/SettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,8 @@ export function SettingsPage() {
className={cn(
"relative w-11 h-6 rounded-full transition-colors",
autostartEnabled
? "bg-primary-500"
: "bg-slate-200 dark:bg-slate-700"
? "bg-primary-500 dark:bg-green-500"
: "bg-slate-300 dark:bg-slate-600 dark:ring-1 dark:ring-slate-400"
)}
>
<div
Expand Down Expand Up @@ -311,8 +311,8 @@ export function SettingsPage() {
className={cn(
"relative w-11 h-6 rounded-full transition-colors",
settings?.hideDock
? "bg-primary-500"
: "bg-slate-200 dark:bg-slate-700"
? "bg-primary-500 dark:bg-green-500"
: "bg-slate-300 dark:bg-slate-600 dark:ring-1 dark:ring-slate-400"
)}
>
<div
Expand All @@ -335,26 +335,35 @@ export function SettingsPage() {
{ value: "minimize", label: t("appearance.minimize") },
{ value: "ask", label: t("appearance.ask") },
{ value: "quit", label: t("appearance.quit") },
].map((option) => (
<label
key={option.value}
className="flex items-center gap-2 cursor-pointer"
>
<input
type="radio"
name="closeAction"
value={option.value}
checked={settings?.closeAction === option.value}
onChange={() =>
].map((option) => {
const isSelected = settings?.closeAction === option.value;
return (
<button
key={option.value}
type="button"
onClick={() =>
setSettings((s) =>
s ? { ...s, closeAction: option.value } : s
)
}
className="text-primary-500"
/>
{option.label}
</label>
))}
className="flex items-center gap-2 cursor-pointer w-full text-left"
>
<div
className={cn(
"w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
isSelected
? "border-slate-600 dark:border-green-500"
: "border-slate-300 dark:border-slate-500"
)}
>
{isSelected && (
<div className="w-2 h-2 rounded-full bg-slate-600 dark:bg-green-500" />
)}
</div>
{option.label}
</button>
);
})}
</div>
</div>

Expand Down Expand Up @@ -448,8 +457,8 @@ export function SettingsPage() {
className={cn(
"relative w-11 h-6 rounded-full transition-colors",
settings?.trackUrls
? "bg-primary-500"
: "bg-slate-200 dark:bg-slate-700"
? "bg-primary-500 dark:bg-green-500"
: "bg-slate-300 dark:bg-slate-600 dark:ring-1 dark:ring-slate-400"
)}
>
<div
Expand Down