diff --git a/src/app/App.tsx b/src/app/App.tsx
index b11d57a..f9c133e 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -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>
diff --git a/src/styles.css b/src/styles.css
index b78484a..a479c9e 100644
--- a/src/styles.css
+++ b/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;