Merge pull request #1361 from TriliumNext/themeUseNextAsBase

Theme use next as base

Author: eliandoran

src/public/translations/en/translation.json

@@ -376,7 +376,7 @@
     "auto_read_only_disabled": "text/code notes can be set automatically into read mode when they are too large. You can disable this behavior on per-note basis by adding this label to the note",
     "app_css": "marks CSS notes which are loaded into the Trilium application and can thus be used to modify Trilium's looks.",
     "app_theme": "marks CSS notes which are full Trilium themes and are thus available in Trilium options.",
-    "app_theme_base": "set to \"next\" in order to use the TriliumNext theme as a base for a custom theme instead of the legacy one.",
+    "app_theme_base": "set to \"next\", \"next-light\", or \"next-dark\" to use the corresponding TriliumNext theme (auto, light or dark) as the base for a custom theme, instead of the legacy one.",
     "css_class": "value of this label is then added as CSS class to the node representing given note in the tree. This can be useful for advanced theming. Can be used in template notes.",
     "icon_class": "value of this label is added as a CSS class to the icon on the tree which can help visually distinguish the notes in the tree. Example might be bx bx-home - icons are taken from boxicons. Can be used in template notes.",
     "page_size": "number of items per page in note listing",

src/routes/index.ts

@@ -37,7 +37,7 @@ function index(req: Request, res: Response) {
         device: view,
         csrfToken: csrfToken,
         themeCssUrl: getThemeCssUrl(theme, themeNote),
-        themeUseNextAsBase: themeNote?.getAttributeValue("label", "appThemeBase") === "next",
+        themeUseNextAsBase: themeNote?.getAttributeValue("label", "appThemeBase"),
         headingStyle: options.headingStyle,
         layoutOrientation: options.layoutOrientation,
         platform: process.platform,

src/views/desktop.ejs

@@ -53,8 +53,12 @@
 <link href="<%= themeCssUrl %>" rel="stylesheet">
 <% } %>
 
-<% if (themeUseNextAsBase) { %>
-<link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet">
+<% if (themeUseNextAsBase === "next") { %>
+  <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet">
+<% } else if (themeUseNextAsBase === "next-dark") { %>
+  <link href="<%= assetPath %>/stylesheets/theme-next-dark.css" rel="stylesheet">
+<% } else if (themeUseNextAsBase === "next-light") { %>
+  <link href="<%= assetPath %>/stylesheets/theme-next-light.css" rel="stylesheet">
 <% } %>
 
 <link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">