diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 17e0fabcf..c86e092e4 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1,182 +1,3 @@
-:root {
-    --main-font-family: inherit;
-    --main-font-size: normal;
-    --tree-font-family: inherit;
-    --tree-font-size: normal;
-    --detail-font-family: inherit;
-    --detail-font-size: normal;
-    --detail-text-font-family: inherit;
-    --main-background-color: white;
-    --main-text-color: black;
-    --main-border-color: #ccc;
-    --accented-background-color: #eee;
-    --more-accented-background-color: #ccc;
-    --header-background-color: #f8f8f8;
-    --button-background-color: #eee;
-    --button-disabled-background-color: #ccc;
-    --button-border-color: #ddd;
-    --button-text-color: black;
-    --button-border-radius: 5px;
-    --muted-text-color: #444;
-    --input-text-color: black;
-    --input-background-color: white;
-    --modal-background-color: white;
-    --hover-item-text-color: black;
-    --hover-item-background-color: #eee;
-    --active-item-text-color: black;
-    --active-item-background-color: #ccc;
-    --menu-text-color: black;
-    --menu-background-color: white;
-    --tooltip-background-color: #f8f8f8;
-    --link-color: blue;
-}
-
-body.theme-black {
-    --main-background-color: black;
-    --main-text-color: white;
-    --main-border-color: #ddd;
-    --accented-background-color: #222;
-    --more-accented-background-color: #444;
-    --header-background-color: black;
-    --button-background-color: #333;
-    --button-border-color: #444;
-    --button-text-color: white;
-    --button-border-radius: 5px;
-    --muted-text-color: #ccc;
-    --input-text-color: white;
-    --input-background-color: black;
-    --modal-background-color: #222;
-    --hover-item-text-color: black;
-    --hover-item-background-color: #aaa;
-    --active-item-text-color: black;
-    --active-item-background-color: #ccc;
-    --menu-text-color: white;
-    --menu-background-color: #222;
-    --tooltip-background-color: black;
-    --link-color: lightskyblue;
-}
-
-body.theme-black .CodeMirror {
-    filter: invert(100%) hue-rotate(180deg);
-}
-
-body.theme-dark {
-    --main-background-color: #333;
-    --main-text-color: white;
-    --main-border-color: #ddd;
-    --accented-background-color: #555;
-    --more-accented-background-color: #777;
-    --header-background-color: #333;
-    --button-background-color: #555;
-    --button-border-color: #444;
-    --button-text-color: white;
-    --button-border-radius: 5px;
-    --muted-text-color: #ccc;
-    --input-text-color: white;
-    --input-background-color: #333;
-    --modal-background-color: #555;
-    --hover-item-text-color: black;
-    --hover-item-background-color: #aaa;
-    --active-item-text-color: black;
-    --active-item-background-color: #ccc;
-    --menu-text-color: white;
-    --menu-background-color: #222;
-    --tooltip-background-color: #333;
-    --link-color: lightskyblue;
-}
-
-body.theme-dark .CodeMirror {
-    filter: invert(90%) hue-rotate(180deg);
-}
-
-body {
-    /* -- Overrides generic colors. ------------------------------------------------------------- */
-
-    --ck-color-base-foreground: var(--accented-background-color);
-    --ck-color-focus-border: var(--main-border-color);
-    --ck-color-text: var(--main-text-color);
-    --ck-color-shadow-drop: var(--main-background-color);
-    --ck-color-shadow-inner: var(--main-background-color);
-
-    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
-
-    --ck-color-button-default-background: var(--accented-background-color);
-    --ck-color-button-default-hover-background: var(--more-accented-background-color);
-    --ck-color-button-default-active-background: var(--more-accented-background-color);
-    --ck-color-button-default-active-shadow: var(--more-accented-background-color);
-    --ck-color-button-default-disabled-background: var(--accented-background-color);
-
-    --ck-color-button-on-background: var(--accented-background-color);
-    --ck-color-button-on-hover-background: var(--more-accented-background-color);
-    --ck-color-button-on-active-background: var(--more-accented-background-color);
-    --ck-color-button-on-active-shadow: var(--more-accented-background-color);
-    --ck-color-button-on-disabled-background: var(--main-background-color);
-
-    --ck-color-button-action-background: var(--accented-background-color);
-    --ck-color-button-action-hover-background: var(--more-accented-background-color);
-    --ck-color-button-action-active-background: var(--more-accented-background-color);
-    --ck-color-button-action-active-shadow: var(--more-accented-background-color);
-    --ck-color-button-action-disabled-background: var(--main-background-color);
-    --ck-color-button-action-text: var(--main-text-color);
-
-    --ck-color-button-save: hsl(120, 100%, 46%);
-    --ck-color-button-cancel: hsl(15, 100%, 56%);
-
-    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
-
-    --ck-color-dropdown-panel-background: var(--accented-background-color);
-    --ck-color-dropdown-panel-border: var(--main-border-color);
-
-    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
-
-    --ck-color-input-background: var(--accented-background-color);
-    --ck-color-input-border: var(--main-border-color);
-    --ck-color-input-text: var(--main-text-color);
-    --ck-color-input-disabled-background: var(--main-background-color);
-    --ck-color-input-disabled-border: var(--main-border-color);
-    --ck-color-input-disabled-text: var(--muted-text-color);
-
-    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
-
-    --ck-color-list-background: var(--accented-background-color);
-    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
-    --ck-color-list-button-on-background: var(--ck-color-base-active);
-    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
-    --ck-color-list-button-on-text: var(--ck-color-base-background);
-
-    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
-
-    --ck-color-panel-background: var(--accented-background-color);
-    --ck-color-panel-border: var(--main-border-color);
-
-    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
-
-    --ck-color-toolbar-background: var(--accented-background-color);
-    --ck-color-toolbar-border: var(--main-border-color);
-
-    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
-
-    --ck-color-tooltip-background: var(--accented-background-color);
-    --ck-color-tooltip-text: var(--main-text-color);
-
-    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
-
-    --ck-color-image-caption-background: var(--main-background-color);
-    --ck-color-image-caption-text: var(--main-text-color);
-
-    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
-
-    --ck-color-widget-blurred-border: var(--main-border-color);
-    --ck-color-widget-hover-border: var(--main-border-color);
-    --ck-color-widget-editable-focus-background: var(--main-background-color);
-
-    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
-
-    --ck-color-link-default: var(--link-color);
-
-    --ck-color-table-focused-cell-background: var(--more-accented-background-color);
-}
-
 html {
     /* this fixes FF filter vs. position fixed bug: https://github.com/zadam/trilium/issues/233 */
     height: 100%;
diff --git a/src/public/stylesheets/themes.css b/src/public/stylesheets/themes.css
new file mode 100644
index 000000000..4a5bf443b
--- /dev/null
+++ b/src/public/stylesheets/themes.css
@@ -0,0 +1,178 @@
+:root {
+    --main-font-family: inherit;
+    --main-font-size: normal;
+    --tree-font-family: inherit;
+    --tree-font-size: normal;
+    --detail-font-family: inherit;
+    --detail-font-size: normal;
+    --detail-text-font-family: inherit;
+    --main-background-color: white;
+    --main-text-color: black;
+    --main-border-color: #ccc;
+    --accented-background-color: #eee;
+    --more-accented-background-color: #ccc;
+    --header-background-color: #f8f8f8;
+    --button-background-color: #eee;
+    --button-disabled-background-color: #ccc;
+    --button-border-color: #ddd;
+    --button-text-color: black;
+    --button-border-radius: 5px;
+    --muted-text-color: #444;
+    --input-text-color: black;
+    --input-background-color: white;
+    --modal-background-color: white;
+    --hover-item-text-color: black;
+    --hover-item-background-color: #eee;
+    --active-item-text-color: black;
+    --active-item-background-color: #ccc;
+    --menu-text-color: black;
+    --menu-background-color: white;
+    --tooltip-background-color: #f8f8f8;
+    --link-color: blue;
+}
+
+body.theme-black {
+    --main-background-color: black;
+    --main-text-color: white;
+    --main-border-color: #ddd;
+    --accented-background-color: #222;
+    --more-accented-background-color: #444;
+    --header-background-color: black;
+    --button-background-color: #333;
+    --button-border-color: #444;
+    --button-text-color: white;
+    --button-border-radius: 5px;
+    --muted-text-color: #ccc;
+    --input-text-color: white;
+    --input-background-color: black;
+    --modal-background-color: #222;
+    --hover-item-text-color: black;
+    --hover-item-background-color: #aaa;
+    --active-item-text-color: black;
+    --active-item-background-color: #ccc;
+    --menu-text-color: white;
+    --menu-background-color: #222;
+    --tooltip-background-color: black;
+    --link-color: lightskyblue;
+}
+
+body.theme-black .CodeMirror {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
+body.theme-dark {
+    --main-background-color: #333;
+    --main-text-color: white;
+    --main-border-color: #ddd;
+    --accented-background-color: #555;
+    --more-accented-background-color: #777;
+    --header-background-color: #333;
+    --button-background-color: #555;
+    --button-border-color: #444;
+    --button-text-color: white;
+    --button-border-radius: 5px;
+    --muted-text-color: #ccc;
+    --input-text-color: white;
+    --input-background-color: #333;
+    --modal-background-color: #555;
+    --hover-item-text-color: black;
+    --hover-item-background-color: #aaa;
+    --active-item-text-color: black;
+    --active-item-background-color: #ccc;
+    --menu-text-color: white;
+    --menu-background-color: #222;
+    --tooltip-background-color: #333;
+    --link-color: lightskyblue;
+}
+
+body.theme-dark .CodeMirror {
+    filter: invert(90%) hue-rotate(180deg);
+}
+
+body {
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+    --ck-color-base-foreground: var(--accented-background-color);
+    --ck-color-focus-border: var(--main-border-color);
+    --ck-color-text: var(--main-text-color);
+    --ck-color-shadow-drop: var(--main-background-color);
+    --ck-color-shadow-inner: var(--main-background-color);
+
+    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+    --ck-color-button-default-background: var(--accented-background-color);
+    --ck-color-button-default-hover-background: var(--more-accented-background-color);
+    --ck-color-button-default-active-background: var(--more-accented-background-color);
+    --ck-color-button-default-active-shadow: var(--more-accented-background-color);
+    --ck-color-button-default-disabled-background: var(--accented-background-color);
+
+    --ck-color-button-on-background: var(--accented-background-color);
+    --ck-color-button-on-hover-background: var(--more-accented-background-color);
+    --ck-color-button-on-active-background: var(--more-accented-background-color);
+    --ck-color-button-on-active-shadow: var(--more-accented-background-color);
+    --ck-color-button-on-disabled-background: var(--main-background-color);
+
+    --ck-color-button-action-background: var(--accented-background-color);
+    --ck-color-button-action-hover-background: var(--more-accented-background-color);
+    --ck-color-button-action-active-background: var(--more-accented-background-color);
+    --ck-color-button-action-active-shadow: var(--more-accented-background-color);
+    --ck-color-button-action-disabled-background: var(--main-background-color);
+    --ck-color-button-action-text: var(--main-text-color);
+
+    --ck-color-button-save: hsl(120, 100%, 46%);
+    --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+    --ck-color-dropdown-panel-background: var(--accented-background-color);
+    --ck-color-dropdown-panel-border: var(--main-border-color);
+
+    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+    --ck-color-input-background: var(--accented-background-color);
+    --ck-color-input-border: var(--main-border-color);
+    --ck-color-input-text: var(--main-text-color);
+    --ck-color-input-disabled-background: var(--main-background-color);
+    --ck-color-input-disabled-border: var(--main-border-color);
+    --ck-color-input-disabled-text: var(--muted-text-color);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+    --ck-color-list-background: var(--accented-background-color);
+    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
+    --ck-color-list-button-on-background: var(--ck-color-base-active);
+    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+    --ck-color-list-button-on-text: var(--ck-color-base-background);
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+    --ck-color-panel-background: var(--accented-background-color);
+    --ck-color-panel-border: var(--main-border-color);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+    --ck-color-toolbar-background: var(--accented-background-color);
+    --ck-color-toolbar-border: var(--main-border-color);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+    --ck-color-tooltip-background: var(--accented-background-color);
+    --ck-color-tooltip-text: var(--main-text-color);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+    --ck-color-image-caption-background: var(--main-background-color);
+    --ck-color-image-caption-text: var(--main-text-color);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+    --ck-color-widget-blurred-border: var(--main-border-color);
+    --ck-color-widget-hover-border: var(--main-border-color);
+    --ck-color-widget-editable-focus-background: var(--main-background-color);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+    --ck-color-link-default: var(--link-color);
+
+    --ck-color-table-focused-cell-background: var(--more-accented-background-color);
+}
\ No newline at end of file
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index e809f3809..a111cea56 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -328,6 +328,7 @@
 <script src="libraries/chrome-tabs/chrome-tabs.js"></script>
 <link href="libraries/chrome-tabs/chrome-tabs.css" rel="stylesheet">
 
+<link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
 <link href="stylesheets/desktop.css" rel="stylesheet">
 
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index b7b8855fb..d516ad3a3 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -98,6 +98,7 @@
 
 <script src="javascripts/mobile.js" crossorigin type="module"></script>
 
+<link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
 <link href="stylesheets/mobile.css" rel="stylesheet">