Skip to content

Commit 3a81b63

Browse files
terwerterwer
committed
feat: add theme switch
1 parent e5fa337 commit 3a81b63

File tree

10 files changed

+166
-66
lines changed

10 files changed

+166
-66
lines changed

‎apps/app/assets/css/index.styl

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ body
1616

1717
// 思源笔记额外样式，base.css 之外的
1818
@import "./siyuan.styl"
19+
// vdoing 主题样式
20+
@import "./vdoing.styl"
1921

2022
// 其他修复样式
2123

@@ -28,4 +30,4 @@ pre code.hljs
2830

2931
/* added by 5.4.0 */
3032
.protyle-action .b3-tooltips::before,.protyle-action .b3-tooltips::after
31-
display none
33+
display none

‎apps/app/assets/css/theme/palette.styl

+1-52
Original file line numberDiff line numberDiff line change
@@ -48,55 +48,4 @@ $homePageWidth = 1100px
4848
$rightMenuWidth = 230px // 右侧菜单
4949

5050
// 代码块
51-
$lineNumbersWrapperWidth = 2.5rem
52-
53-
// 浅色模式
54-
//.theme-mode-light
55-
// --bodyBg: #f4f4f4
56-
// --mainBg: rgba(255,255,255,1)
57-
// --sidebarBg: rgba(255,255,255,.8)
58-
// --blurBg: rgba(255,255,255,.9)
59-
// --customBlockBg: #f1f1f1
60-
// --textColor: #00323c
61-
// --textLightenColor: #0085AD
62-
// --borderColor: rgba(0,0,0,.12)
63-
// --codeBg: #f6f6f6
64-
// --codeColor: #525252
65-
// codeThemeLight()
66-
//
67-
//// 深色模式
68-
//.theme-mode-dark
69-
// --bodyBg: rgb(39,39,43)
70-
// --mainBg: rgba(30,30,34,1)
71-
// --sidebarBg: rgba(30,30,34,.8)
72-
// --blurBg: rgba(30,30,34,.8)
73-
// --customBlockBg: rgb(39,39,43)
74-
// --textColor: rgb(155,155,170)
75-
// --textLightenColor: #0085AD
76-
// // --borderColor: #2C2C3A
77-
// --borderColor: #30363d
78-
// --codeBg: #252526
79-
// --codeColor: #fff
80-
// codeThemeDark()
81-
//
82-
//// 阅读模式
83-
//.theme-mode-read
84-
// --bodyBg: rgb(236,236,204)
85-
// --mainBg: rgba(245,245,213,1)
86-
// --sidebarBg: rgba(245,245,213,.8)
87-
// --blurBg: rgba(245,245,213,.9)
88-
// --customBlockBg: rgb(236,236,204)
89-
// --textColor: #704214
90-
// --textLightenColor: #996633
91-
// --borderColor: rgba(0,0,0,.15)
92-
// --codeBg: #282c34
93-
// --codeColor: #fff
94-
// codeThemeDark()
95-
//
96-
//// 背景色整体一致
97-
//.theme-style-line.theme-mode-light
98-
// --bodyBg: rgba(255,255,255,1)
99-
//.theme-style-line.theme-mode-dark
100-
// --bodyBg: rgba(30,30,34,1)
101-
//.theme-style-line.theme-mode-read
102-
// --bodyBg: rgba(245,245,213,1)
51+
$lineNumbersWrapperWidth = 2.5rem

‎apps/app/assets/css/vdoing.styl

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// 浅色模式
2+
html[data-theme-mode="light"]
3+
--bodyBg: #f4f4f4
4+
--mainBg: rgba(255,255,255,1)
5+
--sidebarBg: rgba(255,255,255,.8)
6+
--blurBg: rgba(255,255,255,.9)
7+
--customBlockBg: #f1f1f1
8+
--textColor: #00323c
9+
--textLightenColor: #0085AD
10+
--borderColor: rgba(0,0,0,.12)
11+
//--codeBg: #f6f6f6
12+
//--codeColor: #525252
13+
14+
// 深色模式
15+
html[data-theme-mode="dark"]
16+
--bodyBg: rgb(39,39,43)
17+
--mainBg: rgba(30,30,34,1)
18+
--sidebarBg: rgba(30,30,34,.8)
19+
--blurBg: rgba(30,30,34,.8)
20+
--customBlockBg: rgb(39,39,43)
21+
--textColor: rgb(155,155,170)
22+
--textLightenColor: #0085AD
23+
// --borderColor: #2C2C3A
24+
--borderColor: #30363d
25+
//--codeBg: #252526
26+
//--codeColor: #fff
27+
28+
// 阅读模式
29+
html[data-theme-mode="read"]
30+
--bodyBg: rgb(236,236,204)
31+
--mainBg: rgba(245,245,213,1)
32+
--sidebarBg: rgba(245,245,213,.8)
33+
--blurBg: rgba(245,245,213,.9)
34+
--customBlockBg: rgb(236,236,204)
35+
--textColor: #704214
36+
--textLightenColor: #996633
37+
--borderColor: rgba(0,0,0,.15)
38+
//--codeBg: #282c34
39+
//--codeColor: #fff

