diff --git a/public/_locales/ca/messages.json b/public/_locales/ca/messages.json
index 2bf06f5..f0b08bf 100644
--- a/public/_locales/ca/messages.json
+++ b/public/_locales/ca/messages.json
@@ -95,6 +95,13 @@
       "description": "Dibuixa gràfics sobre les etiquetes utilitzant els colors d'etiquetes corresponents",
       "label": "Etiqueta Colors"
     },
+    "theme": {
+      "dark": "Fosc",
+      "description": "Canvia entre l'esquema de colors fosc i clar",
+      "label": "Mode fosc",
+      "light": "Clar",
+      "system": "Sistema"
+    },
     "title": "Opcions"
   },
   "popup": {
diff --git a/public/_locales/cs/messages.json b/public/_locales/cs/messages.json
index fe731d0..420dbc4 100644
--- a/public/_locales/cs/messages.json
+++ b/public/_locales/cs/messages.json
@@ -95,6 +95,13 @@
       "description": "Kreslit grafy o značkách odpovídajícími barvami",
       "label": "Barvy značek"
     },
+    "theme": {
+      "dark": "Tmavý",
+      "description": "Přepíná mezi tmavým a světlým barevným schématem",
+      "label": "Tmavý režím",
+      "light": "Světlý",
+      "system": "Systém"
+    },
     "title": "Možnosti"
   },
   "popup": {
diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
index 043053f..bf2d0d1 100644
--- a/public/_locales/de/messages.json
+++ b/public/_locales/de/messages.json
@@ -95,6 +95,13 @@
       "description": "Diagramme zu Schlagworten sollen die entsprechenden Schlagwortfarben nutzen ",
       "label": "Farben von Schlagworten"
     },
+    "theme": {
+      "dark": "Dunkel",
+      "description": "Auswahl eines hellen oder dunklen Farbschemas",
+      "label": "Nachtmodus",
+      "light": "Hell",
+      "system": "System"
+    },
     "title": "Einstellungen"
   },
   "popup": {
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1f6aef9..d77a8ce 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -31,9 +31,12 @@
       "label": "Clear Cache",
       "size": "Cache size is {0}"
     },
-    "darkMode": {
+    "theme": {
       "description": "Switch between dark and light color scheme",
-      "label": "Dark Mode"
+      "system": "System",
+      "light": "Light",
+      "dark": "Dark",
+      "label": "Theme"
     },
     "headings": {
       "appearance": "Appearance & Experience",
diff --git a/public/_locales/es/messages.json b/public/_locales/es/messages.json
index a6ed1df..7a2cc61 100644
--- a/public/_locales/es/messages.json
+++ b/public/_locales/es/messages.json
@@ -95,6 +95,13 @@
       "description": "Dibuja gráficos sobre etiquetas utilizando los colores de etiqueta correspondientes",
       "label": "Colores de etiqueta"
     },
+    "theme": {
+      "dark": "Oscuro",
+      "description": "Cambiar entre esquema de color obscuro y claro",
+      "label": "Modo obscuro",
+      "light": "Claro",
+      "system": "Sistema"
+    },
     "title": "Opciones"
   },
   "popup": {
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
index 4e97c31..f08898c 100644
--- a/public/_locales/fr/messages.json
+++ b/public/_locales/fr/messages.json
@@ -95,6 +95,13 @@
       "description": "Dessinez des graphiques sur les étiquettes en utilisant les couleurs d'étiquettes correspondantes.",
       "label": "Couleurs de l'étiquette"
     },
+    "theme": {
+      "dark": "Sombre",
+      "description": "Passer du mode sombre au mode clair",
+      "label": "Mode sombre",
+      "light": "Clair",
+      "system": "Système"
+    },
     "title": "Options"
   },
   "popup": {
diff --git a/public/_locales/gl/messages.json b/public/_locales/gl/messages.json
index 6f9ec35..59155d6 100644
--- a/public/_locales/gl/messages.json
+++ b/public/_locales/gl/messages.json
@@ -95,6 +95,13 @@
       "description": "Debuxa gráficos sobre as etiquetas utilizando as cores correspondentes",
       "label": "Etiqueta Cores"
     },
