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 df92c38750..e6ec9d960b 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -69,8 +69,11 @@ export default class ThemeOptions extends OptionsWidget {
     async optionsLoaded(options) {
         const themes = [
             { val: 'next', title: t("theme.triliumnext") },
+            { val: 'next-light', title: t("theme.triliumnext-light") },
+            { val: 'next-dark', title: t("theme.triliumnext-dark") },
+            { val: 'auto', title: t('theme.auto_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-next-dark.css b/src/public/stylesheets/theme-next-dark.css
new file mode 100644
index 0000000000..ad85706e48
--- /dev/null
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -0,0 +1,170 @@
+/* Import the Next theme base style */
+@import url(./theme-next/base.css);
+
+/*
+ * Color scheme
+ */
+:root {
+    --theme-style: dark;
+    --native-titlebar-background: #00000000;
+
+    --main-background-color: #333;
+    --main-text-color: #ccc;        
+    --main-border-color: #454545;
+    --subtle-border-color: #313131;
+    --dropdown-border-color: #292929;
+    --dropdown-shadow-opacity: .6;
+    --dropdown-item-icon-destructive-color: #de6e5b;
+    --disabled-tooltip-icon-color: #7fd2ef;
+
+
+    --accented-background-color: #555;
+
+    --button-background-color: transparent;
+    --button-border-color: #ccc;
+    --button-text-color: currentColor;
+    --button-border-radius: 5px;
+    --button-disabled-background-color: transparent;
+    --button-disabled-text-color: #999;
+
+    --primary-button-background-color: #888;
+    --primary-button-text-color: white;
+    --primary-button-border-color: #999;
+
+    --muted-text-color: #bbb;
+
+    --input-text-color: #ccc;
+    --input-background-color: #333;
+
+    --hover-item-text-color: #efefef;
+    --hover-item-background-color: #ffffff24;
+    --hover-item-border-color: transparent;
+
+    --active-item-text-color: var(--left-pane-text-color);
+    --active-item-background-color: #777;
+    --active-item-border-color: transparent;
+
+    --new-tab-button-background: #fff0;
+    --new-tab-button-color: #ffffff96;
+    --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+    --new-tab-button-hover-background: #fff3;
+    --new-tab-button-hover-color: white;
+
+    --menu-text-color: #e3e3e3;
+    --menu-background-color: #222222d9;
+    --menu-item-icon-color: #8c8c8c;
+    --menu-item-disabled-opacity: .5;
+    --menu-item-keyboard-shortcut-color: #ffffff8f;
+    --menu-item-arrow-color: #ffffffa3;
+    --menu-item-delimiter-color: #ffffff1c;
+
+
+    --modal-background-color: #333;
+    --modal-backdrop-color: #444;
+
+    --quick-search-background: #ffffff12;
+    --quick-search-color: #ffffff52;
+    --quick-search-hover-background: #ffffff1f;
+    --quick-search-focus-border: #80808095;
+    --quick-search-focus-background: #ffffff1f;
+    --quick-search-focus-color: white;
+
+    --left-pane-collapsed-border-color: #0009;
+    --left-pane-background-color: #1f1f1f;
+    --left-pane-text-color: #AAAAAA;
+    --left-pane-item-hover-background: #ffffff0d;
+    --left-pane-item-selected-background: #ffffff25;
+    --left-pane-item-selected-color: #dfdfdf;
+    --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
+    --left-pane-item-action-button-background: #ffffff73;
+    --left-pane-item-action-button-color: black;
+    --left-pane-item-action-button-hover-background: #ffffffad;
+    --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
+    --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
+    
+    --launcher-pane-background-color: #1a1a1a;
+    --launcher-pane-horizontal-background-color: #282828;
+    --launcher-pane-horizontal-border-color: rgb(22, 22, 22);
+    --launcher-pane-text-color: #909090;
+    --launcher-pane-button-hover-color: #ffffff;
+    --launcher-pane-button-hover-background: #ffffff1c;
+    --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
+
+    --protected-session-active-icon-color: #8edd8e;
+    --sync-status-error-pulse-color: #f47871;
+
+    --root-background: var(--left-pane-background-color);
+
+    --gutter-color: transparent;
+    --gutter-hover-color: #626262;
+
+    --tab-close-button-hover-background: #a45353;
+    --tab-close-button-hover-color: white;
+
+    --active-tab-background-color: #ffffff1c;
+    --active-tab-hover-background-color: var(--active-tab-background-color);
+    --active-tab-text-color: #ffffffcd;
+    --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .2), -1px -1px 3px rgba(0, 0, 0, .4);
+    --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .4);
+
+    --inactive-tab-background-color: transparent;
+    --inactive-tab-hover-background-color: #ffffff0f;
+    --inactive-tab-text-color: #7c7c7c;
+
+    --right-pane-item-hover-background: #ffffff26;
+    --right-pane-item-hover-color: white;
+
+    --scrollbar-border-color: #666;
+    --scrollbar-background-color: #333;
+    --link-color: lightskyblue;
+
+    --mermaid-theme: dark;
+
+    --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+
+    --card-background-color: #363636;
+    --card-background-hover-color: #3c3c3c;
+    --card-background-press-color: #464646;
+    --card-border-color: #222222;
+    --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+
+    --calendar-color: var(--menu-text-color);
+    --calendar-weekday-labels-color: var(--muted-text-color);
+    --calendar-day-hover-color: var(--hover-item-text-color);
+    --calendar-day-hover-background: var(--active-item-background-color);
+    --calendar-day-highlight-background: #8080805a;
+
+    --timeline-bullet-color: gray;
+    --timeline-bullet-hover-color: white;
+    --timeline-connector-color: #464646;
+    --timeline-connector-active-color: #545454;
+    --timeline-connector-hover-blend-mode: exclusion;
+
+    --tooltip-background-color: rgba(67, 67, 67, 0.86);
+    --tooltip-foreground-color: #ffffffeb;
+    --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
+}
+
+/* 
+ * Dark color scheme tweaks 
+ */
+
+body ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+body .CodeMirror {
+    filter: invert(90%) hue-rotate(180deg);
+}
+
+.excalidraw.theme--dark {
+    --theme-filter: invert(80%) hue-rotate(180deg) !important;
+}
+
+body .todo-list input[type="checkbox"]:not(:checked):before {
+    border-color: var(--muted-text-color) !important;
+}
+
+.btn-close {
+    filter: invert(1);
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
new file mode 100644
index 0000000000..1d06abc9da
--- /dev/null
+++ b/src/public/stylesheets/theme-next-light.css
@@ -0,0 +1,145 @@
+/* Import the Next theme base style */
+@import url(./theme-next/base.css); 
+
+/*
+ * Color scheme
+ */
+:root {
+    --theme-style: light;
+    --native-titlebar-background: #ffffff00;
+ 
+    --main-background-color: white;
+    --main-text-color: black;
+    --main-border-color: #dbdbdb;
+    --subtle-border-color: rgba(0, 0, 0, 0.1);
+    --dropdown-border-color: #ccc;
+    --dropdown-shadow-opacity: .2;
+    --dropdown-item-icon-destructive-color: #ec5138;
+    --disabled-tooltip-icon-color: #004382;
+ 
+    --accented-background-color: #f5f5f5;   
+ 
+    --button-background-color: transparent;
+    --button-border-color: #ddd;
+    --button-text-color: black;
+    --button-border-radius: 5px;
+    --button-disabled-background-color: #ddd;
+    --button-disabled-text-color: black;
+ 
+    --primary-button-background-color: #6c757d;
+    --primary-button-text-color: white;
+    --primary-button-border-color: #6c757d;
+ 
+    --muted-text-color: #666;
+ 
+    --input-text-color: black;
+    --input-background-color: transparent;
+ 
+    --hover-item-text-color: black;
+    --hover-item-background-color: #0000001a;
+    --hover-item-border-color: transparent;
+ 
+    --active-item-text-color: var(--left-pane-text-color);
+    --active-item-background-color: #ddd;
+    --active-item-border-color: transparent;
+ 
+    --menu-text-color: #272727;
+    --menu-background-color: #ffffffd9;
+    --menu-item-icon-color: #727272;
+    --menu-item-disabled-opacity: .5;
+    --menu-item-keyboard-shortcut-color: #666666a8;
+    --menu-item-arrow-color: #00000080;
+    --menu-item-delimiter-color: #00000030;
+ 
+    --modal-background-color: white;
+    --modal-backdrop-color: black;
+ 
+    --quick-search-background: #00000012;
+    --quick-search-color: #06060682;
+    --quick-search-hover-background: #00000020;
+    --quick-search-focus-border: #00000029;
+    --quick-search-focus-background: #ffffff80;
+    --quick-search-focus-color: #000;
+ 
+    --left-pane-collapsed-border-color: #0000000d;
+    --left-pane-background-color: #f2f2f2;
+    --left-pane-text-color: #383838;
+    --left-pane-item-hover-background: #eaeaea;
+    --left-pane-item-selected-background: white;
+    --left-pane-item-selected-color: black;
+    --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
+    --left-pane-item-action-button-background: #d7d7d7;
+    --left-pane-item-action-button-color: inherit;
+    --left-pane-item-action-button-hover-background: white;
+    --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
+    --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
+ 
+    --launcher-pane-background-color: #e8e8e8;
+    --launcher-pane-horizontal-background-color: #fafafa;
+    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
+    --launcher-pane-text-color: #000000bd;
+    --launcher-pane-button-hover-color: black;
+    --launcher-pane-button-hover-background: white;
+    --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
+ 
+    --protected-session-active-icon-color: #16b516;
+    --sync-status-error-pulse-color: #ff5528;
+ 
+    --root-background: var(--left-pane-background-color);
+ 
+    --gutter-color: transparent;
+    --gutter-hover-color: #bfbfbf;
+ 
+    --tab-close-button-hover-background: #c95a5a;
+    --tab-close-button-hover-color: white;
+ 
+    --active-tab-background-color: white;
+    --active-tab-hover-background-color: var(--active-tab-background-color);
+    --active-tab-text-color: black;
+    --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .1), -1px -1px 3px rgba(0, 0, 0, .05);
+    --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .1);
+ 
+    --inactive-tab-background-color: transparent;
+    --inactive-tab-hover-background-color: #00000016;
+    --inactive-tab-text-color: #4e4e4e;
+ 
+    --new-tab-button-background: #d8d8d8;
+    --new-tab-button-color: #3a3a3a;
+    --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
+    --new-tab-button-hover-background: white;
+    --new-tab-button-hover-color: black;
+ 
+    --right-pane-item-hover-background: #ececec;
+    --right-pane-item-hover-color: inherit;
+ 
+    --scrollbar-border-color: #ddd;
+    --scrollbar-background-color: #ddd;
+    --link-color: blue;
+ 
+    --mermaid-theme: default;   
+ 
+    --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
+ 
+    --card-background-color: var(--accented-background-color);
+    --card-background-hover-color: #f9f9f9;
+    --card-background-press-color: #efefef;
+    --card-border-color: #eaeaea;
+    --card-shadow-color: rgba(0, 0, 0, 0.1);
+    --card-box-shadow: 0 0 12px var(--card-shadow-color);
+ 
+    --calendar-color: var(--menu-text-color);
+    --calendar-weekday-labels-color: var(--muted-text-color);
+    --calendar-day-hover-color: var(--hover-item-text-color);
+    --calendar-day-hover-background: var(--active-item-background-color);
+    --calendar-day-highlight-background: #80808024;
+ 
+    --timeline-bullet-color: #a5a5a5;
+    --timeline-bullet-hover-color: black;
+    --timeline-connector-color: #f1f1f1;
+    --timeline-connector-active-color: #ddd;
+    --timeline-connector-hover-blend-mode: multiply;
+ 
+    --tooltip-background-color: rgba(255, 255, 255, 0.85);
+    --tooltip-foreground-color: #000000ba;
+    --tooltip-shadow-color: rgba(0, 0, 0, .15);
+ }
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 0785faa2c5..4dffcdae55 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -1,393 +1,7 @@
-@import url(./theme-next/shell.css);
-@import url(./theme-next/settings.css);
-@import url(./theme-next/notes/text.css);
+/* 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-next-light.css);
 
-@font-face {
-    font-family: "Noto Sans";
-    src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
-}
-
-@font-face {
-    font-family: "Ubuntu Sans";
-    src: url(../fonts/Ubuntu_Sans/UbuntuSans-VariableFont_wdth\,wght.ttf);
-}
-
-@font-face {
-    font-family: "Nunito";
-    src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
-}
-
-@font-face {
-    font-family: "Inter";
-    src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
-}
-
-:root {
-    /* --main-font-family: "Noto Sans", sans-serif; */
-    --main-font-family: "Segoe UI", sans-serif;
-    /* --main-font-family: "Ubuntu", sans-serif; */
-    /* --main-font-family: "Nunito", sans-serif; */
-    /* --main-font-family: "Inter", sans-serif; */
-
-    --main-font-size: normal;
-
-    --tree-font-family: var(--main-font-family);
-    --tree-font-size: normal;
-
-    --detail-font-family: var(--main-font-family);
-    --detail-font-size: normal;
-
-    --monospace-font-family: JetBrainsLight;
-    --monospace-font-size: normal;
-
-    --left-pane-item-selected-shadow-size: 2px;
-
-    --launcher-pane-size: 58px;
-    --launcher-pane-horizontal-size: 54px;
-    --launcher-pane-horizontal-icon-size: 20px;    
-    --launcher-pane-button-margin: 6px;
-    --launcher-pane-button-gap: 3px;
-
-    --tree-actions-toolbar-horizontal-margin: 8px;
-    --tree-actions-toolbar-vertical-margin: 8px;
-    --tree-actions-toolbar-padding-size: 4px;
-    --tree-actions-toolbar-collapsed-width: 40px;
-    --tree-actions-toolbar-expand-button-size: 25px;
-
-    --tab-bar-height: 50px;
-    --tab-height: 36px;
-    --tab-first-item-horiz-offset: 1px;
-    --new-tab-button-size: 24px;
-
-    --center-pane-border-radius: 10px;
-
-    --menu-padding-size: 8px;
-    --menu-item-icon-vert-offset: 0;    
-
-    --more-accented-background-color: var(--card-background-hover-color);
-
-    --timeline-left-gap: 20px;
-    --timeline-right-gap: 20px;
-    --timeline-item-top-padding: 4px;
-    --timeline-item-bottom-padding: 8px;
-    --timeline-bullet-size: 10px;
-    --timeline-bullet-vertical-pos: .75em;
-    --timeline-connector-size: 4px;
-
-    /* Theme capabilities */
-    --tab-note-icons: true;
-}
-
-/*
- * THEME COLORS
- */
-
-/* 
- * Light theme scheme
- */
-:root {
-   --theme-style: light;
-   --native-titlebar-background: #ffffff00;
-
-   --main-background-color: white;
-   --main-text-color: black;
-   --main-border-color: #dbdbdb;
-   --subtle-border-color: rgba(0, 0, 0, 0.1);
-   --dropdown-border-color: #ccc;
-   --dropdown-shadow-opacity: .2;
-   --dropdown-item-icon-destructive-color: #ec5138;
-   --disabled-tooltip-icon-color: #004382;
-
-   --accented-background-color: #f5f5f5;   
-
-   --button-background-color: transparent;
-   --button-border-color: #ddd;
-   --button-text-color: black;
-   --button-border-radius: 5px;
-   --button-disabled-background-color: #ddd;
-   --button-disabled-text-color: black;
-
-   --primary-button-background-color: #6c757d;
-   --primary-button-text-color: white;
-   --primary-button-border-color: #6c757d;
-
-   --muted-text-color: #666;
-
-   --input-text-color: black;
-   --input-background-color: transparent;
-
-   --hover-item-text-color: black;
-   --hover-item-background-color: #0000001a;
-   --hover-item-border-color: transparent;
-
-   --active-item-text-color: var(--left-pane-text-color);
-   --active-item-background-color: #ddd;
-   --active-item-border-color: transparent;
-
-   --menu-text-color: #272727;
-   --menu-background-color: #ffffffd9;
-   --menu-item-icon-color: #727272;
-   --menu-item-disabled-opacity: .5;
-   --menu-item-keyboard-shortcut-color: #666666a8;
-   --menu-item-arrow-color: #00000080;
-   --menu-item-delimiter-color: #00000030;
-
-   --modal-background-color: white;
-   --modal-backdrop-color: black;
-
-   --quick-search-background: #00000012;
-   --quick-search-color: #06060682;
-   --quick-search-hover-background: #00000020;
-   --quick-search-focus-border: #00000029;
-   --quick-search-focus-background: #ffffff80;
-   --quick-search-focus-color: #000;
-
-   --left-pane-collapsed-border-color: #0000000d;
-   --left-pane-background-color: #f2f2f2;
-   --left-pane-text-color: #383838;
-   --left-pane-item-hover-background: #eaeaea;
-   --left-pane-item-selected-background: white;
-   --left-pane-item-selected-color: black;
-   --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
-   --left-pane-item-action-button-background: #d7d7d7;
-   --left-pane-item-action-button-color: inherit;
-   --left-pane-item-action-button-hover-background: white;
-   --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
-   --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
-
-   --launcher-pane-background-color: #e8e8e8;
-   --launcher-pane-horizontal-background-color: #fafafa;
-   --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
-   --launcher-pane-text-color: #000000bd;
-   --launcher-pane-button-hover-color: black;
-   --launcher-pane-button-hover-background: white;
-   --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
-
-   --protected-session-active-icon-color: #16b516;
-   --sync-status-error-pulse-color: #ff5528;
-
-   --root-background: var(--left-pane-background-color);
-
-   --gutter-color: transparent;
-   --gutter-hover-color: #bfbfbf;
-
-   --tab-close-button-hover-background: #c95a5a;
-   --tab-close-button-hover-color: white;
-
-   --active-tab-background-color: white;
-   --active-tab-hover-background-color: var(--active-tab-background-color);
-   --active-tab-text-color: black;
-   --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .1), -1px -1px 3px rgba(0, 0, 0, .05);
-   --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .1);
-
-   --inactive-tab-background-color: transparent;
-   --inactive-tab-hover-background-color: #00000016;
-   --inactive-tab-text-color: #4e4e4e;
-
-   --new-tab-button-background: #d8d8d8;
-   --new-tab-button-color: #3a3a3a;
-   --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
-   --new-tab-button-hover-background: white;
-   --new-tab-button-hover-color: black;
-
-   --right-pane-item-hover-background: #ececec;
-   --right-pane-item-hover-color: inherit;
-
-   --scrollbar-border-color: #ddd;
-   --scrollbar-background-color: #ddd;
-   --link-color: blue;
-
-   --mermaid-theme: default;   
-
-   --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
-
-   --card-background-color: var(--accented-background-color);
-   --card-background-hover-color: #f9f9f9;
-   --card-background-press-color: #efefef;
-   --card-border-color: #eaeaea;
-   --card-shadow-color: rgba(0, 0, 0, 0.1);
-   --card-box-shadow: 0 0 12px var(--card-shadow-color);
-
-   --calendar-color: var(--menu-text-color);
-   --calendar-weekday-labels-color: var(--muted-text-color);
-   --calendar-day-hover-color: var(--hover-item-text-color);
-   --calendar-day-hover-background: var(--active-item-background-color);
-   --calendar-day-highlight-background: #80808024;
-
-   --timeline-bullet-color: #a5a5a5;
-   --timeline-bullet-hover-color: black;
-   --timeline-connector-color: #f1f1f1;
-   --timeline-connector-active-color: #ddd;
-   --timeline-connector-hover-blend-mode: multiply;
-
-   --tooltip-background-color: rgba(255, 255, 255, 0.85);
-   --tooltip-foreground-color: #000000ba;
-   --tooltip-shadow-color: rgba(0, 0, 0, .15);
-}
-
-/* 
- * Dark color scheme
- */
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --theme-style: dark;
-        --native-titlebar-background: #00000000;
-    
-        --main-background-color: #333;
-        --main-text-color: #ccc;        
-        --main-border-color: #454545;
-        --subtle-border-color: #313131;
-        --dropdown-border-color: #292929;
-        --dropdown-shadow-opacity: .6;
-        --dropdown-item-icon-destructive-color: #de6e5b;
-        --disabled-tooltip-icon-color: #7fd2ef;
-    
-    
-        --accented-background-color: #555;
-    
-        --button-background-color: transparent;
-        --button-border-color: #ccc;
-        --button-text-color: currentColor;
-        --button-border-radius: 5px;
-        --button-disabled-background-color: transparent;
-        --button-disabled-text-color: #999;
-    
-        --primary-button-background-color: #888;
-        --primary-button-text-color: white;
-        --primary-button-border-color: #999;
-    
-        --muted-text-color: #bbb;
-    
-        --input-text-color: #ccc;
-        --input-background-color: #333;
-    
-        --hover-item-text-color: #efefef;
-        --hover-item-background-color: #ffffff24;
-        --hover-item-border-color: transparent;
-    
-        --active-item-text-color: var(--left-pane-text-color);
-        --active-item-background-color: #777;
-        --active-item-border-color: transparent;
-
-        --new-tab-button-background: #fff0;
-        --new-tab-button-color: #ffffff96;
-        --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
-        --new-tab-button-hover-background: #fff3;
-        --new-tab-button-hover-color: white;
-    
-        --menu-text-color: #e3e3e3;
-        --menu-background-color: #222222d9;
-        --menu-item-icon-color: #8c8c8c;
-        --menu-item-disabled-opacity: .5;
-        --menu-item-keyboard-shortcut-color: #ffffff8f;
-        --menu-item-arrow-color: #ffffffa3;
-        --menu-item-delimiter-color: #ffffff1c;
-
-
-        --modal-background-color: #333;
-        --modal-backdrop-color: #444;
-
-        --quick-search-background: #ffffff12;
-        --quick-search-color: #ffffff52;
-        --quick-search-hover-background: #ffffff1f;
-        --quick-search-focus-border: #80808095;
-        --quick-search-focus-background: #ffffff1f;
-        --quick-search-focus-color: white;
-    
-        --left-pane-collapsed-border-color: #0009;
-        --left-pane-background-color: #1f1f1f;
-        --left-pane-text-color: #AAAAAA;
-        --left-pane-item-hover-background: #ffffff0d;
-        --left-pane-item-selected-background: #ffffff25;
-        --left-pane-item-selected-color: #dfdfdf;
-        --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
-        --left-pane-item-action-button-background: #ffffff73;
-        --left-pane-item-action-button-color: black;
-        --left-pane-item-action-button-hover-background: #ffffffad;
-        --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
-        --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
-     
-        --launcher-pane-background-color: #1a1a1a;
-        --launcher-pane-horizontal-background-color: #282828;
-        --launcher-pane-horizontal-border-color: rgb(22, 22, 22);
-        --launcher-pane-text-color: #909090;
-        --launcher-pane-button-hover-color: #ffffff;
-        --launcher-pane-button-hover-background: #ffffff1c;
-        --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
-
-        --protected-session-active-icon-color: #8edd8e;
-        --sync-status-error-pulse-color: #f47871;
-
-        --root-background: var(--left-pane-background-color);
-
-        --gutter-color: transparent;
-        --gutter-hover-color: #626262;
-
-        --tab-close-button-hover-background: #a45353;
-        --tab-close-button-hover-color: white;
-
-        --active-tab-background-color: #ffffff1c;
-        --active-tab-hover-background-color: var(--active-tab-background-color);
-        --active-tab-text-color: #ffffffcd;
-        --active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .2), -1px -1px 3px rgba(0, 0, 0, .4);
-        --active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .4);
-    
-        --inactive-tab-background-color: transparent;
-        --inactive-tab-hover-background-color: #ffffff0f;
-        --inactive-tab-text-color: #7c7c7c;
-
-        --right-pane-item-hover-background: #ffffff26;
-        --right-pane-item-hover-color: white;
-    
-        --scrollbar-border-color: #666;
-        --scrollbar-background-color: #333;
-        --link-color: lightskyblue;
-
-        --mermaid-theme: dark;
-
-        --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
-
-        --card-background-color: #363636;
-        --card-background-hover-color: #3c3c3c;
-        --card-background-press-color: #464646;
-        --card-border-color: #222222;
-        --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
-
-        --calendar-color: var(--menu-text-color);
-        --calendar-weekday-labels-color: var(--muted-text-color);
-        --calendar-day-hover-color: var(--hover-item-text-color);
-        --calendar-day-hover-background: var(--active-item-background-color);
-        --calendar-day-highlight-background: #8080805a;
-
-        --timeline-bullet-color: gray;
-        --timeline-bullet-hover-color: white;
-        --timeline-connector-color: #464646;
-        --timeline-connector-active-color: #545454;
-        --timeline-connector-hover-blend-mode: exclusion;
-
-        --tooltip-background-color: rgba(67, 67, 67, 0.86);
-        --tooltip-foreground-color: #ffffffeb;
-        --tooltip-shadow-color: rgba(0, 0, 0, 0.4);
-    }
-    
-    body ::-webkit-calendar-picker-indicator {
-        filter: invert(1);
-    }
-    
-    body .CodeMirror {
-        filter: invert(90%) hue-rotate(180deg);
-    }
-    
-    .excalidraw.theme--dark {
-        --theme-filter: invert(80%) hue-rotate(180deg) !important;
-    }
-    
-    body .todo-list input[type="checkbox"]:not(:checked):before {
-        border-color: var(--muted-text-color) !important;
-    }
-    
-    .btn-close {
-        filter: invert(1);
-    }
-}
\ No newline at end of file
+/* Import the dark color scheme when the system preference is set to dark mode */
+@import url(./theme-next-dark.css) (prefers-color-scheme: dark);
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
new file mode 100644
index 0000000000..0948c740c6
--- /dev/null
+++ b/src/public/stylesheets/theme-next/base.css
@@ -0,0 +1,79 @@
+@import url(./shell.css);
+@import url(./settings.css);
+@import url(./notes/text.css);
+
+@font-face {
+    font-family: "Noto Sans";
+    src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
+}
+
+@font-face {
+    font-family: "Ubuntu Sans";
+    src: url(../fonts/Ubuntu_Sans/UbuntuSans-VariableFont_wdth\,wght.ttf);
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
+}
+
+@font-face {
+    font-family: "Inter";
+    src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
+}
+
+:root {
+    /* --main-font-family: "Noto Sans", sans-serif; */
+    --main-font-family: "Segoe UI", sans-serif;
+    /* --main-font-family: "Ubuntu", sans-serif; */
+    /* --main-font-family: "Nunito", sans-serif; */
+    /* --main-font-family: "Inter", sans-serif; */
+
+    --main-font-size: normal;
+
+    --tree-font-family: var(--main-font-family);
+    --tree-font-size: normal;
+
+    --detail-font-family: var(--main-font-family);
+    --detail-font-size: normal;
+
+    --monospace-font-family: JetBrainsLight;
+    --monospace-font-size: normal;
+
+    --left-pane-item-selected-shadow-size: 2px;
+
+    --launcher-pane-size: 58px;
+    --launcher-pane-horizontal-size: 54px;
+    --launcher-pane-horizontal-icon-size: 20px;    
+    --launcher-pane-button-margin: 6px;
+    --launcher-pane-button-gap: 3px;
+
+    --tree-actions-toolbar-horizontal-margin: 8px;
+    --tree-actions-toolbar-vertical-margin: 8px;
+    --tree-actions-toolbar-padding-size: 4px;
+    --tree-actions-toolbar-collapsed-width: 40px;
+    --tree-actions-toolbar-expand-button-size: 25px;
+
+    --tab-bar-height: 50px;
+    --tab-height: 36px;
+    --tab-first-item-horiz-offset: 1px;
+    --new-tab-button-size: 24px;
+
+    --center-pane-border-radius: 10px;
+
+    --menu-padding-size: 8px;
+    --menu-item-icon-vert-offset: 0;    
+
+    --more-accented-background-color: var(--card-background-hover-color);
+
+    --timeline-left-gap: 20px;
+    --timeline-right-gap: 20px;
+    --timeline-item-top-padding: 4px;
+    --timeline-item-bottom-padding: 8px;
+    --timeline-bullet-size: 10px;
+    --timeline-bullet-vertical-pos: .75em;
+    --timeline-connector-size: 4px;
+
+    /* Theme capabilities */
+    --tab-note-icons: true;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/theme.css b/src/public/stylesheets/theme.css
new file mode 100644
index 0000000000..f8ac50dd47
--- /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 cb992b5da7..24a3c44972 100644
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -1072,9 +1072,12 @@
     "title": "Application Theme",
     "theme_label": "Theme",
     "override_theme_fonts_label": "Override theme fonts",
+    "auto_theme": "Auto",
     "light_theme": "Light",
     "dark_theme": "Dark",
-    "triliumnext": "TriliumNext (beta)",
+    "triliumnext": "TriliumNext Beta (Follow system color scheme)",
+    "triliumnext-light": "TriliumNext Beta (Light)",
+    "triliumnext-dark": "TriliumNext Beta (Dark)",
     "layout": "Layout",
     "layout-vertical-title": "Vertical",
     "layout-horizontal-title": "Horizontal",
diff --git a/src/public/translations/ro/translation.json b/src/public/translations/ro/translation.json
index 6cf12d1f11..466041770f 100644
--- a/src/public/translations/ro/translation.json
+++ b/src/public/translations/ro/translation.json
@@ -1195,8 +1195,12 @@
     "title": "Pragul de mod de citire automat"
   },
   "theme": {
+    "auto_theme": "Temă auto (se adaptează la schema de culori a sistemului)",
     "dark_theme": "Temă întunecată",
     "light_theme": "Temă luminoasă",
+    "triliumnext": "TriliumNext Beta (se adaptează la schema de culori a sistemului)",
+    "triliumnext-light": "TriliumNext Beta (luminoasă)",
+    "triliumnext-dark": "TriliumNext Beta (întunecată)",
     "override_theme_fonts_label": "Suprascrie fonturile temei",
     "theme_label": "Temă",
     "title": "Tema aplicației",
@@ -1204,8 +1208,7 @@
     "layout-horizontal-description": "bara de lansare se află sub bara de taburi, bara de taburi este pe toată lungimea.",
     "layout-horizontal-title": "Orizontal",
     "layout-vertical-title": "Vertical",
-    "layout-vertical-description": "bara de lansare se află pe stânga (implicit)",
-    "triliumnext": "TriliumNext (experimentală)"
+    "layout-vertical-description": "bara de lansare se află pe stânga (implicit)"
   },
   "toast": {
     "critical-error": {
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 658a47796a..aa943267cf 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -61,13 +61,19 @@ function index(req: Request, res: Response) {
 }
 
 function getThemeCssUrl(theme: string, themeNote: BNote | null) {
-    if (theme === 'light') {
+    if (theme === 'auto') {
+        return `${assetPath}/stylesheets/theme.css`;
+    } else if (theme === 'light') {
         // light theme is always loaded as baseline
         return false;
     } else if (theme === 'dark') {
         return `${assetPath}/stylesheets/theme-dark.css`;
     } else if (theme === "next") {
         return `${assetPath}/stylesheets/theme-next.css`;
+    } else if (theme === "next-light") {
+        return `${assetPath}/stylesheets/theme-next-light.css`;
+    } else if (theme === "next-dark") {
+        return `${assetPath}/stylesheets/theme-next-dark.css`;
     } else if (!process.env.TRILIUM_SAFE_MODE && themeNote) {
         return `api/notes/download/${themeNote.noteId}`;
     } else {