‎apps/app/components/static/Buttons.vue

+104-1
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,46 @@
1010
<script setup lang="ts">
1111
import { debounce } from "lodash-unified"
1212

13+
const emit = defineEmits<{
14+
toggleThemeMode:[key: "auto"|"light"|"dark"]
15+
}>()
16+
17+
const props = defineProps<{defaultMode?: "auto"|"light"|"dark"}>()
18+
1319
const formData = reactive({
20+
// 返回顶部
1421
threshold: 100,
15-
scrollTop: 0
22+
scrollTop: 0,
23+
24+
// 评论
25+
showCommentBut: false,
26+
commentTop: 0,
27+
28+
// 主题模式
29+
showModeBox: false,
30+
currentMode: "",
31+
modeList: [
32+
// {
33+
// name: "跟随系统",
34+
// icon: "icon-zidong",
35+
// KEY: "auto"
36+
// },
37+
{
38+
name: "浅色模式",
39+
icon: "icon-rijianmoshi",
40+
KEY: "light"
41+
},
42+
{
43+
name: "深色模式",
44+
icon: "icon-yejianmoshi",
45+
KEY: "dark"
46+
},
47+
// {
48+
// name: "阅读模式",
49+
// icon: "icon-yuedu",
50+
// KEY: "read"
51+
// }
52+
],
1653
})
1754