+    "theme": {
+      "dark": "Escuro",
+      "description": "Cambia entre o modo escuro e claro",
+      "label": "Modo escuro",
+      "light": "Claro",
+      "system": "Sistema"
+    },
     "title": "Opcións"
   },
   "popup": {
diff --git a/public/_locales/hi/messages.json b/public/_locales/hi/messages.json
index 844ea6f..ff7854d 100644
--- a/public/_locales/hi/messages.json
+++ b/public/_locales/hi/messages.json
@@ -95,6 +95,13 @@
       "description": "संबंधित टैग रंगों का उपयोग करके टैग के बारे में चार्ट बनाएं",
       "label": "टैग रंग"
     },
+    "theme": {
+      "dark": "गहरा",
+      "description": "डार्क और लाइट कलर स्कीम के बीच स्विच करें",
+      "label": "डार्क मोड",
+      "light": "हल्का",
+      "system": "सिस्टम"
+    },
     "title": "विकल्प"
   },
   "popup": {
diff --git a/public/_locales/hu/messages.json b/public/_locales/hu/messages.json
index e1c93b7..922d107 100644
--- a/public/_locales/hu/messages.json
+++ b/public/_locales/hu/messages.json
@@ -95,6 +95,13 @@
       "description": "Ábrázolás rajzolása a címke színeivel",
       "label": "Címke színe"
     },
+    "theme": {
+      "dark": "Sötét",
+      "description": "Sötét és világos színvilág váltása",
+      "label": "Sötét mód",
+      "light": "Világos",
+      "system": "Rendszer"
+    },
     "title": "Beállítások"
   },
   "popup": {
diff --git a/public/_locales/id/messages.json b/public/_locales/id/messages.json
index 922ff59..5699b48 100644
--- a/public/_locales/id/messages.json
+++ b/public/_locales/id/messages.json
@@ -95,6 +95,13 @@
       "description": "Menggambar bagan tentang tag menggunakan warna tag yang sesuai",
       "label": "Warna Tag"
     },
+    "theme": {
+      "dark": "Gelap",
+      "description": "Beralih antara skema warna gelap dan terang",
+      "label": "Mode Gelap",
+      "light": "Terang",
+      "system": "Sistem"
+    },
     "title": "Opsi"
   },
   "popup": {
diff --git a/public/_locales/it/messages.json b/public/_locales/it/messages.json
index 66abdb1..3d0b30a 100644
--- a/public/_locales/it/messages.json
+++ b/public/_locales/it/messages.json
@@ -95,6 +95,13 @@
       "description": "Disegna grafici sui tag utilizzando i colori dei tag corrispondenti",
       "label": "Colori tag"
     },
+    "theme": {
+      "dark": "Scuro",
+      "description": "Passa dalla combinazione di colori chiari e scuri",
+      "label": "Modalità scura",
+      "light": "Chiaro",
+      "system": "Sistema"
+    },
     "title": "Opzioni"
   },
   "popup": {
diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
index 8f9fcbb..d05330a 100644
--- a/public/_locales/ja/messages.json
+++ b/public/_locales/ja/messages.json
@@ -95,6 +95,13 @@
       "description": "対応するタグの色を使ってタグのチャートを描く",
       "label": "タグの色"
     },
+    "theme": {
+      "dark": "ダーク",
+      "description": "ダークスキームかライトスキームを選択",
+      "label": "ダークとライトのスキーム",
+      "light": "ライト",
+      "system": "システム"
+    },
     "title": "オプション"
   },
   "popup": {
diff --git a/public/_locales/nl/messages.json b/public/_locales/nl/messages.json
index 6de73d0..6a9e144 100644
--- a/public/_locales/nl/messages.json
+++ b/public/_locales/nl/messages.json
@@ -95,6 +95,13 @@
       "description": "Teken grafieken over tags met overeenkomstige tag kleuren",
       "label": "Tag Kleuren"
     },
