diff --git a/backend/wordmodels/neighbor_network.py b/backend/wordmodels/neighbor_network.py
index 7ccbfae19..1f58d4cb3 100644
--- a/backend/wordmodels/neighbor_network.py
+++ b/backend/wordmodels/neighbor_network.py
@@ -95,7 +95,6 @@ def _graph_vega_doc(timeframes, nodes, links):
         "height": 500,
         "padding": 0,
         "autosize": "none",
-
         "signals": [
             { "name": "cx", "update": "width / 2" },
             { "name": "cy", "update": "height / 2" },
@@ -154,7 +153,14 @@ def _graph_vega_doc(timeframes, nodes, links):
                 "on": [
                     {"events": {"signal": "fix"}, "update": "fix && fix.length"}
                 ]
-            }
+            },
+            {
+                'name': 'theme',
+                'description': 'Current site theme (light/dark)',
+                'bind': {
+                    'element': '#current-theme',
+                }
+            },
         ],
 
         "data": [
@@ -181,13 +187,13 @@ def _graph_vega_doc(timeframes, nodes, links):
                 ]
             }
         ],
-
         "scales": [
             {
                 'name': 'link-color',
                 'type': 'linear',
                 'domain': {"data": "link-data", "field": "value"},
                 'range': {'scheme': 'greys'},
+                'reverse': { 'signal': 'theme === "dark"' },
             },
             {
                 'name': 'text-weight',
@@ -196,13 +202,11 @@ def _graph_vega_doc(timeframes, nodes, links):
                 'range': ['bold', 'normal'],
             }
         ],
