yv1ing/MollyBlog
1
0
Fork 0
mirror of https://github.com/yv1ing/MollyBlog.git synced 2025-09-16 14:53:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

new: Added dark and light theme switching

Browse Source
This commit is contained in:
yvling
2024-12-25 00:08:50 +08:00
parent 7a7ddc5082
commit fc54cc9cb6
15 changed files with 225 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/default/assets/css/global.css
View File

@@ -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;
}

69
templates/default/assets/css/lib/xcode-light.css Normal file
View File

@@ -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 }

BIN
templates/default/assets/img/logo-dark-theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
templates/default/assets/img/logo-light-theme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

57
templates/default/assets/js/global.js Normal file
View File

@@ -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;
}
}
}

8
templates/default/html/about.html
View File

@@ -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>

8
templates/default/html/archive.html
View File

@@ -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>

8
templates/default/html/category.html
View File

@@ -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>

8
templates/default/html/friend.html
View File

@@ -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;

11
templates/default/html/index.html
View File

@@ -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>

8
templates/default/html/post.html
View File

@@ -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>

8
templates/default/html/search.html
View File

@@ -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>

8
templates/default/html/tag.html
View File

@@ -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>