+    "theme": {
+      "dark": "Donker",
+      "description": "Schakel tussen donker en licht kleurenschema",
+      "label": "Donkere modus",
+      "light": "Licht",
+      "system": "Systeem"
+    },
     "title": "Opties"
   },
   "popup": {
diff --git a/public/_locales/pl/messages.json b/public/_locales/pl/messages.json
index 0523df9..1c6a177 100644
--- a/public/_locales/pl/messages.json
+++ b/public/_locales/pl/messages.json
@@ -95,6 +95,13 @@
       "description": "Rysuj wykresy dotyczące znaczników, używając odpowiednich kolorów znaczników",
       "label": "Tag Kolory"
     },
+    "theme": {
+      "dark": "Ciemny",
+      "description": "Przełączanie pomiędzy ciemnym i jasnym schematem kolorów",
+      "label": "tryb ciemny",
+      "light": "Jasny",
+      "system": "System"
+    },
     "title": "Opcje"
   },
   "popup": {
diff --git a/public/_locales/pt-BR/messages.json b/public/_locales/pt-BR/messages.json
index a4a28e5..2ebaa40 100644
--- a/public/_locales/pt-BR/messages.json
+++ b/public/_locales/pt-BR/messages.json
@@ -95,6 +95,13 @@
       "description": "Desenha gráficos sobre etiquetas usando as cores das etiquetas correspondentes",
       "label": "Cores de Etiquetas"
     },
+    "theme": {
+      "dark": "Escuro",
+      "description": "Alterna entre os temas claro e escuro",
+      "label": "Tema Escuro",
+      "light": "Claro",
+      "system": "Sistema"
+    },
     "title": "Opções"
   },
   "popup": {
diff --git a/public/_locales/pt/messages.json b/public/_locales/pt/messages.json
index e0c2665..298c0c1 100644
--- a/public/_locales/pt/messages.json
+++ b/public/_locales/pt/messages.json
@@ -95,6 +95,13 @@
       "description": "Desenhe gráficos sobre as etiquetas usando as cores das etiquetas correspondentes",
       "label": "Cores da etiqueta"
     },
+    "theme": {
+      "dark": "Escuro",
+      "description": "Alternar entre modo escuro e modo claro",
+      "label": "Modo Escuro",
+      "light": "Claro",
+      "system": "Sistema"
+    },
     "title": "Opções"
   },
   "popup": {
diff --git a/public/_locales/ru/messages.json b/public/_locales/ru/messages.json
index d0e8b18..1abf02b 100644
--- a/public/_locales/ru/messages.json
+++ b/public/_locales/ru/messages.json
@@ -95,6 +95,13 @@
       "description": "Строить диаграммы о тегах, используя соответствующие цвета тегов",
       "label": "Цвета тегов"
     },
+    "theme": {
+      "dark": "Темный",
+      "description": "Переключение между светлой и темной темами",
+      "label": "Тёмная тема",
+      "light": "Светлая",
+      "system": "Система"
+    },
     "title": "Настройки"
   },
   "popup": {
diff --git a/public/_locales/sk/messages.json b/public/_locales/sk/messages.json
index d0c783b..74c1aea 100644
--- a/public/_locales/sk/messages.json
+++ b/public/_locales/sk/messages.json
@@ -95,6 +95,13 @@
       "description": "Vykreslí grafy o popisoch pomocou zodpovedajúcich farieb popisov",
       "label": "Farby popisu"
     },
+    "theme": {
+      "dark": "Tmavá",
+      "description": "Prepínanie medzi tmavými a svetlými farebnými schémami",
+      "label": "Tmavý režim",
+      "light": "Svetlá",
+      "system": "Systém"
+    },
     "title": "Možnosti"
   },
   "popup": {
diff --git a/public/_locales/sv/messages.json b/public/_locales/sv/messages.json
index e2d56fc..5e24c08 100644
--- a/public/_locales/sv/messages.json
+++ b/public/_locales/sv/messages.json
@@ -95,6 +95,13 @@
       "description": "Rita diagram om taggar med hjälp av motsvarande taggfärger",
       "label": "Taggfärger"
     },
