new: Added dark and light theme switching

config/mInfo.go

@@ -1,7 +1,6 @@
 package config
 
 type mInfo struct {
-	Logo        string `yaml:"logo"`
 	Link        string `yaml:"link"`
 	Title       string `yaml:"title"`
 	Author      string `yaml:"author"`

internal/mApp/mHandler.go

@@ -39,7 +39,6 @@ func (ma *MApp) IndexHandler(ctx *gin.Context) {
 	// return some basic information
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":       ma.Config.MSite.Info.Logo,
 			"title":      ma.Config.MSite.Info.Title,
 			"author":     ma.Config.MSite.Info.Author,
 			"language":   ma.Config.MSite.Info.Language,
@@ -115,7 +114,6 @@ func (ma *MApp) PostHandler(ctx *gin.Context) {
 
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,
@@ -202,7 +200,6 @@ func (ma *MApp) TagHandler(ctx *gin.Context) {
 	tagListJson, _ := json.Marshal(tagList)
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,
@@ -291,7 +288,6 @@ func (ma *MApp) CategoryHandler(ctx *gin.Context) {
 
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,
@@ -382,7 +378,6 @@ func (ma *MApp) ArchiveHandler(ctx *gin.Context) {
 
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":       ma.Config.MSite.Info.Logo,
 			"title":      ma.Config.MSite.Info.Title,
 			"author":     ma.Config.MSite.Info.Author,
 			"language":   ma.Config.MSite.Info.Language,
@@ -472,7 +467,6 @@ func (ma *MApp) SearchHandler(ctx *gin.Context) {
 
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,
@@ -562,7 +556,6 @@ func (ma *MApp) AboutHandler(ctx *gin.Context) {
 	// return some basic information
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,
@@ -605,7 +598,6 @@ func (ma *MApp) RSSHandler(ctx *gin.Context) {
 func (ma *MApp) FriendHandler(ctx *gin.Context) {
 	resData := gin.H{
 		"site_info": gin.H{
-			"logo":      ma.Config.MSite.Info.Logo,
 			"title":     ma.Config.MSite.Info.Title,
 			"author":    ma.Config.MSite.Info.Author,
 			"language":  ma.Config.MSite.Info.Language,

templates/default/assets/css/global.css

@@ -1,12 +1,30 @@
 :root{
-    /* colors */
-    --primary-color: #8589e0;
-    --secondary-color: #b2cbd3;
+    /* dark mode */
+    --dark-primary-color: #c5c6ff;
+    --dark-secondary-color: #898cc8;
 
-    --primary-text-color: #c9cacc;
-    --secondary-text-color: #9c9c9c;
+    --dark-primary-text-color: #e4e1e9;
+    --dark-secondary-text-color: #a3a2ac;
 
-    --background-color: #191c1d;
+    --dark-background-color: #131318;
+
+    /* light mode */
+    --light-primary-color: #6d6faa;
+    --light-secondary-color: #737388;
+
+    --light-primary-text-color: #303036;
+    --light-secondary-text-color: #5f5e67;
+
+    --light-background-color: #fbf8ff;
+
+    /* used color */
+    --primary-color: #0;
+    --secondary-color: #0;
+
+    --primary-text-color: #0;
+    --secondary-text-color: #0;
+
+    --background-color: #0;
 }
 
 @font-face {
@@ -126,7 +144,7 @@ a:hover {
     height: 30px;
     line-height: 30px;
     display: inline;
-    border: none;
+    border: 1px var(--secondary-color) solid;
     border-radius: 4px;
 }
 
@@ -134,11 +152,25 @@ a:hover {
     width: 30px;
     height: 30px;
     display: inline;
-    border: none;
     border-radius: 4px;
-    background: var(--secondary-color);
+    border: 1px var(--secondary-color) solid;
 }
 
 .search-button:hover {
     background: var(--primary-color);
 }
+
+.theme-wrap {
+    width: 36px;
+    height: 36px;
+    position: fixed;
+    right: 30px;
+    bottom: 50px;
+    color: var(--secondary-color);
+    z-index: 999;
+}
+
+.theme-wrap:hover {
+    color: var(--primary-color);
+    cursor: pointer;
+}

templates/default/assets/css/lib/xcode-light.css

@@ -0,0 +1,69 @@
+/* Background */ .highlight-bg { background-color: #ffffff }
+/* PreWrapper */ .highlight-chroma { background-color: #ffffff; }
+/* Error */ .highlight-chroma .highlight-err { color: #000000 }
+/* LineTableTD */ .highlight-chroma .highlight-lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .highlight-chroma .highlight-lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .highlight-chroma .highlight-hl { background-color: #e5e5e5 }
+/* LineNumbersTable */ .highlight-chroma .highlight-lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .highlight-chroma .highlight-ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .highlight-chroma .highlight-line { display: flex; }
+/* Keyword */ .highlight-chroma .highlight-k { color: #a90d91 }
+/* KeywordConstant */ .highlight-chroma .highlight-kc { color: #a90d91 }
+/* KeywordDeclaration */ .highlight-chroma .highlight-kd { color: #a90d91 }
+/* KeywordNamespace */ .highlight-chroma .highlight-kn { color: #a90d91 }
+/* KeywordPseudo */ .highlight-chroma .highlight-kp { color: #a90d91 }
+/* KeywordReserved */ .highlight-chroma .highlight-kr { color: #a90d91 }
+/* KeywordType */ .highlight-chroma .highlight-kt { color: #a90d91 }
+/* Name */ .highlight-chroma .highlight-n { color: #000000 }
+/* NameAttribute */ .highlight-chroma .highlight-na { color: #836c28 }
+/* NameBuiltin */ .highlight-chroma .highlight-nb { color: #a90d91 }
+/* NameBuiltinPseudo */ .highlight-chroma .highlight-bp { color: #5b269a }
+/* NameClass */ .highlight-chroma .highlight-nc { color: #3f6e75 }
+/* NameConstant */ .highlight-chroma .highlight-no { color: #000000 }
+/* NameDecorator */ .highlight-chroma .highlight-nd { color: #000000 }
+/* NameEntity */ .highlight-chroma .highlight-ni { color: #000000 }
+/* NameException */ .highlight-chroma .highlight-ne { color: #000000 }
+/* NameFunction */ .highlight-chroma .highlight-nf { color: #000000 }
+/* NameFunctionMagic */ .highlight-chroma .highlight-fm { color: #000000 }
+/* NameLabel */ .highlight-chroma .highlight-nl { color: #000000 }
+/* NameNamespace */ .highlight-chroma .highlight-nn { color: #000000 }
+/* NameOther */ .highlight-chroma .highlight-nx { color: #000000 }
+/* NameProperty */ .highlight-chroma .highlight-py { color: #000000 }
+/* NameTag */ .highlight-chroma .highlight-nt { color: #000000 }
+/* NameVariable */ .highlight-chroma .highlight-nv { color: #000000 }
+/* NameVariableClass */ .highlight-chroma .highlight-vc { color: #000000 }
+/* NameVariableGlobal */ .highlight-chroma .highlight-vg { color: #000000 }
+/* NameVariableInstance */ .highlight-chroma .highlight-vi { color: #000000 }
+/* NameVariableMagic */ .highlight-chroma .highlight-vm { color: #000000 }
+/* Literal */ .highlight-chroma .highlight-l { color: #1c01ce }
+/* LiteralDate */ .highlight-chroma .highlight-ld { color: #1c01ce }
+/* LiteralString */ .highlight-chroma .highlight-s { color: #c41a16 }
+/* LiteralStringAffix */ .highlight-chroma .highlight-sa { color: #c41a16 }
+/* LiteralStringBacktick */ .highlight-chroma .highlight-sb { color: #c41a16 }
+/* LiteralStringChar */ .highlight-chroma .highlight-sc { color: #2300ce }
+/* LiteralStringDelimiter */ .highlight-chroma .highlight-dl { color: #c41a16 }
+/* LiteralStringDoc */ .highlight-chroma .highlight-sd { color: #c41a16 }
+/* LiteralStringDouble */ .highlight-chroma .highlight-s2 { color: #c41a16 }
+/* LiteralStringEscape */ .highlight-chroma .highlight-se { color: #c41a16 }
+/* LiteralStringHeredoc */ .highlight-chroma .highlight-sh { color: #c41a16 }
+/* LiteralStringInterpol */ .highlight-chroma .highlight-si { color: #c41a16 }
+/* LiteralStringOther */ .highlight-chroma .highlight-sx { color: #c41a16 }
+/* LiteralStringRegex */ .highlight-chroma .highlight-sr { color: #c41a16 }
+/* LiteralStringSingle */ .highlight-chroma .highlight-s1 { color: #c41a16 }
+/* LiteralStringSymbol */ .highlight-chroma .highlight-ss { color: #c41a16 }
+/* LiteralNumber */ .highlight-chroma .highlight-m { color: #1c01ce }
+/* LiteralNumberBin */ .highlight-chroma .highlight-mb { color: #1c01ce }
+/* LiteralNumberFloat */ .highlight-chroma .highlight-mf { color: #1c01ce }
+/* LiteralNumberHex */ .highlight-chroma .highlight-mh { color: #1c01ce }
+/* LiteralNumberInteger */ .highlight-chroma .highlight-mi { color: #1c01ce }
+/* LiteralNumberIntegerLong */ .highlight-chroma .highlight-il { color: #1c01ce }
+/* LiteralNumberOct */ .highlight-chroma .highlight-mo { color: #1c01ce }
+/* Operator */ .highlight-chroma .highlight-o { color: #000000 }
+/* OperatorWord */ .highlight-chroma .highlight-ow { color: #000000 }
+/* Comment */ .highlight-chroma .highlight-c { color: #177500 }
+/* CommentHashbang */ .highlight-chroma .highlight-ch { color: #177500 }
+/* CommentMultiline */ .highlight-chroma .highlight-cm { color: #177500 }
+/* CommentSingle */ .highlight-chroma .highlight-c1 { color: #177500 }
+/* CommentSpecial */ .highlight-chroma .highlight-cs { color: #177500 }
+/* CommentPreproc */ .highlight-chroma .highlight-cp { color: #633820 }
+/* CommentPreprocFile */ .highlight-chroma .highlight-cpf { color: #633820 }

templates/default/assets/js/global.js

@@ -0,0 +1,57 @@
+let theme;
+
+if (localStorage.getItem("theme") === null) {
+    theme = "dark";
+} else {
+    theme = localStorage.getItem("theme");
+}
+
+replaceCssFile();
+setTheme();
+
+function changeTheme() {
+    if (theme === "dark") {
+        theme = "light";
+    } else {
+        theme = "dark";
+    }
+
+    localStorage.setItem("theme", theme);
+    replaceCssFile();
+    setTheme();
+}
+
+function setTheme() {
+    const root = document.documentElement;
+    root.style.setProperty("--primary-color", `var(--${theme}-primary-color)`);
+    root.style.setProperty("--secondary-color", `var(--${theme}-secondary-color)`);
+
+    root.style.setProperty("--primary-text-color", `var(--${theme}-primary-text-color)`);
+    root.style.setProperty("--secondary-text-color", `var(--${theme}-secondary-text-color)`);
+
+    root.style.setProperty("--background-color", `var(--${theme}-background-color)`);
+
+    const logo = document.querySelector(".main-logo-img")
+    if (logo !== null) {
+        logo.style.setProperty("background-image", `url(../assets/img/logo-${theme}-theme.png)`);
+    }
+}
+
+function replaceCssFile() {
+    let oldHref, newHref;
+    if (theme === "dark") {
+        oldHref = "xcode-light.css";
+        newHref = "xcode-dark.css";
+    } else {
+        oldHref = "xcode-dark.css";
+        newHref = "xcode-light.css";
+    }
+
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        if (link.href.includes(oldHref)) {
+            link.href = "../assets/css/lib/" + newHref;
+            break;
+        }
+    }
+}

templates/default/html/about.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }} | {{ .about.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/lib/xcode-dark.css">
@@ -68,6 +68,12 @@
 </div>
 {{ end }}
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 </body>
 </html>
 

templates/default/html/archive.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }} | {{ .history_post.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/global.css">
@@ -107,6 +107,12 @@
     {{ .site_info.copyright }}
 </div>
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script src="../assets/js/archive.js"></script>
 </body>
 </html>

templates/default/html/category.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/global.css">
@@ -98,6 +98,12 @@
     {{ .site_info.copyright }}
 </div>
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 </body>
 </html>
 

templates/default/html/friend.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }} | {{ .friend.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/lib/xcode-dark.css">
@@ -74,6 +74,12 @@
     {{ .site_info.copyright }}
 </div>
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script>
     function goto(path) {
         window.location.href = path;

templates/default/html/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/global.css">
@@ -26,7 +26,7 @@
     <div class="container p-3">
         <div class="row pt-3 pt-md-4 pt-lg-5">
             <div class="col main-logo">
-                <div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
+                <div class="main-logo-img"></div>
                 <div class="main-logo-txt">
                     {{ .site_info.title }}
                 </div>
@@ -114,6 +114,13 @@
     {{ .site_info.copyright }}
 </div>
 
+
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script src="../assets/js/index.js"></script>
 </body>
 </html>

templates/default/html/post.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/lib/xcode-dark.css">
@@ -129,6 +129,12 @@
 </div>
 {{ end }}
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script src="../assets/js/post.js"></script>
 </body>
 </html>

templates/default/html/search.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/global.css">
@@ -105,6 +105,12 @@
     {{ .site_info.copyright }}
 </div>
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script src="../assets/js/search.js"></script>
 </body>
 </html>

templates/default/html/tag.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .site_info.title }}</title>
-    <link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
+    <link rel="icon" type="image/x-icon" href="../assets/img/logo.png"/>
     <link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
     <link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
     <link rel="stylesheet" href="../assets/css/global.css">
@@ -89,6 +89,12 @@
     {{ .site_info.copyright }}
 </div>
 
+<!-- theme -->
+<div class="theme-wrap" onclick="changeTheme()">
+    <i class="fa-solid fa-circle-half-stroke" style="width: 100%; height: 100%"></i>
+</div>
+
+<script src="../assets/js/global.js"></script>
 <script>
     const tagList = "{{ .tagged_post.tag_list }}";
 </script>