diff --git a/newtab.html b/newtab.html
index 6bb1c28..dd22f0d 100755
--- a/newtab.html
+++ b/newtab.html
@@ -63,7 +63,13 @@
 	</fieldset>
 	<fieldset>
 		<legend>Colors</legend>
+		<label><span>Theme mode</span><select id="options_theme_mode">
+			<option value="light">light</option>
+			<option value="dark">dark</option>
+			<option value="auto">auto</option>
+		</select></label>
 		<label><span>Theme</span><select id="options_theme"></select></label>
+		<label><span>Dark theme</span><select id="options_dark_theme"></select></label>
 		<label><span>Text</span><input id="options_font_color" type="color"/></label>
 		<label><span>Background</span><input id="options_background_color" type="color"/></label>
 		<label><span>Highlight</span><input id="options_highlight_color" type="color"/></label>
diff --git a/newtab.js b/newtab.js
index f3f41a3..cc1bcce 100755
--- a/newtab.js
+++ b/newtab.js
@@ -1060,6 +1060,8 @@ var config = {
 	font_size: 16,
 	font_weight: 400,
 	theme: 'Default',
+	dark_theme: 'Default',
+	theme_mode: 'light',
 	font_color: '#555555',
 	background_color: '#ffffff',
 	highlight_color: '#e4f4ff',
@@ -1177,7 +1179,7 @@ var themes = {
 		shadow_color: '#d98764'
 	}
 };
-var theme = {};
+var theme = themes['Default']; // default theme
 
 // get config value or default
 function getConfig(key) {
@@ -1188,6 +1190,19 @@ function getConfig(key) {
 		return (theme.hasOwnProperty(key) ? theme[key] : config[key]);
 }
 
+// check if dark theme should be used
+function isDarkTheme() {
+	var themeMode = getConfig('theme_mode') || 'light';
+	var systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+	return ((themeMode === 'auto' && systemPrefersDark) || themeMode === 'dark');
+}
+
+// retrieve the current theme
+function loadActiveTheme() {
+	var modifier = isDarkTheme() ? 'dark_' : '';
+	return themes[getConfig(modifier + 'theme')] || themes['Default'];
+}
+
 // set config value
 function setConfig(key, value) {
 	if (value != null)
@@ -1199,8 +1214,12 @@ function setConfig(key, value) {
 	// special case settings
 	if (key == 'lock' || key == 'newtab' || key == 'show_root' || key.substring(0,6) == 'number')
 		loadColumns();
-	else if (key == 'theme') {
-		theme = themes[value];
+	else if (
+		(key == 'theme_mode')
+		|| (key == 'theme' && !isDarkTheme())
+		|| (key == 'dark_theme' && isDarkTheme())
+	 ) {
+		theme = (key == 'theme_mode') ? loadActiveTheme() : themes[value];
 		for (var i in config) {
 			if (i != key) {
 				onChange(i);
@@ -1356,7 +1375,7 @@ function onChange(key, value) {
 // loads config settings
 function loadSettings() {
 	// load theme
-	theme = themes[getConfig('theme')] || {};
+	theme = loadActiveTheme()
 	// load settings
 	for (var key in config)
 		if (key === 'background_image_file')
@@ -1534,15 +1553,18 @@ function initSettings() {
 
 		loadSettings();
 
-		// load themes
-		var select = document.getElementById('options_theme');
-		if (select.childNodes.length === 0) {
-			for (var i in themes) {
-				var option = document.createElement('option');
-				option.innerText = i;
-				if (i == getConfig('theme'))
-					option.selected = 'selected';
-				select.appendChild(option);
+		// load day & dark themes
+		var optionKeys = ['theme', 'dark_theme'];
+		for (var optionKey of optionKeys) {
+			var select = document.getElementById('options_' + optionKey);
+			if (select.childNodes.length === 0) {
+				for (var i in themes) {
+					var option = document.createElement('option');
+					option.innerText = i;
+					if (i == getConfig(optionKey))
+						option.selected = 'selected';
+					select.appendChild(option);
+				}
 			}
 		}