feat: allow selecting light/dark/follow themes in the webui (#924)

* login page follow browser darkmode settings * theme change based on selection in settings between follw system , light, dark * content page follow settings and fix syntax error * drop down menu color follow current theme * version number follow theme in login page * use footer instead of id for version * replace space with tab * move theme settings to the top of the list and fix typo * remove duplicate code and use a function instead * fix logic of change theme if you select follow system to not need reload anymore * fix code style with make styles * fix bug that eventlistener not remove when activate light or dark theme * less js and add theme with patch by @fmartingr * remove NightMode config and now everythings control with Theme * error instead of log if invalid theme selected Co-authored-by: Felipe Martin <[email protected]> * remove unneeded part and update swagger documents --------- Co-authored-by: Felipe Martin <[email protected]>
go-shiori · Jun 6, 2024 · 2a231ec · 2a231ec
1 parent 47a0143
commit 2a231ec
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 80 deletions.
diff --git a/docs/swagger/docs.go b/docs/swagger/docs.go
@@ -417,12 +417,12 @@ const docTemplate = `{
                 "MakePublic": {
                     "type": "boolean"
                 },
-                "NightMode": {
-                    "type": "boolean"
-                },
                 "ShowId": {
                     "type": "boolean"
                 },
+                "Theme": {
+                    "type": "string"
+                },
                 "UseArchive": {
                     "type": "boolean"
                 }

diff --git a/docs/swagger/swagger.json b/docs/swagger/swagger.json
@@ -406,12 +406,12 @@
                 "MakePublic": {
                     "type": "boolean"
                 },
-                "NightMode": {
-                    "type": "boolean"
-                },
                 "ShowId": {
                     "type": "boolean"
                 },
+                "Theme": {
+                    "type": "string"
+                },
                 "UseArchive": {
                     "type": "boolean"
                 }

diff --git a/docs/swagger/swagger.yaml b/docs/swagger/swagger.yaml
@@ -124,10 +124,10 @@ definitions:
         type: boolean
       MakePublic:
         type: boolean
-      NightMode:
-        type: boolean
       ShowId:
         type: boolean
+      Theme:
+        type: string
       UseArchive:
         type: boolean
     type: object

diff --git a/internal/http/routes/api/v1/auth_test.go b/internal/http/routes/api/v1/auth_test.go
@@ -250,7 +250,7 @@ func TestSettingsHandler(t *testing.T) {
 				ListMode:      true,
 				HideThumbnail: true,
 				HideExcerpt:   true,
-				NightMode:     true,
+				Theme:         "follow",
 				KeepMetadata:  true,
 				UseArchive:    true,
 				CreateEbook:   true,
@@ -274,7 +274,7 @@ func TestSettingsHandler(t *testing.T) {
 			"ListMode": false,
 			"HideThumbnail": false,
 			"HideExcerpt": false,
-			"NightMode": false,
+			"Theme": "follow",
 			"KeepMetadata": false,
 			"UseArchive": false,
 			"CreateEbook": false,

diff --git a/internal/model/account.go b/internal/model/account.go
@@ -16,15 +16,15 @@ type Account struct {
 }
 
 type UserConfig struct {
-	ShowId        bool `json:"ShowId"`
-	ListMode      bool `json:"ListMode"`
-	HideThumbnail bool `json:"HideThumbnail"`
-	HideExcerpt   bool `json:"HideExcerpt"`
-	NightMode     bool `json:"NightMode"`
-	KeepMetadata  bool `json:"KeepMetadata"`
-	UseArchive    bool `json:"UseArchive"`
-	CreateEbook   bool `json:"CreateEbook"`
-	MakePublic    bool `json:"MakePublic"`
+	ShowId        bool   `json:"ShowId"`
+	ListMode      bool   `json:"ListMode"`
+	HideThumbnail bool   `json:"HideThumbnail"`
+	HideExcerpt   bool   `json:"HideExcerpt"`
+	Theme         string `json:"Theme"`
+	KeepMetadata  bool   `json:"KeepMetadata"`
+	UseArchive    bool   `json:"UseArchive"`
+	CreateEbook   bool   `json:"CreateEbook"`
+	MakePublic    bool   `json:"MakePublic"`
 }
 
 func (c *UserConfig) Scan(value interface{}) error {

diff --git a/internal/view/assets/css/style.css b/internal/view/assets/css/style.css
diff --git a/internal/view/assets/js/page/base.js b/internal/view/assets/js/page/base.js
@@ -16,7 +16,6 @@ export default {
 				return {
 					ShowId: false,
 					ListMode: false,
-					NightMode: false,
 					HideThumbnail: false,
 					HideExcerpt: false,
 					KeepMetadata: false,
@@ -95,6 +94,23 @@ export default {
 					return false;
 			}
 		},
+		themeSwitch(theme) {
+			switch (theme) {
+				case "light":
+					document.body.classList.remove("dark");
+					document.body.classList.add("light");
+					break;
+				case "dark":
+					document.body.classList.remove("light");
+					document.body.classList.add("dark");
+					break;
+				case "follow":
+					document.body.classList.remove("light", "dark");
+					break;
+				default:
+					console.error("Invalid theme selected");
+			}
+		},
 		showErrorDialog(msg) {
 			var sessionError = this.isSessionError(msg),
 				dialogContent = sessionError

diff --git a/internal/view/assets/js/page/setting.js b/internal/view/assets/js/page/setting.js
@@ -4,6 +4,14 @@ var template = `
     <div class="setting-container">
         <details open class="setting-group" id="setting-display">
             <summary>Display</summary>
+            <label>
+                Theme &nbsp;
+                <select v-model="appOptions.Theme" @change="saveSetting">
+                <option value="follow">Follow system</option>
+                <option value="light">Light theme</option>
+                <option value="dark">Dark theme</option>
+                </select>
+            </label>
             <label>
                 <input type="checkbox" v-model="appOptions.ShowId" @change="saveSetting">
                 Show bookmark's ID
@@ -20,10 +28,6 @@ var template = `
                 <input type="checkbox" v-model="appOptions.HideExcerpt" @change="saveSetting">
                 Hide bookmark's excerpt
             </label>
-            <label>
-                <input type="checkbox" v-model="appOptions.NightMode" @change="saveSetting">
-                Use dark theme
-            </label>
         </details>
         <details v-if="activeAccount.owner" open class="setting-group" id="setting-bookmarks">
             <summary>Bookmarks</summary>
@@ -92,7 +96,7 @@ export default {
 				ListMode: this.appOptions.ListMode,
 				HideThumbnail: this.appOptions.HideThumbnail,
 				HideExcerpt: this.appOptions.HideExcerpt,
-				NightMode: this.appOptions.NightMode,
+				Theme: this.appOptions.Theme,
 			};
 
 			if (this.activeAccount.owner) {

diff --git a/internal/view/assets/less/common.less b/internal/view/assets/less/common.less
@@ -1,36 +1,12 @@
-:root {
-	--bg: #eee;
-	--sidebarBg: #292929;
-	--sidebarHoverBg: #232323;
-	--headerBg: #fff;
-	--contentBg: #fff;
-	--border: #e5e5e5;
-	--color: #232323;
-	--colorLink: #999;
-	--colorSidebar: #fff;
-	--main: #f44336;
-	--errorColor: #f44336;
-	--selectedBg: #ffe7e5;
-
-	@media (prefers-color-scheme: dark) {
-		&:root {
-			--bg: #1f1f1f;
-			--headerBg: #292929;
-			--contentBg: #292929;
-			--border: #191919;
-			--color: #fff;
-			--selectedBg: #261918;
-		}
-	}
+select {
+	background: var(--contentBg);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	color: var(--color);
 }
 
-&.night {
-	--bg: #1f1f1f;
-	--headerBg: #292929;
-	--contentBg: #292929;
-	--border: #191919;
-	--color: #fff;
-	--selectedBg: #261918;
+footer {
+	color: var(--color);
 }
 
 * {

diff --git a/internal/view/assets/less/style.less b/internal/view/assets/less/style.less
@@ -3,6 +3,7 @@
 @import "./libs/fontawesome.min.css";
 
 // Less files
+@import "./theme.less";
 @import "./common.less";
 @import "./custom-dialog.less";
 @import "./bookmark-item.less";
diff --git a/internal/view/assets/less/theme.less b/internal/view/assets/less/theme.less
@@ -0,0 +1,47 @@
+:root {
+	--colorLink: #999;
+	--colorSidebar: #fff;
+	--errorColor: #f44336;
+	--main: #f44336;
+	--sidebarBg: #292929;
+	--sidebarHoverBg: #232323;
+	.light-colors();
+}
+
+.night-colors {
+	--bg: #1f1f1f;
+	--border: #191919;
+	--color: #fff;
+	--contentBg: #292929;
+	--headerBg: #292929;
+	--selectedBg: #261918;
+}
+
+.light-colors {
+	--bg: #eee;
+	--border: #e5e5e5;
+	--color: #232323;
+	--contentBg: #fff;
+	--headerBg: #fff;
+	--selectedBg: #ffe7e5;
+}
+
+body.dark {
+	.night-colors();
+}
+
+body.light {
+	.light-colors();
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		.night-colors();
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		.light-colors();
+	}
+}
diff --git a/internal/view/content.html b/internal/view/content.html
@@ -20,8 +20,8 @@
 	<script src="assets/js/vue.min.js"></script>
 </head>
 
-<body class="night">
-	<div id="content-scene" :class="{night: appOptions.NightMode}">
+<body>
+	<div id="content-scene">
 		<div id="header">
 			<p id="metadata" v-cloak>Added {{localtime()}}</p>
 			<p id="title" dir="auto">$$.Book.Title$$</p>
@@ -62,19 +62,18 @@
 					var opts = JSON.parse(localStorage.getItem("shiori-account")) || {},
 						ShowId = (typeof opts.config.ShowId === "boolean") ? opts.config.ShowId : false,
 						ListMode = (typeof opts.config.ListMode === "boolean") ? opts.config.ListMode : false,
-						NightMode = (typeof opts.config.NightMode === "boolean") ? opts.config.NightMode : false,
-						UseArchive = (typeof opts.config.UseArchive === "boolean") ? opts.config.UseArchive : false;
+						Theme = (typeof opts.config.Theme === "string" && opts.config.Theme !== "") ? opts.config.Theme : "follow",
+						UseArchive = (typeof opts.config.UseArchive === "boolean") ? opts.config.UseArchive : false,
 						CreateEbook = (typeof opts.config.CreateEbook === "boolean") ? opts.config.CreateEbook : false;
 
 					this.appOptions = {
 						ShowId: ShowId,
 						ListMode: ListMode,
-						NightMode: NightMode,
+						Theme: Theme,
 						UseArchive: UseArchive,
 						CreateEbook: CreateEbook,
 					};
-
-					document.body.className = NightMode ? "night" : "";
+                    this.themeSwitch(Theme)
 				}
 			},
 			mounted() {

diff --git a/internal/view/index.html b/internal/view/index.html
@@ -20,8 +20,8 @@
 	<script src="assets/js/url.min.js"></script>
 </head>
 
-<body class="night">
-	<div id="main-scene" :class="{night: appOptions.NightMode}">
+<body>
+	<div id="main-scene">
 		<div id="main-sidebar">
 			<a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="switchPage(item.page)">
 				<i class="fas fa-fw" :class="item.icon"></i>
@@ -107,15 +107,15 @@
 				},
 				saveSetting(opts) {
 					this.appOptions = opts;
-					document.body.className = opts.config.NightMode ? "night" : "";
+                    this.themeSwitch(opts.Theme)
 				},
 				loadSetting() {
 					var opts = JSON.parse(localStorage.getItem("shiori-account")) || {},
 						ShowId = (typeof opts.config.ShowId === "boolean") ? opts.config.ShowId : false,
 						ListMode = (typeof opts.config.ListMode === "boolean") ? opts.config.ListMode : false,
 						HideThumbnail = (typeof opts.config.HideThumbnail === "boolean") ? opts.config.HideThumbnail : false,
 						HideExcerpt = (typeof opts.config.HideExcerpt === "boolean") ? opts.config.HideExcerpt : false,
-						NightMode = (typeof opts.config.NightMode === "boolean") ? opts.config.NightMode : false,
+                        Theme = (typeof opts.config.Theme === "string" && opts.config.Theme !== "") ? opts.config.Theme : "follow",
 						KeepMetadata = (typeof opts.config.KeepMetadata === "boolean") ? opts.config.KeepMetadata : false,
 						UseArchive = (typeof opts.config.UseArchive === "boolean") ? opts.config.UseArchive : false,
 						CreateEbook = (typeof opts.config.CreateEbook === "boolean") ? opts.config.CreateEbook : false,
@@ -126,14 +126,14 @@
 						ListMode: ListMode,
 						HideThumbnail: HideThumbnail,
 						HideExcerpt: HideExcerpt,
-						NightMode: NightMode,
+						Theme: Theme,
 						KeepMetadata: KeepMetadata,
 						UseArchive: UseArchive,
 						CreateEbook: CreateEbook,
 						MakePublic: MakePublic,
 					};
+                    this.themeSwitch(Theme)
 
-					document.body.className = NightMode ? "night" : "";
 				},
 				loadAccount() {
 					var account = JSON.parse(localStorage.getItem("shiori-account")) || {},

diff --git a/internal/view/login.html b/internal/view/login.html
@@ -21,7 +21,7 @@
 </head>
 
 <body>
-	<div id="login-scene" :class="{night: NightMode}">
+	<div id="login-scene">
 		<p class="error-message" v-if="error !== ''">{{error}}</p>
 		<div id="login-box">
 			<form @submit.prevent="login">
@@ -48,9 +48,9 @@
 				</div>
 			</form>
 		</div>
-		<div>
+		<footer>
 			<p>$$.Version$$</p>
-		</div>
+		</footer>
 	</div>
 
 	<script type="module">
@@ -62,7 +62,6 @@
 				username: "",
 				password: "",
 				remember: false,
-				NightMode: false,
 			},
 			methods: {
 				async getErrorMessage(err) {
@@ -148,12 +147,6 @@
 						})
 					});
 				},
-				loadSetting() {
-					var opts = JSON.parse(localStorage.getItem("shiori-account")) || {},
-						NightMode = (typeof opts.config.NightMode === "boolean") ? opts.configNightMode : false;
-
-					this.NightMode = NightMode;
-				}
 			},
 			mounted() {
 				// Load setting