+    "theme": {
+      "dark": "Mörk",
+      "description": "Växla mellan mörkt och ljust färgschema",
+      "label": "Mörkt Läge",
+      "light": "Ljus",
+      "system": "System"
+    },
     "title": "Alternativ"
   },
   "popup": {
diff --git a/public/_locales/th/messages.json b/public/_locales/th/messages.json
index f3a122c..8709873 100644
--- a/public/_locales/th/messages.json
+++ b/public/_locales/th/messages.json
@@ -95,6 +95,13 @@
       "description": "วาดแผนภูมิเกี่ยวกับแท็กโดยใช้สีแท็กที่สอดคล้องกัน",
       "label": "สีป้ายกำกับ"
     },
+    "theme": {
+      "dark": "สีเข้ม",
+      "description": "สลับระหว่างโหมดมืดและโหมดสว่าง",
+      "label": "โหมดมืด",
+      "light": "สว่าง",
+      "system": "ระบบ"
+    },
     "title": "ตัวเลือก"
   },
   "popup": {
diff --git a/public/_locales/tr/messages.json b/public/_locales/tr/messages.json
index 5575ada..0d05b44 100644
--- a/public/_locales/tr/messages.json
+++ b/public/_locales/tr/messages.json
@@ -95,6 +95,13 @@
       "description": "İlgili etiket renklerini kullanarak etiketler hakkında çizelgeler çizin",
       "label": "Etiket Renkleri"
     },
+    "theme": {
+      "dark": "Karanlık",
+      "description": "Koyu ve açık renk düzeni arasında geçiş yapın",
+      "label": "Karanlık Mod",
+      "light": "Işık",
+      "system": "Sistem"
+    },
     "title": "Seçenekler"
   },
   "popup": {
diff --git a/public/_locales/uk/messages.json b/public/_locales/uk/messages.json
index b2c8ae6..d501f51 100644
--- a/public/_locales/uk/messages.json
+++ b/public/_locales/uk/messages.json
@@ -95,6 +95,13 @@
       "description": "Намалюйте діаграми щодо тегів, використовуючи відповідні кольори тегів",
       "label": "Тег Кольори"
     },
+    "theme": {
+      "dark": "Темна",
+      "description": "Перемикання між темною і світлою колірною гамою",
+      "label": "Темний режим",
+      "light": "Світла",
+      "system": "Система"
+    },
     "title": "Параметри"
   },
   "popup": {
diff --git a/public/_locales/zh-Hans-CN/messages.json b/public/_locales/zh-Hans-CN/messages.json
index 487ddfc..455fa86 100644
--- a/public/_locales/zh-Hans-CN/messages.json
+++ b/public/_locales/zh-Hans-CN/messages.json
@@ -95,6 +95,13 @@
       "description": "使用相应的标签颜色绘制关于标签的图表",
       "label": "标签颜色"
     },
+    "theme": {
+      "dark": "深色",
+      "description": "切换深色与浅色主题",
+      "label": "深色主题",
+      "light": "浅色",
+      "system": "系统"
+    },
     "title": "选项"
   },
   "popup": {
diff --git a/public/_locales/zh-Hant-TW/messages.json b/public/_locales/zh-Hant-TW/messages.json
index bb853ed..b5fb7f8 100644
--- a/public/_locales/zh-Hant-TW/messages.json
+++ b/public/_locales/zh-Hant-TW/messages.json
@@ -95,6 +95,13 @@
       "description": "使用相應的標籤顏色繪製關於標籤的圖表",
       "label": "標記顏色"
     },
