switching themes via loading only specific CSS

This commit is contained in:
zadam
2021-09-26 15:24:37 +02:00
parent 2fcb0c05c0
commit 113bebed3b
15 changed files with 219 additions and 232 deletions

View File

@@ -5,7 +5,7 @@
<link rel="shortcut icon" href="favicon.ico">
<title>Trilium Notes</title>
</head>
<body class="desktop theme-<%= theme %> heading-style-<%= headingStyle %>" style="--main-font-size: <%= mainFontSize %>%; --tree-font-size: <%= treeFontSize %>%; --detail-font-size: <%= detailFontSize %>%;">
<body class="desktop heading-style-<%= headingStyle %>" style="--main-font-size: <%= mainFontSize %>%; --tree-font-size: <%= treeFontSize %>%; --detail-font-size: <%= detailFontSize %>%;">
<noscript>Trilium requires JavaScript to be enabled.</noscript>
<script>
@@ -78,7 +78,13 @@
<script src="libraries/split.min.js"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/ckeditor-theme.css" rel="stylesheet">
<link href="stylesheets/theme-light.css" rel="stylesheet">
<% if (themeCssUrl) { %>
<link href="<%= themeCssUrl %>" rel="stylesheet">
<% } %>
<link href="stylesheets/style.css" rel="stylesheet">
<script>

View File

@@ -131,7 +131,10 @@
<script src="app/mobile.js" crossorigin type="module"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/ckeditor-theme.css" rel="stylesheet">
<% if (themeCssUrl) { %>
<link href="<%= themeCssUrl %>" rel="stylesheet">
<% } %>
<link href="stylesheets/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">

View File

@@ -6,15 +6,6 @@
<title>Setup</title>
<style>
@font-face {
font-family: MontserratLight;
src: url(../fonts/Montserrat-Light.ttf);
}
body {
font-family: MontserratLight;
}
.lds-ring {
display: inline-block;
position: relative;
@@ -101,8 +92,8 @@
<div style="display: flex; justify-content: space-around;">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="theme" id="theme-white" value="white" data-bind="checked: theme" checked>
<label class="form-check-label" for="theme-white">white</label>
<input class="form-check-input" type="radio" name="theme" id="theme-light" value="light" data-bind="checked: theme" checked>
<label class="form-check-label" for="theme-light">light</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="theme" id="theme-dark" value="dark" data-bind="checked: theme">
@@ -217,6 +208,6 @@
<script src="libraries/knockout.min.js"></script>
<script src="app/setup.js" crossorigin type="module"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
<link href="stylesheets/theme-light.css" rel="stylesheet">
</body>
</html>