feat: add dark theme setting
This commit is contained in:
@@ -60,6 +60,7 @@ type RequestStatus = 'idle' | 'loading' | 'success' | 'error';
|
||||
type NearbyChoice = typeof noNearbyChoice | typeof customChoice | string;
|
||||
type RadiusChoice = string;
|
||||
type QueryMode = 'generated' | 'custom';
|
||||
type AppTheme = 'light' | 'dark';
|
||||
|
||||
export function App() {
|
||||
const [category, setCategory] = useState(searchPresetCategories[0]);
|
||||
@@ -81,6 +82,7 @@ export function App() {
|
||||
const [results, setResults] = useState<ParsedOsmResult[]>([]);
|
||||
const [selectedResultId, setSelectedResultId] = useState<string | null>(null);
|
||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||
const [appTheme, setAppTheme] = useState<AppTheme>('light');
|
||||
const [mapStyleId, setMapStyleId] = useState<MapStyleId>('osm-standard');
|
||||
const [showAdvanced, setShowAdvanced] = useState(true);
|
||||
const [showResultLabels, setShowResultLabels] = useState(false);
|
||||
@@ -353,7 +355,7 @@ export function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<div className={appTheme === 'dark' ? 'app-shell theme-dark' : 'app-shell'}>
|
||||
<aside className="control-panel" aria-label="Search controls">
|
||||
<header className="brand-header">
|
||||
<div>
|
||||
@@ -744,6 +746,22 @@ export function App() {
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section className="settings-section" aria-labelledby="appearance-settings-heading">
|
||||
<div className="section-heading">
|
||||
<h3 id="appearance-settings-heading">Appearance</h3>
|
||||
</div>
|
||||
<SelectField
|
||||
id="app-theme"
|
||||
label="Theme"
|
||||
value={appTheme}
|
||||
options={[
|
||||
{ value: 'light', label: 'Light' },
|
||||
{ value: 'dark', label: 'Dark' },
|
||||
]}
|
||||
onChange={(value) => setAppTheme(value as AppTheme)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="settings-section" aria-labelledby="map-settings-heading">
|
||||
<div className="section-heading">
|
||||
<h3 id="map-settings-heading">Map settings</h3>
|
||||
|
||||
267
src/styles.css
267
src/styles.css
@@ -1118,6 +1118,273 @@ a {
|
||||
box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
color: #e5ede8;
|
||||
background: #101816;
|
||||
}
|
||||
|
||||
.theme-dark .control-panel,
|
||||
.theme-dark .settings-modal {
|
||||
border-color: #2c3d38;
|
||||
background: #121c19;
|
||||
}
|
||||
|
||||
.theme-dark .brand-header h1,
|
||||
.theme-dark .section-heading h2,
|
||||
.theme-dark .section-heading h3,
|
||||
.theme-dark .panel-heading h2,
|
||||
.theme-dark .settings-header h2,
|
||||
.theme-dark .result-title,
|
||||
.theme-dark input,
|
||||
.theme-dark textarea,
|
||||
.theme-dark select {
|
||||
color: #e5ede8;
|
||||
}
|
||||
|
||||
.theme-dark .brand-header p,
|
||||
.theme-dark .section-heading span,
|
||||
.theme-dark .field-note,
|
||||
.theme-dark .viewport-note,
|
||||
.theme-dark .panel-heading span,
|
||||
.theme-dark .result-meta,
|
||||
.theme-dark .tag-list,
|
||||
.theme-dark .settings-header p {
|
||||
color: #9aaca5;
|
||||
}
|
||||
|
||||
.theme-dark label,
|
||||
.theme-dark legend {
|
||||
color: #c4d2cc;
|
||||
}
|
||||
|
||||
.theme-dark button,
|
||||
.theme-dark .select-trigger,
|
||||
.theme-dark .checkbox-grid label,
|
||||
.theme-dark .segmented-control label,
|
||||
.theme-dark .query-mode-control label,
|
||||
.theme-dark .settings-toggle-grid label,
|
||||
.theme-dark .compact-button {
|
||||
border-color: #354943;
|
||||
background: linear-gradient(#1d2a26, #17231f);
|
||||
color: #e5ede8;
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 22%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 4%);
|
||||
}
|
||||
|
||||
.theme-dark button:hover:not(:disabled),
|
||||
.theme-dark .select-trigger:hover:not(:disabled),
|
||||
.theme-dark .checkbox-grid label:hover,
|
||||
.theme-dark .segmented-control label:hover,
|
||||
.theme-dark .settings-toggle-grid label:hover {
|
||||
border-color: #55756b;
|
||||
background: linear-gradient(#24342f, #1b2925);
|
||||
box-shadow: 0 2px 10px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.theme-dark .primary-button {
|
||||
border-color: #58a898;
|
||||
background: linear-gradient(180deg, #2f8e7c 0%, #226f62 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-dark input,
|
||||
.theme-dark textarea,
|
||||
.theme-dark select {
|
||||
border-color: #354943;
|
||||
background: #101816;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgb(0 0 0 / 28%),
|
||||
0 1px 0 rgb(255 255 255 / 3%);
|
||||
}
|
||||
|
||||
.theme-dark input:hover:not(:disabled),
|
||||
.theme-dark textarea:hover:not(:disabled),
|
||||
.theme-dark select:hover:not(:disabled) {
|
||||
border-color: #55756b;
|
||||
background: #14201c;
|
||||
}
|
||||
|
||||
.theme-dark input:disabled,
|
||||
.theme-dark textarea:disabled,
|
||||
.theme-dark select:disabled {
|
||||
background: #1a2522;
|
||||
color: #7f918b;
|
||||
}
|
||||
|
||||
.theme-dark .select-trigger[aria-expanded="true"] {
|
||||
border-color: #58a898;
|
||||
background: #101816;
|
||||
box-shadow:
|
||||
0 0 0 3px rgb(88 168 152 / 18%),
|
||||
0 10px 28px rgb(0 0 0 / 28%);
|
||||
}
|
||||
|
||||
.theme-dark .select-chevron {
|
||||
border-color: #b7c7c1;
|
||||
}
|
||||
|
||||
.theme-dark .select-menu {
|
||||
border-color: #3b524b;
|
||||
background: #121c19;
|
||||
box-shadow:
|
||||
0 18px 42px rgb(0 0 0 / 42%),
|
||||
0 2px 8px rgb(0 0 0 / 28%);
|
||||
}
|
||||
|
||||
.theme-dark .select-option {
|
||||
color: #e5ede8;
|
||||
}
|
||||
|
||||
.theme-dark .select-option:hover,
|
||||
.theme-dark .select-option:focus-visible {
|
||||
background: #1c302a;
|
||||
}
|
||||
|
||||
.theme-dark .select-option-selected {
|
||||
background: #24473f;
|
||||
color: #dff5ef;
|
||||
}
|
||||
|
||||
.theme-dark .select-group + .select-group,
|
||||
.theme-dark .select-option + .select-group,
|
||||
.theme-dark .search-section,
|
||||
.theme-dark .settings-header,
|
||||
.theme-dark .settings-section,
|
||||
.theme-dark .results-panel {
|
||||
border-color: #2c3d38;
|
||||
}
|
||||
|
||||
.theme-dark .select-group-label {
|
||||
color: #8ea29a;
|
||||
}
|
||||
|
||||
.theme-dark .checkbox-grid input,
|
||||
.theme-dark .segmented-control input,
|
||||
.theme-dark .query-mode-control input,
|
||||
.theme-dark .settings-toggle-grid input {
|
||||
border-color: #55756b;
|
||||
background: #0e1513;
|
||||
}
|
||||
|
||||
.theme-dark .checkbox-grid input:checked,
|
||||
.theme-dark .segmented-control input:checked,
|
||||
.theme-dark .query-mode-control input:checked,
|
||||
.theme-dark .settings-toggle-grid input:checked {
|
||||
border-color: #58a898;
|
||||
background: #2f8e7c;
|
||||
}
|
||||
|
||||
.theme-dark .checkbox-grid label:has(input:checked),
|
||||
.theme-dark .segmented-control label:has(input:checked),
|
||||
.theme-dark .query-mode-control label:has(input:checked),
|
||||
.theme-dark .settings-toggle-grid label:has(input:checked) {
|
||||
border-color: #58a898;
|
||||
background: #1f3b35;
|
||||
box-shadow: inset 0 0 0 1px rgb(88 168 152 / 20%);
|
||||
}
|
||||
|
||||
.theme-dark .stepper-buttons {
|
||||
border-color: #354943;
|
||||
background: #1a2522;
|
||||
}
|
||||
|
||||
.theme-dark .stepper-button:hover:not(:disabled) {
|
||||
background: #233630;
|
||||
}
|
||||
|
||||
.theme-dark .stepper-up::before {
|
||||
border-bottom-color: #b7c7c1;
|
||||
}
|
||||
|
||||
.theme-dark .stepper-down::before {
|
||||
border-top-color: #b7c7c1;
|
||||
}
|
||||
|
||||
.theme-dark .query-panel-separated {
|
||||
border-color: #2c3d38;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(28 48 42 / 70%) 0%, rgb(18 28 25 / 0%) 100%);
|
||||
}
|
||||
|
||||
.theme-dark .query-panel-separated::before {
|
||||
background: #121c19;
|
||||
color: #9aaca5;
|
||||
}
|
||||
|
||||
.theme-dark .query-actions,
|
||||
.theme-dark .active-filter-list li,
|
||||
.theme-dark .results-list li {
|
||||
border-color: #2c3d38;
|
||||
background: #17231f;
|
||||
}
|
||||
|
||||
.theme-dark .query-preview,
|
||||
.theme-dark .custom-query-input {
|
||||
border-color: #2c3d38;
|
||||
background: #09110f;
|
||||
color: #dff5ef;
|
||||
}
|
||||
|
||||
.theme-dark .result-row:hover:not(:disabled),
|
||||
.theme-dark .result-row-selected {
|
||||
background: #1f3b35;
|
||||
}
|
||||
|
||||
.theme-dark .results-panel {
|
||||
background: #111a18;
|
||||
}
|
||||
|
||||
.theme-dark .empty-state {
|
||||
border-color: #3b524b;
|
||||
color: #9aaca5;
|
||||
}
|
||||
|
||||
.theme-dark .message {
|
||||
border-left-color: #58a898;
|
||||
background: #17342e;
|
||||
color: #d8eee8;
|
||||
}
|
||||
|
||||
.theme-dark .error-message {
|
||||
border-left-color: #d37a68;
|
||||
background: #3a211e;
|
||||
color: #f2c7bd;
|
||||
}
|
||||
|
||||
.theme-dark .modal-backdrop {
|
||||
background: rgb(0 0 0 / 58%);
|
||||
}
|
||||
|
||||
.theme-dark .map-view .leaflet-control-zoom {
|
||||
border-color: #2c3d38;
|
||||
box-shadow:
|
||||
0 10px 24px rgb(0 0 0 / 34%),
|
||||
0 2px 6px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.theme-dark .map-view .leaflet-control-zoom a {
|
||||
border-color: #2c3d38;
|
||||
background: linear-gradient(#1d2a26, #17231f);
|
||||
color: #e5ede8;
|
||||
}
|
||||
|
||||
.theme-dark .map-view .leaflet-control-zoom a:hover,
|
||||
.theme-dark .map-view .leaflet-control-zoom a:focus-visible {
|
||||
background: #1f3b35;
|
||||
color: #dff5ef;
|
||||
}
|
||||
|
||||
.theme-dark .map-view .leaflet-tooltip {
|
||||
border-color: #2c3d38;
|
||||
background: #121c19;
|
||||
color: #e5ede8;
|
||||
}
|
||||
|
||||
.theme-dark .map-view .leaflet-tooltip::before {
|
||||
border-top-color: #121c19;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user