+    "theme": {
+      "dark": "深色",
+      "description": "切換淺色與深色佈景主題",
+      "label": "深色模式",
+      "light": "淺色",
+      "system": "系統"
+    },
     "title": "選項"
   },
   "popup": {
diff --git a/src/Options.vue b/src/Options.vue
index b285619..c9d23dd 100644
--- a/src/Options.vue
+++ b/src/Options.vue
@@ -1,14 +1,7 @@
 <template>
 	<div
-		id="options"
-		:class="{
-			'dark': options.dark,
-			'light': !options.dark,
-			'text-normal': true,
-			'background-alt': options.dark,
-			'background-highlight-contrast': !options.dark,
-			'embedded': !ownOptionsPage
-		}"
+		class="text-normal"
+		:class="{ 'embedded': !ownOptionsPage }"
 	>
 		<header v-if="ownOptionsPage" class="pt-2 mx-auto">
 			<h1 class="d-flex align-items-center">
@@ -20,18 +13,18 @@
 			<!-- section related to ThirdStats appearance and UI -->
 			<section class="mb-3">
 				<h2>{{ $t("options.headings.appearance") }}</h2>
-				<!-- option: dark -->
+				<!-- option: theme -->
 				<div class="entry">
-					<label for="dark">
-						{{ $t("options.darkMode.label") }}
-						<span class="d-block text-gray text-small">{{ $t("options.darkMode.description") }}</span>
+					<label for="theme">
+						{{ $t("options.theme.label") }}
+						<span class="d-block text-gray text-small">{{ $t("options.theme.description") }}</span>
 					</label>
-					<div class="action">
-						<label class="switch">
-							<input type="checkbox" id="dark" v-model="options.dark" />
-							<span class="switch-label" :data-on="$t('options.switch.on')" :data-off="$t('options.switch.off')"></span> 
-							<span class="switch-handle"></span> 
-						</label>
+					<div class="action d-flex">
+						<select class="flex-grow" v-model="options.theme" id="theme">
+							<option v-for="theme in ['system', 'light', 'dark']" :key="theme" :value="theme">
+								{{ $t("options.theme." + theme) }}
+							</option>
+						</select>
 					</div>
 				</div>
 				<!-- option: ordinate -->
@@ -419,17 +412,17 @@
 
 <script>
 import { defineComponent } from 'vue';