1855
const showToTop = computed(() => {
@@ -31,11 +68,42 @@ const getScrollTop = () => {
3168
document.body.scrollTop || 0
3269
}
3370

71+
const scrollToComment = () => {
72+
// window.scrollTo({ top: formData.commentTop, behavior: "smooth" })
73+
// formData._textareaEl = document.querySelector(formData.COMMENT_SELECTOR_1 + " textarea") || document.querySelector(formData.COMMENT_SELECTOR_2 + " input") || document.querySelector(formData.COMMENT_SELECTOR_3 + " textarea")
74+
// if (formData._textareaEl && getScrollTop() !== formData._recordScrollTop) {
75+
// document.addEventListener("scroll", formData._handleListener)
76+
// } else if (formData._textareaEl && getScrollTop() === _recordScrollTop) {
77+
// _handleFocus()
78+
// }
79+
}
80+
81+
const getCommentTop = () => {
82+
// setTimeout(() => {
83+
// let commentEl = document.querySelector(formData.COMMENT_SELECTOR_1) || document.querySelector(formData.COMMENT_SELECTOR_2) || document.querySelector(formData.COMMENT_SELECTOR_3)
84+
// if (commentEl) {
85+
// formData.showCommentBut = props.post.comment !== false
86+
// formData.commentTop = commentEl.offsetTop - 58
87+
// }
88+
// }, 500)
89+
}
90+
91+
const toggleMode = (key:string) => {
92+
formData.currentMode = key
93+
emit("toggleThemeMode", key)
94+
}
95+
3496
onMounted(() => {
3597
formData.scrollTop = getScrollTop()
3698
window.addEventListener("scroll", debounce(() => {
3799
formData.scrollTop = getScrollTop()
38100
}, 100), true)
101+
102+
// window.addEventListener("load", () => {
103+
// getCommentTop()
104+
// })
105+
106+
formData.currentMode = props.defaultMode ?? "auto"
39107
})
40108
</script>
41109

@@ -50,6 +118,41 @@ onMounted(() => {
50118
@click="scrollToTop"
51119
/>
52120
</transition>
121+
<!--
122+
<div
123+
v-show="formData.showCommentBut"
124+
title="去评论"
125+
class="button blur go-to-comment iconfont icon-pinglun"
126+
@click="scrollToComment"
127+
/>
128+
-->
129+
<div
130+
title="主题模式"
131+
class="button blur theme-mode-but iconfont icon-zhuti"
132+
@mouseenter="()=>{formData.showModeBox=true}"
133+
@mouseleave="()=>{formData.showModeBox=false}"
134+
@click="()=>{formData.showModeBox=true}"
135+
>
136+
<transition name="mode">
137+
<ul
138+
v-show="formData.showModeBox"
139+
ref="modeBox"
140+
class="select-box"
141+
@click.stop
142+
@touchstart.stop
143+
>
144+
<li
145+
v-for="item in formData.modeList"
146+
:key="item.KEY"
147+
class="iconfont"
148+
:class="[item.icon, { active: item.KEY === formData.currentMode }]"
149+
@click="toggleMode(item.KEY)"
150+
>
151+
&nbsp;{{ item.name }}
152+
</li>
153+
</ul>
154+
</transition>
155+
</div>
53156
</client-only>
54157
</div>
55158
</template>

‎apps/app/components/static/Footer.vue

+14-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const props = defineProps<{ setting: typeof AppConfig }>()
2222
const { locale, t } = useI18n()
2323
const { providerMode } = useProviderMode()
2424
const { getHome } = useBaseUrl()
25+
const { colorMode, toggleDark } = await useClientThemeMode(props.setting)
2526

2627
// datas
2728
const v = ref((pkg as any).version)
@@ -38,11 +39,21 @@ const goAbout = () => {
3839
}
3940

4041
// methods
41-
const goHome = async () => {
42+
const goHome = () => {
4243
const home = getHome()
4344
window.open(home)
4445
}
4546

47+
const emitToggleThemeMode = (key: "auto"|"light"|"dark") => {
48+
if (key === "dark" && colorMode.value) {
49+
return
50+
}
51+
if (key === "light" && !colorMode.value) {
52+
return
53+
}
54+
toggleDark()
55+
}
56+
4657
const VNode = () =>
4758
h("div", {
4859
class: "",
@@ -60,7 +71,8 @@ onBeforeMount(() => {
6071

6172
<template>
6273
<el-footer>
63-
<static-buttons />
74+
<static-buttons :default-mode="colorMode?'dark':'light'" @toggle-theme-mode="emitToggleThemeMode" />
75+
6476
<div v-if="!providerMode && StrUtil.isEmptyString(footer)" class="footer">
6577
<span class="text"> &copy;2011-{{ nowYear }} </span>
6678
<span class="text s-dark" @click="goGithub()">&nbsp;{{ t("name") }}</span>

‎apps/app/components/static/Header.vue

-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const props = defineProps<{ setting: typeof AppConfig }>()
1717

1818
// uses
1919
const { t } = useI18n()
20-
const { colorMode, toggleDark } = await useClientThemeMode(props.setting)
2120

2221
// datas
2322
const header = props.setting?.header ?? ""
@@ -49,11 +48,6 @@ const VNode = () =>
4948
<div class="links">
5049
<!-- <NavLinks class="can-hide"/>-->
5150
</div>
52-
53-
<span class="text dot">.</span>
54-
<span class="text s-dark" @click="toggleDark()">
55-
{{ colorMode ? t("theme.mode.light") : t("theme.mode.dark") }}
56-
</span>
5751
<VNode />
5852
</div>
5953
</template>

‎apps/app/public/libs/fonts/vdoing_font.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@font-face {
22
font-family: "iconfont"; /* Project id 1678482 */
3-
src: url('//at.alicdn.com/t/font_1678482_4tbhmh589x.woff2?t=1641179683554') format('woff2'),
4-
url('//at.alicdn.com/t/font_1678482_4tbhmh589x.woff?t=1641179683554') format('woff'),
5-
url('//at.alicdn.com/t/font_1678482_4tbhmh589x.ttf?t=1641179683554') format('truetype');
3+
src: url('https://at.alicdn.com/t/font_1678482_4tbhmh589x.woff2?t=1641179683554') format('woff2'),
4+
url('https://at.alicdn.com/t/font_1678482_4tbhmh589x.woff?t=1641179683554') format('woff'),
5+
url('https://at.alicdn.com/t/font_1678482_4tbhmh589x.ttf?t=1641179683554') format('truetype');
66
}
77

88
.iconfont {

‎apps/app/public/resources/stage/build/app/base.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/app/public/resources/stage/build/fonts/JetBrainsMono-Regular.woff ‎apps/app/public/resources/stage/build/fonts/JetBrainsMono-Regular.woff2

File renamed without changes.

‎packages/eslint-config-custom/nuxt.js

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ module.exports = {
3535
"unicorn/filename-case": "off",
3636
"no-case-declarations": "off",
3737
"vue/multi-word-component-names": "off",
38+
"@typescript-eslint/no-unused-vars": "off",
3839
// add specific rules configurations here
3940
semi: ["error", "never"],
4041
quotes: ["error", "double"],

0 commit comments

Comments
 (0)