-
         "marks": [
             {
                 "name": "nodes",
                 "type": "text",
                 "zindex": 1,
-
                 "from": {"data": "node-data"},
                 "on": [
                     {
@@ -218,7 +222,6 @@ def _graph_vega_doc(timeframes, nodes, links):
                 "encode": {
                     "enter": {
                         "fontSize": {"value": 15},
-                        "fill": {"value": "black"},
                         "text": {"field": "term"},
                         "baseline": {"value": "middle"},
                         "align": {"value": "center"},
@@ -227,7 +230,8 @@ def _graph_vega_doc(timeframes, nodes, links):
                         },
                     },
                     "update": {
-                        "cursor": {"value": "pointer"}
+                        "cursor": {"value": "pointer"},
+                        "fill": {'signal': 'theme === "dark" ? "white" : "black"'},
                     },
                 },
                 "transform": [
diff --git a/documentation/Styling.md b/documentation/Styling.md
new file mode 100644
index 000000000..50fe4dcea
--- /dev/null
+++ b/documentation/Styling.md
@@ -0,0 +1,67 @@
+# Styling
+
+This document covers CSS styling for the frontend.
+
+Textcavator uses the CSS framework [bulma](https://bulma.io/documentation/).
+
+Initial and derived variables from bulma are customised in [_utilities.css](/frontend/src/_utilities.scss). This file only defines variables and mixins and can be imported in component stylesheets. [styles.csss](/frontend/src/styles.scss) includes site-wide selectors.
+
+## Dark mode
+
+Dark mode is managed by the [ThemeService](/frontend/src/app/services/theme.service.ts).
+
+The service sets `data-theme="dark"` / `data-theme="light"` on the HTML root node, which is used by CSS selectors. If you need to observe the theme in a component, you can also use `ThemeService.theme$`.
+
+## Other libraries
+
+Several other libraries are used to provide components, visualisations, etc. These are often customised to fit the site theme and/or adapt to dark mode.
+
+## PrimeNG components
+
+We use several components from [primeNG](https://v19.primeng.org/). [primeng-theme.ts](/frontend/src/app/primeng-theme.ts) defines the preset to customise primeNG styles, mostly using bulma CSS variables.
+
+## Chart.js
+
+[select-color.ts](/frontend/src/app/utils/select-color.ts) defines the colour palettes for data visualisations and a utility function to select the nth colour. There are several palettes; the default is chosen to fit the site theme. The [palette selector](/frontend/src/app/visualization/visualization-footer/palette-select/palette-select.component.ts) lets users choose a preferred palette; the `VisualizationComponent` and `WordModelsComponent` provide the chosen palette as input to visualisation components.
+
+Chart.js has no built-in "dark mode". The `ThemeService` adjusts several defaults to get readable charts in dark mode, and updates all chart instances when the theme changes.
+
+## Vega
+
+To let a Vega visualisation adapt to dark/light mode, relevant colours should depend on a signal.
+
+Add the following signal in your vega document:
+
+```json
+{
+    "name": "theme",
+    "description": "Current site theme (light/dark)",
+    "bind": { "element": "#current-theme" }
+}
+```
+
+The value of the `theme` signal will be `"dark"` or `"light"`. When you define colours in your document, let theme depend on this signal, e.g. with a mark like this:
+
+```json
+{
+    "marks": [
+        {
+            "type": "text",
+            // ...
+            "encode": {
+                "update": {
+                    "fill": {"signal": "theme === \"dark\" ? \"white\" : \"black\""}
+                },
+            }
+        },
+    ]
+}
+```
+
+When you display the visualisation, include a [theme indicator](/frontend/src/app/visualization/theme-indicator.directive.ts) on your page like this:
+
+```html
+<input iaThemeIndicator >
+```
+
+The Vega graph will bind the `theme` signal to the value of this element. The element will not be visible to users.
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 41ae577ef..8c9e97b63 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -51,6 +51,7 @@ import { MatomoConfig, matomoImports } from './routing/matomo';
 import { stylePreset } from './primeng-theme';
 import { CoreModule } from './core/core.module';
 
+
 export const appRoutes: Routes = [
     {
         path: 'search/:corpus',
diff --git a/frontend/src/app/core/footer/footer.component.html b/frontend/src/app/core/footer/footer.component.html
index eda42927f..ad1c9af2c 100644
--- a/frontend/src/app/core/footer/footer.component.html
+++ b/frontend/src/app/core/footer/footer.component.html
@@ -6,7 +6,12 @@
                     <strong>Textcavator is developed by </strong>
                 </p>
                 <a href="https://cdh.uu.nl/centre-for-digital-humanities/research-software-lab/" target="_blank">
-                    <img src="assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_yellowwhite.jpg" alt="Centre for Digital Humanities, Utrecht University" width="400">
+                    <img [src]="
+                        (theme$ | async) == 'dark' ?
+                        'assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_white.png' :
+                        'assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_yellowwhite.jpg'"
+                    alt="Centre for Digital Humanities, Utrecht University"
+                    width="400">
                 </a>
             </div>
         <div *ngIf="environment.logos?.length" class="column">
diff --git a/frontend/src/app/core/footer/footer.component.ts b/frontend/src/app/core/footer/footer.component.ts
index 6ba02f98a..62a426967 100644
--- a/frontend/src/app/core/footer/footer.component.ts
+++ b/frontend/src/app/core/footer/footer.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { environment } from '@environments/environment';
+import { ThemeService } from '@services/theme.service';
 
 @Component({
     selector: 'ia-footer',
@@ -10,7 +11,9 @@ import { environment } from '@environments/environment';
 })
 export class FooterComponent {
     environment = environment as any;
+    theme$ = this.themeService.theme$;
 
-    constructor() { }
-
+    constructor(
+        private themeService: ThemeService
+    ) { }
 }
diff --git a/frontend/src/app/core/menu/menu.component.html b/frontend/src/app/core/menu/menu.component.html
index 6946e2b89..fc17ab6ef 100644
--- a/frontend/src/app/core/menu/menu.component.html
+++ b/frontend/src/app/core/menu/menu.component.html
@@ -58,6 +58,20 @@
                 </a>
             </div>
             <div class="navbar-end">
+                <!-- theme dropdown -->
+                <ia-menu-dropdown>
+                    <span iaMenuDropdownLabel>
+                        <fa-icon [icon]="currentThemeOption.icon"/>
+                    </span>
+                    @for (option of themeOptions; track option.value) {
+                        <a class="navbar-item" role="button" (click)="setTheme(option.value)">
+                            <span class="icon" aria-hidden><fa-icon [icon]="option.icon"/></span>
+                            <span>{{option.label}}</span>
+                        </a>
+                    }
+                </ia-menu-dropdown>
+
+                <!-- user dropdown -->
                 <ia-menu-dropdown *ngIf="user$ | async as user; else notLoggedIn">
                     <div iaMenuDropdownLabel>
                         <span class="icon" aria-hidden="true">
diff --git a/frontend/src/app/core/menu/menu.component.ts b/frontend/src/app/core/menu/menu.component.ts
index 19c1059d9..1a228b7f6 100644
--- a/frontend/src/app/core/menu/menu.component.ts
+++ b/frontend/src/app/core/menu/menu.component.ts
@@ -5,7 +5,9 @@ import { User } from '@models/index';
 import { environment } from '@environments/environment';
 import { AuthService } from '@services/auth.service';
 import { filter, map } from 'rxjs/operators';
-import { navIcons, userIcons } from '@shared/icons';
+import { navIcons, themeIcons, userIcons } from '@shared/icons';
+import * as _ from 'lodash';
+import { Theme, ThemeService } from '@app/services/theme.service';
 
 @Component({
     selector: 'ia-menu',
@@ -29,14 +31,28 @@ export class MenuComponent implements OnDestroy, OnInit {
     navIcons = navIcons;
     userIcons = userIcons;
 
+    themeOptions = [
+        { label: 'auto', icon: themeIcons.system, value: undefined },
+        { label: 'light', icon: themeIcons.light, value: Theme.LIGHT },
+        { label: 'dark', icon: themeIcons.dark, value: Theme.DARK },
+    ];
+
+
     private destroy$ = new Subject<void>();
 
     constructor(
         private authService: AuthService,
         private router: Router,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private themeService: ThemeService,
     ) {}
 
+    get currentThemeOption() {
+        return this.themeOptions.find(
+            option => option.value == this.themeService.selection$.value
+        );
+    }
+
     ngOnDestroy() {
         this.destroy$.next(undefined);
     }
@@ -50,6 +66,10 @@ export class MenuComponent implements OnDestroy, OnInit {
         this.menuOpen$.next(!this.menuOpen$.value);
     }
 
+    setTheme(value: Theme | undefined) {
+        this.themeService.selection$.next(value);
+    }
+
     public async logout() {
         this.authService.logout(true).subscribe();
     }
diff --git a/frontend/src/app/corpus-selection/corpus-selector/corpus-selector.component.scss b/frontend/src/app/corpus-selection/corpus-selector/corpus-selector.component.scss
index ae4d56636..72c3dcc52 100644
--- a/frontend/src/app/corpus-selection/corpus-selector/corpus-selector.component.scss
+++ b/frontend/src/app/corpus-selection/corpus-selector/corpus-selector.component.scss
@@ -36,6 +36,7 @@
 .title-divider {
     margin-top: 0px;
     margin-bottom: 1rem;
+    background-color: var(--bulma-primary-soft);
 }
 
 .columns .align-bottom {
diff --git a/frontend/src/app/services/theme.service.spec.ts b/frontend/src/app/services/theme.service.spec.ts
new file mode 100644
index 000000000..102938f6f
--- /dev/null
+++ b/frontend/src/app/services/theme.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+    let service: ThemeService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(ThemeService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});
diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts
new file mode 100644
index 000000000..b03031b26
--- /dev/null
+++ b/frontend/src/app/services/theme.service.ts
@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, combineLatest, fromEvent, map, Observable, startWith } from 'rxjs';
+import { Chart } from 'chart.js';
+import _ from 'lodash';
+import { environment } from '@environments/environment';
+
+export enum Theme {
+    DARK = 'dark',
+    LIGHT = 'light',
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ThemeService {
+    /** Theme selection from the user.
+     * `null` means no explicit preference, i.e. use  the system theme.
+     */
+    selection$ = new BehaviorSubject<Theme | null>(null);
+
+    /** Theme used by the site */
+    theme$: Observable<Theme>;
+
+    /** Default dark/light preference from the browser/OS */
+    private systemTheme$: Observable<Theme>;
+    private storageKey = 'theme';
+
+    constructor() {
+        const initialSelection = environment.runInIFrame ? Theme.LIGHT : this.readStoredSelection();
+        this.selection$.next(initialSelection);
+        this.selection$.subscribe((theme) => this.storeSelection(theme));
+
+        this.systemTheme$ = this.watchSystemTheme();
+        this.theme$ = combineLatest([this.selection$, this.systemTheme$]).pipe(
+            map(([selection, system]) => selection || system)
+        );
+        this.theme$.subscribe((theme) => this.applyTheme(theme));
+    }
+
+    private watchSystemTheme(): Observable<Theme> {
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        return fromEvent<MediaQueryListEvent>(query, 'change').pipe(
+            startWith(query),
+            map(list => list.matches ? Theme.DARK : Theme.LIGHT)
+        );
+    }
+
+    /** set theme in the site layout */
+    private applyTheme(theme: Theme) {
+        const root = (document.getRootNode() as Document).documentElement;
+        root.setAttribute('data-theme', theme);
+        this.applyChartJSTheme();
+    }
+
+    /** set chartjs defaults based on current style, and update active charts */
+    private applyChartJSTheme() {
+        const style = window.getComputedStyle(document.body);
+        Chart.defaults.color = () => style.getPropertyValue('--bulma-text-strong');
+        Chart.defaults.borderColor = () => style.getPropertyValue('--bulma-border');
+
+        const active = _.values(Chart.instances);
+        for (let chart of active) {
+            chart.update();
+        }
+    }
+
+    private readStoredSelection(): Theme | null {
+        const value = localStorage.getItem(this.storageKey);
+        if ([Theme.DARK, Theme.LIGHT].map(String).includes(value)) {
+            return value as Theme;
+        } else {
+            return null;
+        }
+    }
+
+    private storeSelection(theme: Theme | null): void {
+        if (theme) {
+            localStorage.setItem(this.storageKey, theme);
+        } else {
+            localStorage.removeItem(this.storageKey);
+        }
+    }
+}
diff --git a/frontend/src/app/shared/icons.ts b/frontend/src/app/shared/icons.ts
index 7ff5014a2..5897e4599 100644
--- a/frontend/src/app/shared/icons.ts
+++ b/frontend/src/app/shared/icons.ts
@@ -59,6 +59,9 @@ import {
     faArrowUp,
     faArrowDown,
     faRedo,
+    faCircleHalfStroke,
+    faMoon,
+    faSun,
 } from '@fortawesome/free-solid-svg-icons';
 
 type IconDefinition = SolidIconDefinition | RegularIconDefinition;
@@ -179,3 +182,9 @@ export const entityIcons: Icons = {
     organization: faBuilding,
     miscellaneous: faBookmark,
 }
+
+export const themeIcons: Icons = {
+    system: faCircleHalfStroke,
+    light: faSun,
+    dark: faMoon,
+}
diff --git a/frontend/src/app/visualization/map/map.component.html b/frontend/src/app/visualization/map/map.component.html
index 894ccc28e..5cc345052 100644
--- a/frontend/src/app/visualization/map/map.component.html
+++ b/frontend/src/app/visualization/map/map.component.html
@@ -1,3 +1,6 @@
 <div class="map-container">
     <div #vegaMap></div>
 </div>
+
+<input iaThemeIndicator >
+
diff --git a/frontend/src/app/visualization/map/map.component.ts b/frontend/src/app/visualization/map/map.component.ts
index d7e04f41f..b09e23e36 100644
--- a/frontend/src/app/visualization/map/map.component.ts
+++ b/frontend/src/app/visualization/map/map.component.ts
@@ -1,3 +1,4 @@
+/* eslint-disable quotes */
 import { Component, ElementRef, EventEmitter, Input, Output, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import embed, { VisualizationSpec } from 'vega-embed';
@@ -29,6 +30,17 @@ export class MapComponent implements OnChanges {
 
     isLoading$ = new BehaviorSubject<boolean>(false);
 
+    mapColors = {
+        landStroke: {
+            light: '#BDAE8A',
+            dark: '#6c5a46',
+        },
+        landFill: {
+            light: '#E5D3B3',
+            dark: '#4d3e2e',
+        },
+    };
+
     private mapDataResults: MapDataResults;
 
     constructor(
@@ -151,7 +163,14 @@ export class MapComponent implements OnChanges {
                         "events": { "signal": "delta" },
                         "update": "clamp(angles[1] + delta[1], -60, 60)"
                     }]
-                }
+                },
+                {
+                    'name': 'theme',
+                    'description': 'Current site theme (light/dark)',
+                    'bind': {
+                        'element': '#current-theme',
+                    }
+                },
             ],
 
             "projections": [
@@ -189,8 +208,10 @@ export class MapComponent implements OnChanges {
                     "encode": {
                         "enter": {
                             "strokeWidth": { "value": 0.75 },
-                            "fill": { "value": "#E5D3B3" },
-                            "stroke": { "value": "#BDAE8A" },
+                        },
+                        "update": {
+                            "fill": {'signal': `theme === "dark" ? "${this.mapColors.landFill.dark}" : "${this.mapColors.landFill.light}"`},
+                            "stroke": {'signal': `theme === "dark" ? "${this.mapColors.landStroke.dark}" : "${this.mapColors.landStroke.light}"`},
                         }
                     },
                     "transform": [
@@ -222,6 +243,7 @@ export class MapComponent implements OnChanges {
     }
 
 
+
     async renderChart(): Promise<void> {
         const spec = this.getVegaSpec();
         const aspectRatio = 2 / 3;
diff --git a/frontend/src/app/visualization/ngram/joyplot/joyplot.component.ts b/frontend/src/app/visualization/ngram/joyplot/joyplot.component.ts
index 1e1dc7979..d9bbf419c 100644
--- a/frontend/src/app/visualization/ngram/joyplot/joyplot.component.ts
+++ b/frontend/src/app/visualization/ngram/joyplot/joyplot.component.ts
@@ -28,7 +28,7 @@ export class JoyplotComponent implements OnChanges {
     chartOptions: ChartOptions;
     chart: Chart;
 
-    constructor() { }
+    constructor() {}
 
     get multipleTimeIntervals(): boolean {
         return this.timeLabels && this.timeLabels.length > 1;
diff --git a/frontend/src/app/visualization/theme-indicator.directive.ts b/frontend/src/app/visualization/theme-indicator.directive.ts
new file mode 100644
index 000000000..45342a26f
--- /dev/null
+++ b/frontend/src/app/visualization/theme-indicator.directive.ts
@@ -0,0 +1,37 @@
+import { DestroyRef, Directive, ElementRef, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Theme, ThemeService } from '@services/theme.service';
+
+
+/**
+ * Lets the host element function as an indicator of the site theme (light/dark). The
+ * element will set the theme as its value and fire an input event when the theme
+ * changes.
+ *
+ * Can be used to let Vega visualisations observe the site theme. The element will be
+ * hidden from the user.
+ */
+@Directive({
+    selector: 'input[iaThemeIndicator]',
+    standalone: false,
+    host: { id: 'current-theme', hidden: '' }
+})
+export class ThemeIndicatorDirective implements OnInit {
+    constructor(
+        private themeService: ThemeService,
+        private el: ElementRef,
+        private destroyRef: DestroyRef,
+    ) {}
+
+    ngOnInit() {
+        this.themeService.theme$.pipe(
+            takeUntilDestroyed(this.destroyRef),
+        ).subscribe(theme => this.setTheme(theme));
+    }
+
+    setTheme(theme: Theme) {
+        const el = this.el.nativeElement as HTMLInputElement;
+        el.value = theme;
+        el.dispatchEvent(new Event('input'));
+    }
+}
diff --git a/frontend/src/app/visualization/visualization.module.ts b/frontend/src/app/visualization/visualization.module.ts
index 1c57a0697..79bc3b121 100644
--- a/frontend/src/app/visualization/visualization.module.ts
+++ b/frontend/src/app/visualization/visualization.module.ts
@@ -23,6 +23,7 @@ import { VisualizationFooterComponent } from './visualization-footer/visualizati
 import { VisualizationComponent } from './visualization.component';
 import { WordcloudComponent } from './wordcloud/wordcloud.component';
 import { MapComponent } from './map/map.component';
+import { ThemeIndicatorDirective } from './theme-indicator.directive';
 
 
 @NgModule({ declarations: [
@@ -39,12 +40,14 @@ import { MapComponent } from './map/map.component';
         VisualizationComponent,
         PaletteSelectComponent,
         MapComponent,
+        ThemeIndicatorDirective,
     ],
     exports: [
         TermComparisonEditorComponent,
         VisualizationFooterComponent,
         FreqtableComponent,
         VisualizationComponent,
+        ThemeIndicatorDirective
     ], imports: [
         AutoCompleteModule,
         ChartModule,
diff --git a/frontend/src/app/word-models/neighbor-network/neighbor-network.component.html b/frontend/src/app/word-models/neighbor-network/neighbor-network.component.html
index dd2e7e55e..976591c0c 100644
--- a/frontend/src/app/word-models/neighbor-network/neighbor-network.component.html
+++ b/frontend/src/app/word-models/neighbor-network/neighbor-network.component.html
@@ -1,6 +1,8 @@
 <div class="block">
     <div #chart id="chart" [class.is-hidden]="asTable" [attr.aria-hidden]="asTable"></div>
 
+    <input iaThemeIndicator >
+
     <ia-freqtable [headers]="tableHeaders" [data]="data?.table"
         [class.is-hidden]="!asTable" [attr.aria-hidden]="!asTable" />
 </div>
diff --git a/frontend/src/app/word-models/neighbor-network/neighbor-network.component.ts b/frontend/src/app/word-models/neighbor-network/neighbor-network.component.ts
index 7aa5ae8c0..4636214b4 100644
--- a/frontend/src/app/word-models/neighbor-network/neighbor-network.component.ts
+++ b/frontend/src/app/word-models/neighbor-network/neighbor-network.component.ts
@@ -1,6 +1,7 @@
-import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { Corpus, FreqTableHeaders } from '@models';
 import { WordmodelsService } from '@services';
+import { Theme, ThemeService } from '@services/theme.service';
 import { BehaviorSubject } from 'rxjs';
 import embed from 'vega-embed';
 
@@ -36,7 +37,7 @@ export class NeighborNetworkComponent implements OnChanges {
             key: 'similarity',
             label: 'Similarity'
         }
-    ]
+    ];
 
     constructor(
         private wordModelsService: WordmodelsService,
diff --git a/frontend/src/assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_white.png b/frontend/src/assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_white.png
new file mode 100644
index 000000000..a85b8a671
Binary files /dev/null and b/frontend/src/assets/UU-CDH_logo_EN_def_UU_CDH_logo_EN_white.png differ
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index a378acedb..5a2b6d119 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -273,6 +273,14 @@ button {
     }
 }
 
+.input, .select {
+    &:focus {
+        outline: auto !important;
+        border: inherit !important;
+        box-shadow: inherit !important;
+    }
+}
+
 
 // primeNG
 
@@ -318,3 +326,30 @@ button {
         }
     }
 }
+
+
+// dark mode
+
+[data-theme="dark"] {
+    // increase contrast in dark mode
+
+    --bulma-border-l: 40%;
+    --bulma-background-l: 30%;
+    --bulma-shadow: 0 0 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3);
+
+    --bulma-scheme-main-l: 5%;
+    --bulma-scheme-main-bis-l: 15%;
+    --bulma-scheme-main-ter-l: 20%;
+    --bulma-text-l: 85%;
+    --bulma-text-weak-l: 70%;
+    --bulma-link-on-scheme-l: 77%;
+    --bulma-link-text: hsl(var(--bulma-link-h), 80%, var(--bulma-link-on-scheme-l));
+
+    .control, .input, .select {
+        --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.5);
+    }
+
+    .navbar.is-primary {
+        --bulma-navbar-dropdown-item-background-l: 20%;
+    }
+}