-import { defaultColors } from "./definitions";
-import { formatBytes, localStartOfWeek } from "./utils";
-import ProjectMeta from "./parts/ProjectMeta"
+import { defaultColors } from './definitions';
+import { formatBytes, localStartOfWeek, setTheme } from './utils';
+import ProjectMeta from './parts/ProjectMeta'
 
 export default defineComponent({
-	name: "Options",
+	name: 'Options',
 	components: { ProjectMeta },
 	data () {
 		return {
 			input: {
-				address: "",
+				address: '',
 			},
 			options: (JSON.parse(JSON.stringify(this.optionsObject()))).options,
 			allAccounts: [],
@@ -448,26 +441,26 @@ export default defineComponent({
 	methods: {
 		// create options object with given values or default values
 		optionsObject (
-			dark = false,
-			ordinate = true,
-			tagColors = false,
-			liveCountUp = true,
-			autoRefresh = true,
+			theme               = 'system',
+			ordinate            = true,
+			tagColors           = false,
+			liveCountUp         = true,
+			autoRefresh         = true,
 			autoRefreshInterval = 30,
-			startOfWeek = -1,
-			addresses = "",
-			accounts = [],
-			accountColors = {},
-			selfMessages = "none",
-			leaderCount = 20,
-			cache = true
+			startOfWeek         = -1,
+			addresses           = '',
+			accounts            = [],
+			accountColors       = {},
+			selfMessages        = 'none',
+			leaderCount         = 20,
+			cache               = true,
 		) {
 			// prepare default values
 			if (startOfWeek < 0) startOfWeek = localStartOfWeek()	
 			// return options object
 			return {
 				options: {
-					dark: dark === null ? this.options.dark : dark,
+					theme: theme === null ? this.options.theme : theme,
 					ordinate: ordinate === null ? this.options.ordinate : ordinate,
 					tagColors: tagColors === null ? this.options.tagColors : tagColors,
 					liveCountUp: liveCountUp === null ? this.options.liveCountUp : liveCountUp,
@@ -490,6 +483,13 @@ export default defineComponent({
 			if (result && result.options) {
 				// merge option objects to overwrite attributes by saved ones while keeping new attributes
 				this.options = {...this.options, ...result.options}
+				// handle theme
+				setTheme(
+					this.options.theme,
+					document.body,
+					['dark', 'background-alt'],
+					['light', 'background-highlight-contrast']
+				);
 			}
 		},
 		// get all existing accounts
@@ -626,13 +626,19 @@ export default defineComponent({
 		ownOptionsPage () {
 			const uri = window.location.search.substring(1)
 			return Boolean((new URLSearchParams(uri)).get("s"))
-		}
+		},
 	},
 	watch: {
 		// save options object on each single option change
 		options: {
 			handler (newOptions) {
-				messenger.storage.local.set({ options: JSON.parse(JSON.stringify(newOptions)) })
+				messenger.storage.local.set({ options: JSON.parse(JSON.stringify(newOptions)) });
+				setTheme(
+					newOptions.theme,
+					document.body,
+					['dark', 'background-alt'],
+					['light', 'background-highlight-contrast']
+				);
 			},
 			deep: true,
 			immediate: false
diff --git a/src/Popup.vue b/src/Popup.vue
index cfbfbd4..e8d7ea0 100644
--- a/src/Popup.vue
+++ b/src/Popup.vue
@@ -1,5 +1,5 @@
 <template>
-	<div id="popup" class="text-normal position-relative">
+	<div class="text-normal position-relative">
 		<div class="container pt-1">
 			<!-- header containing number of accounts and linking to stats page -->
 			<header class="d-flex gap-0-5 mb-1-5">
@@ -72,7 +72,7 @@
 import { defineComponent } from 'vue';
 
 // internal components
-import { traverseAccount } from "./utils";
+import { traverseAccount, setTheme } from "./utils";
 import LineChart from "./charts/LineChart";
 import ProjectMeta from "./parts/ProjectMeta";
 
@@ -95,8 +95,6 @@ export default defineComponent({
 		this.loading = true
 		// get stored options
 		await this.getOptions()
-		// set theme to body element to style popup caret too
-		document.body.className = this.options.dark ? 'dark background-normal' : 'light background-modal'
 		// start account processing
 		await this.getAccounts()
 		// stop loading indication
@@ -109,7 +107,12 @@ export default defineComponent({
 			const result = await messenger.storage.local.get("options")
 			// only load needed options if they have been set, otherwise default settings will be kept
 			if (result && result.options) {
-				this.options.dark = result.options.dark ? true : false
+				this.options.dark = setTheme(
+					result.options.theme ?? 'system',
+					document.body,
+					['dark', 'background-normal'],
+					['light', 'background-modal']
+				);
 				this.options.accounts = result.options.accounts ? result.options.accounts : []
 				this.options.cache = result.options.cache ? true : false
 			}
diff --git a/src/Stats.vue b/src/Stats.vue
index 5305fb3..6497621 100644
--- a/src/Stats.vue
+++ b/src/Stats.vue
@@ -1,5 +1,5 @@
 <template>
-	<div id="stats" class="text-normal background-normal position-relative" :class="scheme">
+	<div class="text-normal background-normal position-relative">
 		<!-- progress indicator -->
 		<div class="progress position-fixed w-available top-0 right-0">
 			<div
@@ -26,7 +26,7 @@
 							<option v-else disabled>{{ $t("stats.allAccounts") }}</option>
 							<option v-for="a in accounts" :key="a.id" :value="a.id">{{ a.name }}</option>
 						</select>
-						<div v-show="loading" :class="scheme + ' loading align-center loader-accent2'"></div>
+						<div v-show="loading" class="loading align-center loader-accent2"></div>
 						<div
 							v-show="!loading"
 							class="refresh align-center cursor-pointer tooltip tooltip-bottom d-inline-flex"
@@ -822,7 +822,7 @@ import { defineComponent } from 'vue';
 
 // internal components
 import { accentColors, defaultColors } from "./definitions";
-import { queryMessages, traverseAccount, extractEmailAddress, weekNumber, quarterNumber, yyyymmdd, weeksBetween, localStartOfWeek, startOfToday } from "./utils";
+import { queryMessages, traverseAccount, extractEmailAddress, weekNumber, quarterNumber, yyyymmdd, weeksBetween, localStartOfWeek, startOfToday, setTheme } from "./utils";
 import LineChart from "./charts/LineChart"
 import BarChart from "./charts/BarChart"
 import MatrixChart from "./charts/MatrixChart"
@@ -980,7 +980,7 @@ export default defineComponent({
 						comparison: false
 					}
 				},
-				dark: false,    // preferences loaded from stored options
+				dark: false,   // preference loaded from stored theme
 				ordinate: true,
 				tagColors: false,
 				liveCountUp: true,
@@ -1111,7 +1111,7 @@ export default defineComponent({
 				if (area == "local" && result?.options?.newValue && result?.options?.oldValue) {
 					const n = result.options.newValue, o = result.options.oldValue
 					// only update those options that changed
-					if (n.dark != o.dark) this.preferences.dark = n.dark
+					if (n.theme != o.theme) this.preferences.dark = setTheme(n.theme);
 					if (n.ordinate != o.ordinate) this.preferences.ordinate = n.ordinate
 					if (n.tagColors != o.tagColors) this.preferences.tagColors = n.tagColors
 					if (n.liveCountUp != o.liveCountUp) this.preferences.liveCountUp = n.liveCountUp
@@ -1133,7 +1133,7 @@ export default defineComponent({
 			const result = await messenger.storage.local.get("options")
 			// only load options if they have been set, otherwise default settings will be kept
 			if (result && result.options) {
-				this.preferences.dark = result.options.dark ? true : false
+				this.preferences.dark = setTheme(result.options.theme ?? 'system');
 				this.preferences.ordinate = result.options.ordinate ? true : false
 				this.preferences.tagColors = result.options.tagColors ? true : false
 				this.preferences.liveCountUp = result.options.liveCountUp ? true : false
@@ -2459,10 +2459,6 @@ export default defineComponent({
 			let d = new Date()
 			return d.toISOString().slice(0,10)
 		},
-		// convert theme preference into scheme name
-		scheme () {
-			return this.preferences.dark ? "dark" : "light"
-		},
 		// return account colors of all active accounts comma separated as single string
 		accountsColorGradient () {
 			return Object
diff --git a/src/assets/global.styl b/src/assets/global.styl
index 86446f1..49e94da 100644
--- a/src/assets/global.styl
+++ b/src/assets/global.styl
@@ -752,7 +752,7 @@ loader(size, border)
 	animation: rotate 1s 0s infinite linear
 	border: border solid
 	for m, c in mode
-		&.{m}
+		.{m} &
 			border-color: c.gray3
 			border-top-color: c.gray1
 			&.loader-accent2
diff --git a/src/utils.js b/src/utils.js
index 1e045c6..bf67f66 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -146,6 +146,26 @@ const pluralPolish = (n) => {
 	return 0
 }
 
+/** 
+ * handle theme changes, returns true if dark was detected
+ * 
+ * @param {String} theme Supported themes are system|dark|light
+ * @param {HTMLElement} element DOM element to add/remove classes on
+ * @param {Array} darkClasses List of classes representing dark mode
+ * @param {Array} lightClasses List of classes representing light mode
+ * @returns {Boolean} True, if dark mode was set
+ */
+const setTheme = (theme, element=document.documentElement, darkClasses=['dark'], lightClasses=['light']) => {
+	if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+		element.classList.remove(...lightClasses);
+		element.classList.add(...darkClasses);
+		return true;
+	} else {
+		element.classList.remove(...darkClasses);
+		element.classList.add(...lightClasses);
+		return false;
+	}
+};
 
 export {
 	queryMessages,
@@ -159,5 +179,6 @@ export {
 	isoDayOfWeek,
 	startOfToday,
 	formatBytes,
-	pluralPolish
+	pluralPolish,
+	setTheme,
 }