diff --git a/src/public/app/widgets/type_widgets/options/appearance/theme.js b/src/public/app/widgets/type_widgets/options/appearance/theme.js
index ec88cdf8e..8a2267f6d 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -71,8 +71,9 @@ export default class ThemeOptions extends OptionsWidget {
             { val: 'next', title: t("theme.triliumnext") },
             { val: 'next-light', title: t("theme.triliumnext-light") },
             { val: 'next-dark', title: t("theme.triliumnext-dark") },
+            { val: 'system', title: t('theme.system_theme') },
             { val: 'light', title: t('theme.light_theme') },
-            { val: 'dark', title: t('theme.dark_theme') }            
+            { val: 'dark', title: t('theme.dark_theme') }
         ].concat(await server.get('options/user-themes'));
 
         this.$themeSelect.empty();
diff --git a/src/public/stylesheets/theme.css b/src/public/stylesheets/theme.css
new file mode 100644
index 000000000..f8ac50dd4
--- /dev/null
+++ b/src/public/stylesheets/theme.css
@@ -0,0 +1,7 @@
+/* Import the light color scheme. 
+ * This is the base color scheme, always active and overridden by the dark
+ * color scheme stylesheet when necessary. */
+@import url(./theme-light.css);
+
+/* Import the dark color scheme when the system preference is set to dark mode */
+@import url(./theme-dark.css) (prefers-color-scheme: dark);
\ No newline at end of file
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index 1dbe90aeb..b30e4c884 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1072,6 +1072,7 @@
     "title": "Application Theme",
     "theme_label": "Theme",
     "override_theme_fonts_label": "Override theme fonts",
+    "system_theme": "System",
     "light_theme": "Light",
     "dark_theme": "Dark",
     "triliumnext": "TriliumNext Beta (Follow system color scheme)",
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 16ddf0f70..fa6382c19 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -61,7 +61,9 @@ function index(req: Request, res: Response) {
 }
 
 function getThemeCssUrl(theme: string, themeNote: BNote | null) {
-    if (theme === 'light') {
+    if (theme === 'system') {
+        return `${assetPath}/stylesheets/theme.css`;
+    } else if (theme === 'light') {
         // light theme is always loaded as baseline
         return false;
     } else if (theme === 'dark') {