R3ap3r/aurora-dockside
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: provide explicit light and dark themes

Browse Source
This commit is contained in:
reaper
2026-08-14 14:57:47 -05:00
parent d46a44c5b9
commit 0915bb15a6
5 changed files with 44 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/create/CreateProjectModal.tsx
+4 -4
View File
@@ -97,7 +97,7 @@ export function CreateProjectModal({ onClose }: { onClose: () => void }): React.
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-950/55 p-3 backdrop-blur-sm sm:p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-950/55 p-3 backdrop-blur-sm sm:p-4">
<div <div
className="dark grid w-full max-w-4xl overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 text-neutral-100 shadow-[0_30px_100px_rgba(0,0,0,0.48)] md:grid-cols-[0.82fr_1.18fr]" className="grid w-full max-w-4xl overflow-hidden rounded-2xl border border-white/70 bg-white text-neutral-900 shadow-[0_30px_100px_rgba(15,23,42,0.28)] dark:border-white/10 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_30px_100px_rgba(0,0,0,0.48)] md:grid-cols-[0.82fr_1.18fr]"
style={{ height: 'min(760px, calc(100vh - 24px))', maxHeight: 'calc(100vh - 24px)' }} style={{ height: 'min(760px, calc(100vh - 24px))', maxHeight: 'calc(100vh - 24px)' }}
> >
<aside className="relative hidden overflow-hidden bg-neutral-950 p-6 text-white md:block"> <aside className="relative hidden overflow-hidden bg-neutral-950 p-6 text-white md:block">
@@ -139,8 +139,8 @@ export function CreateProjectModal({ onClose }: { onClose: () => void }): React.
</div> </div>
</aside> </aside>
<div className="min-h-0 min-w-0 overflow-y-auto overscroll-contain bg-[radial-gradient(circle_at_100%_0%,rgba(34,211,238,0.10),transparent_36%),linear-gradient(180deg,#0a0f16_0%,#090c12_58%,#071417_100%)] [scrollbar-gutter:stable]"> <div className="min-h-0 min-w-0 overflow-y-auto overscroll-contain bg-[radial-gradient(circle_at_100%_0%,rgba(6,182,212,0.08),transparent_36%),linear-gradient(180deg,#f8fafc_0%,#ffffff_58%,#f0f9fa_100%)] [scrollbar-gutter:stable] dark:bg-[radial-gradient(circle_at_100%_0%,rgba(34,211,238,0.10),transparent_36%),linear-gradient(180deg,#0a0f16_0%,#090c12_58%,#071417_100%)]">
<div className="sticky top-0 z-20 flex items-center justify-between border-b border-white/10 bg-neutral-950/90 px-5 py-4 backdrop-blur-xl"> <div className="sticky top-0 z-20 flex items-center justify-between border-b border-slate-200/80 bg-slate-50/90 px-5 py-4 backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/90">
<div> <div>
<h2 className="text-base font-semibold"> <h2 className="text-base font-semibold">
{step === 'site' ? 'New Project' : `Set up ${getTypeLabel(projectType)}`} {step === 'site' ? 'New Project' : `Set up ${getTypeLabel(projectType)}`}
@@ -305,7 +305,7 @@ export function CreateProjectModal({ onClose }: { onClose: () => void }): React.
</div> </div>
</div> </div>
<div className="sticky bottom-0 z-20 flex items-center justify-between gap-3 border-t border-white/10 bg-neutral-950/90 p-4 backdrop-blur-xl"> <div className="sticky bottom-0 z-20 flex items-center justify-between gap-3 border-t border-slate-200/80 bg-slate-50/90 p-4 backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/90">
<button <button
type="button" type="button"
onClick={step === 'site' ? onClose : () => setStep('site')} onClick={step === 'site' ? onClose : () => setStep('site')}
src/renderer/src/components/projects/ProjectDetail.tsx
+27 -27
View File
@@ -74,7 +74,7 @@ const DATABASE_OPTIONS = [
] ]
const heroFieldClass = const heroFieldClass =
'w-full rounded-lg border border-white/10 bg-white/5 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition hover:border-cyan-300/40 hover:bg-white/10 focus:border-cyan-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50' 'w-full rounded-lg border border-neutral-200 bg-white/90 px-2.5 py-1.5 text-sm font-semibold text-neutral-900 shadow-sm transition hover:border-cyan-300 focus:border-cyan-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-cyan-300/40 dark:hover:bg-white/10'
export function ProjectDetail({ name }: { name: string }): React.JSX.Element { export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
const { data: project, isLoading, isError, error } = useProjectDetail(name) const { data: project, isLoading, isError, error } = useProjectDetail(name)
@@ -178,13 +178,13 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
return ( return (
<div className="mx-auto flex w-full max-w-6xl flex-col gap-5 p-6"> <div className="mx-auto flex w-full max-w-6xl flex-col gap-5 p-6">
<header className="overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 text-white shadow-[0_24px_70px_rgba(0,0,0,0.28)]"> <header className="overflow-hidden rounded-2xl border border-cyan-200/80 bg-gradient-to-br from-white via-slate-50 to-cyan-50 text-neutral-950 shadow-[0_20px_55px_rgba(15,23,42,0.10)] dark:border-white/10 dark:bg-neutral-950 dark:bg-none dark:text-white dark:shadow-[0_24px_70px_rgba(0,0,0,0.28)]">
<div className="relative p-5"> <div className="relative p-5">
<div className="absolute inset-0 bg-[linear-gradient(rgba(8,145,178,0.07)_1px,transparent_1px),linear-gradient(90deg,rgba(8,145,178,0.07)_1px,transparent_1px)] bg-[size:36px_36px] dark:bg-[linear-gradient(rgba(45,212,191,0.09)_1px,transparent_1px),linear-gradient(90deg,rgba(45,212,191,0.09)_1px,transparent_1px)]" /> <div className="absolute inset-0 bg-[linear-gradient(rgba(8,145,178,0.07)_1px,transparent_1px),linear-gradient(90deg,rgba(8,145,178,0.07)_1px,transparent_1px)] bg-[size:36px_36px] dark:bg-[linear-gradient(rgba(45,212,191,0.09)_1px,transparent_1px),linear-gradient(90deg,rgba(45,212,191,0.09)_1px,transparent_1px)]" />
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-cyan-200/30 to-transparent dark:from-cyan-500/10" /> <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-cyan-200/30 to-transparent dark:from-cyan-500/10" />
<div className="relative flex flex-wrap items-start justify-between gap-4"> <div className="relative flex flex-wrap items-start justify-between gap-4">
<div className="min-w-0"> <div className="min-w-0">
<div className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold text-cyan-100 shadow-sm"> <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-white/80 px-3 py-1 text-xs font-semibold text-cyan-800 shadow-sm dark:border-white/10 dark:bg-white/10 dark:text-cyan-100">
<Gauge size={13} /> <Gauge size={13} />
{runningServices} of {services.length} services running {runningServices} of {services.length} services running
</div> </div>
@@ -192,7 +192,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
<h2 className="truncate text-3xl font-semibold">{project.name}</h2> <h2 className="truncate text-3xl font-semibold">{project.name}</h2>
<StatusBadge status={project.status} /> <StatusBadge status={project.status} />
</div> </div>
<p className="mt-2 max-w-3xl truncate text-sm text-neutral-300">{project.approot}</p> <p className="mt-2 max-w-3xl truncate text-sm text-neutral-500 dark:text-neutral-300">{project.approot}</p>
</div> </div>
<div className="flex flex-wrap justify-end gap-2"> <div className="flex flex-wrap justify-end gap-2">
<button <button
@@ -207,7 +207,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
type="button" type="button"
disabled={!isRunning || isBusy} disabled={!isRunning || isBusy}
onClick={() => stopProject.mutate(project.name)} onClick={() => stopProject.mutate(project.name)}
className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-40" className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
> >
<Square size={14} /> Stop <Square size={14} /> Stop
</button> </button>
@@ -223,7 +223,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
type="button" type="button"
disabled={!isRunning} disabled={!isRunning}
onClick={() => setIsLogsOpen(true)} onClick={() => setIsLogsOpen(true)}
className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-40" className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
> >
<FileText size={14} /> Logs <FileText size={14} /> Logs
</button> </button>
@@ -232,13 +232,13 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
href={`${project.primary_url.replace(/\/$/, '')}${applicationManifest.project.adminPath}`} href={`${project.primary_url.replace(/\/$/, '')}${applicationManifest.project.adminPath}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15]" className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
> >
<KeyRound size={14} /> Application Admin <KeyRound size={14} /> Application Admin
</a> </a>
)} )}
{applicationManifest?.project?.adminPath && isRunning && project.wordpress_network_admin_url && ( {applicationManifest?.project?.adminPath && isRunning && project.wordpress_network_admin_url && (
<a href={project.wordpress_network_admin_url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15]"> <a href={project.wordpress_network_admin_url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]">
<Globe2 size={14} /> Network Admin <Globe2 size={14} /> Network Admin
</a> </a>
)} )}
@@ -246,24 +246,24 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
type="button" type="button"
disabled={isBusy} disabled={isBusy}
onClick={() => setIsDeleteOpen(true)} onClick={() => setIsDeleteOpen(true)}
className="inline-flex items-center gap-1.5 rounded-md border border-red-300/20 bg-red-400/10 px-3 py-1.5 text-sm font-medium text-red-100 transition hover:bg-red-400/[0.15] disabled:cursor-not-allowed disabled:opacity-40" className="inline-flex items-center gap-1.5 rounded-md border border-red-200 bg-red-50/80 px-3 py-1.5 text-sm font-medium text-red-700 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-red-300/20 dark:bg-red-400/10 dark:text-red-100 dark:hover:bg-red-400/[0.15]"
> >
<Trash2 size={14} /> Delete <Trash2 size={14} /> Delete
</button> </button>
</div> </div>
</div> </div>
<div className="relative mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4"> <div className="relative mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur"> <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
<Boxes size={17} className="mb-3 text-cyan-200" /> <Boxes size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400"> <p className="text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Project type Project type
</p> </p>
<p className="mt-1 truncate text-sm font-semibold text-white">{applicationManifest?.name ?? project.type}</p>{applicationManifest?.project?.adminPath && <p className="mt-1 text-[11px] text-neutral-400">{project.wordpress_multisite === 'subdomain' ? 'Multisite · Subdomain' : project.wordpress_multisite === 'subdirectory' ? 'Multisite · Subdirectory' : 'Single site'}</p>} <p className="mt-1 truncate text-sm font-semibold text-neutral-900 dark:text-white">{applicationManifest?.name ?? project.type}</p>{applicationManifest?.project?.adminPath && <p className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400">{project.wordpress_multisite === 'subdomain' ? 'Multisite · Subdomain' : project.wordpress_multisite === 'subdirectory' ? 'Multisite · Subdirectory' : 'Single site'}</p>}
</div> </div>
<div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur"> <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
<Code2 size={17} className="mb-3 text-cyan-200" /> <Code2 size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
<p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400"> <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
PHP PHP
</p> </p>
<select <select
@@ -280,17 +280,17 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
</select> </select>
</div> </div>
<div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur"> <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
<Code2 size={17} className="mb-3 text-cyan-200" /> <Code2 size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
<p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400">Node.js</p> <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Node.js</p>
<select value={project.nodejs_version ?? '24'} disabled={isEnvUpdating} onChange={(e) => void applyEnvironmentChange({ nodeVersion: e.target.value })} className={heroFieldClass}> <select value={project.nodejs_version ?? '24'} disabled={isEnvUpdating} onChange={(e) => void applyEnvironmentChange({ nodeVersion: e.target.value })} className={heroFieldClass}>
{NODE_VERSIONS.map((v) => <option key={v} value={v} className="text-neutral-900">{v}</option>)} {NODE_VERSIONS.map((v) => <option key={v} value={v} className="text-neutral-900">{v}</option>)}
</select> </select>
</div> </div>
<div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur"> <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
<Server size={17} className="mb-3 text-cyan-200" /> <Server size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
<p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400"> <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Web server Web server
</p> </p>
<select <select
@@ -307,9 +307,9 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
</select> </select>
</div> </div>
<div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur"> <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
<div className="mb-3 flex items-center justify-between"> <div className="mb-3 flex items-center justify-between">
<Zap size={17} className="text-cyan-200" /> <Zap size={17} className="text-cyan-600 dark:text-cyan-200" />
<button <button
type="button" type="button"
role="switch" role="switch"
@@ -321,7 +321,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
} }
className={clsx( className={clsx(
'relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-50', 'relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-50',
project.xdebug_enabled ? 'bg-cyan-500' : 'bg-white/15' project.xdebug_enabled ? 'bg-cyan-500' : 'bg-neutral-300 dark:bg-white/15'
)} )}
> >
<span <span
@@ -332,8 +332,8 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
/> />
</button> </button>
</div> </div>
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">Xdebug</p> <p className="text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Xdebug</p>
<p className="mt-1 truncate text-sm font-semibold text-white"> <p className="mt-1 truncate text-sm font-semibold text-neutral-900 dark:text-white">
{project.xdebug_enabled ? 'Enabled' : 'Off'} {project.xdebug_enabled ? 'Enabled' : 'Off'}
</p> </p>
</div> </div>
src/renderer/src/components/settings/SettingsModal.tsx
+1 -2
View File
@@ -4,8 +4,7 @@ import { useThemeStore, type Theme } from '../../stores/themeStore'
const THEMES: { value: Theme; label: string }[] = [ const THEMES: { value: Theme; label: string }[] = [
{ value: 'light', label: 'Light' }, { value: 'light', label: 'Light' },
{ value: 'dark', label: 'Dark' }, { value: 'dark', label: 'Dark' }
{ value: 'system', label: 'System' }
] ]
const SHORTCUTS = [ const SHORTCUTS = [
src/renderer/src/hooks/useAppliedTheme.ts
+2 -15
View File
@@ -1,7 +1,7 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import { useThemeStore } from '../stores/themeStore' import { useThemeStore } from '../stores/themeStore'
// Applies the resolved theme (light/dark/system) to <html class="dark">, // Applies the selected light/dark theme to <html class="dark">,
// which is what the `@custom-variant dark` rule in main.css keys off. Must // which is what the `@custom-variant dark` rule in main.css keys off. Must
// run somewhere mounted once near the app root. // run somewhere mounted once near the app root.
export function useAppliedTheme(): void { export function useAppliedTheme(): void {
@@ -9,19 +9,6 @@ export function useAppliedTheme(): void {
useEffect(() => { useEffect(() => {
const root = document.documentElement const root = document.documentElement
const media = window.matchMedia('(prefers-color-scheme: dark)') root.classList.toggle('dark', theme === 'dark')
const apply = (): void => {
const isDark = theme === 'dark' || (theme === 'system' && media.matches)
root.classList.toggle('dark', isDark)
}
apply()
if (theme === 'system') {
media.addEventListener('change', apply)
return () => media.removeEventListener('change', apply)
}
return undefined
}, [theme]) }, [theme])
} }
src/renderer/src/stores/themeStore.ts
+10 -3
View File
@@ -1,7 +1,7 @@
import { create } from 'zustand' import { create } from 'zustand'
import { persist } from 'zustand/middleware' import { persist } from 'zustand/middleware'
export type Theme = 'light' | 'dark' | 'system' export type Theme = 'light' | 'dark'
interface ThemeState { interface ThemeState {
theme: Theme theme: Theme
@@ -11,11 +11,18 @@ interface ThemeState {
export const useThemeStore = create<ThemeState>()( export const useThemeStore = create<ThemeState>()(
persist<ThemeState>( persist<ThemeState>(
(set) => ({ (set) => ({
theme: 'system', theme: 'dark',
setTheme: (theme) => { setTheme: (theme) => {
set({ theme }) set({ theme })
} }
}), }),
{ name: 'aurora-dockside-theme' } {
name: 'aurora-dockside-theme',
version: 1,
migrate: (persisted) => {
const previous = persisted as Partial<ThemeState>
return { ...previous, theme: previous.theme === 'light' ? 'light' : 'dark' } as ThemeState
}
}
) )
) )