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 5948b373f..2de30778d 100644 --- a/src/public/app/widgets/type_widgets/options/appearance/theme.js +++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js @@ -41,8 +41,9 @@ export default class ThemeOptions extends OptionsWidget { async optionsLoaded(options) { const themes = [ + { val: 'next', title: t("theme.triliumnext") }, { 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.css b/src/public/stylesheets/theme-next.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index 9bfc970be..eff426973 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1061,7 +1061,8 @@ "theme_label": "Theme", "override_theme_fonts_label": "Override theme fonts", "light_theme": "Light", - "dark_theme": "Dark" + "dark_theme": "Dark", + "triliumnext": "TriliumNext" }, "zoom_factor": { "title": "Zoom Factor (desktop build only)", diff --git a/src/routes/index.ts b/src/routes/index.ts index ca204e868..f5951d3c6 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -54,6 +54,8 @@ function getThemeCssUrl(theme: string) { return false; // light theme is always loaded as baseline } else if (theme === 'dark') { return `${assetPath}/stylesheets/theme-dark.css`; + } else if (theme === "next") { + return `${assetPath}/stylesheets/theme-next.css`; } else { const themeNote = attributeService.getNoteWithLabel('appTheme', theme);