Skip to content

Commit

Permalink
feat: 在线分享第一版-解决颜色切换闪烁问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@terwer
terwer committed Jun 19, 2023
1 parent a5ba2aa commit 30e1c26
Show file tree
Hide file tree
Showing 9 changed files with 259 additions and 143 deletions.
2 changes: 1 addition & 1 deletion README_zh_CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
- **多种部署**：支持思源笔记插件、docker自部署、Vercel托管满足各种人群的需求，详情请看 [docs](./docs.md)
- [入门级]思源笔记插件：零配置，开箱即用，本地SPA应用，直接访问思源本体，因此速度极快，但是SEO不太友好
- [高手级]docker自部署：需要自己购买服务器，SSR服务端渲染，SEO友好，速度快
- [白嫖级]Vercel托管：需要自己购买域名，佛铺装可能无法访问，成本低，速度适中
- [白嫖级]Vercel托管：需要自己购买域名，否则可能无法访问，成本低，速度适中

## TODO

Expand Down
6 changes: 0 additions & 6 deletions assets/scss/element/dark.scss
View file

This file was deleted.

26 changes: 0 additions & 26 deletions assets/scss/element/index.scss
View file

This file was deleted.

81 changes: 59 additions & 22 deletions composables/useThemeMode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,10 @@ export const useThemeMode = async () => {
// 获取颜色模式和运行时配置
const color = useColorMode()
const env = useRuntimeConfig()
const appBase = process.env.APP_BASE
const { getSetting, updateSetting } = useSettingStore()

// 根据浏览器模式设置 CSS 和主题模式
const setCssAndThemeMode = (isDarkMode: boolean) => {
const version = "11.5.0"
const protyleHljsStyle = document.querySelector("#protyleHljsStyle") as any
protyleHljsStyle.href = `${process.env.APP_BASE}resources/stage/protyle/js/highlight.js/styles/vs${
isDarkMode ? "2015" : ""
}.min.css?v=${version}`
document.documentElement.dataset.themeMode = isDarkMode ? "dark" : "light"
}

// computes
// 获取颜色模式并暴露 computed 属性
const colorMode = computed({
get: () => {
Expand All @@ -56,11 +48,7 @@ export const useThemeMode = async () => {
},
})

const switchMode = () => {
const isDark = color.value === "dark"
setThemeMode(isDark, true)
}

// methods
// 切换暗黑模式
const toggleDark = async () => {
colorMode.value = !colorMode.value
Expand All @@ -79,23 +67,55 @@ export const useThemeMode = async () => {
switchMode()
}

// 在 mounted 生命周期中设置主题模式
onMounted(() => {
switchMode()
})
// 在 mounted 生命周期中处理加载后逻辑
// onMounted(() => {
// })

const setting = await getSetting()
const siyuanV = "2.9.1"
const hljsV = "11.5.0"
const siyuanLightTheme = setting?.theme?.lightTheme ?? "Zhihu"
const siyuanDarkTheme = setting?.theme?.darkTheme ?? "Zhihu"
const siyuanThemeV = "0.0.6"
const detectedMode = setting?.theme?.mode ?? color.preference
const isDarkMode = detectedMode === "dark"
useHead({
htmlAttrs: {
"data-theme-mode": setting?.theme?.mode ?? color.preference,
"data-light-theme": setting?.theme?.lightTheme ?? "Zhihu",
"data-dark-theme": setting?.theme?.darkTheme ?? "Zhihu",
lang: "zh_CN",
"data-theme-mode": detectedMode,
"data-light-theme": siyuanLightTheme,
"data-dark-theme": siyuanDarkTheme,
},
link: [
{
rel: "stylesheet",
id: "themeDefaultStyle",
href: appBase + `resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`,
},
{
rel: "stylesheet",
id: "themeStyle",
href:
appBase +
`resources/appearance/themes/${isDarkMode ? siyuanDarkTheme : siyuanLightTheme}/theme.css?v=${siyuanThemeV}`,
},
{
rel: "stylesheet",
id: "protyleHljsStyle",
href:
appBase + `resources/stage/protyle/js/highlight.js/styles/vs${isDarkMode ? "2015" : ""}.min.css?v=${hljsV}`,
},
],
})

// ==================================================
// private methods
// ==================================================
const switchMode = () => {
const isDarkMode = color.value === "dark"
setThemeMode(isDarkMode)
}

// 设置主题模式
const setThemeMode = (isDarkMode: boolean, isDelay = false) => {
if (BrowserUtil.isInBrowser) {
Expand All @@ -115,8 +135,25 @@ export const useThemeMode = async () => {
logger.info(`Auto set mode, isDark => ${isDarkMode}`)
}
}

color.preference = isDarkMode ? "dark" : "light"
}

// 根据浏览器模式设置 CSS 和主题模式
const setCssAndThemeMode = (isDarkMode: boolean) => {
// 默认主题适配
const themeDefaultStyle = document.querySelector("#themeDefaultStyle") as any
themeDefaultStyle.href =
appBase + `resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`

// 代码块适配
const protyleHljsStyle = document.querySelector("#protyleHljsStyle") as any
protyleHljsStyle.href =
appBase + `resources/stage/protyle/js/highlight.js/styles/vs${isDarkMode ? "2015" : ""}.min.css?v=${hljsV}`

// 颜色模式属性
document.documentElement.dataset.themeMode = isDarkMode ? "dark" : "light"
}

return { colorMode, toggleDark }
}
23 changes: 1 addition & 22 deletions nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default defineNuxtConfig({
},

// colorMode
// 格式是 `class="light-${classSuffix}"`，为空是 `class="light"`
colorMode: {
classSuffix: "",
},
Expand All @@ -48,13 +49,6 @@ export default defineNuxtConfig({
plugins: [],
},

// https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand All @@ -74,21 +68,6 @@ export default defineNuxtConfig({
rel: "stylesheet",
href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
},
{
rel: "stylesheet",
id: "themeDefaultStyle",
href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
},
{
rel: "stylesheet",
id: "themeStyle",
href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
},
{
rel: "stylesheet",
id: "protyleHljsStyle",
href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
},
],
// https://nuxt.com/docs/api/configuration/nuxt-config#head
script: isDev
Expand Down
23 changes: 1 addition & 22 deletions nuxt.node.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default defineNuxtConfig({
},

// colorMode
// 格式是 `class="light-${classSuffix}"`，为空是 `class="light"`
colorMode: {
classSuffix: "",
},
Expand All @@ -48,13 +49,6 @@ export default defineNuxtConfig({
plugins: [],
},

// https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand All @@ -74,21 +68,6 @@ export default defineNuxtConfig({
rel: "stylesheet",
href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
},
{
rel: "stylesheet",
id: "themeDefaultStyle",
href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
},
{
rel: "stylesheet",
id: "themeStyle",
href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
},
{
rel: "stylesheet",
id: "protyleHljsStyle",
href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
},
],
// https://nuxt.com/docs/api/configuration/nuxt-config#head
script: isDev
Expand Down
23 changes: 1 addition & 22 deletions nuxt.siyuan.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default defineNuxtConfig({
},

// colorMode
// 格式是 `class="light-${classSuffix}"`，为空是 `class="light"`
colorMode: {
classSuffix: "",
},
Expand All @@ -48,13 +49,6 @@ export default defineNuxtConfig({
plugins: [],
},

// https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

// https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
ssr: false,
router: {
Expand Down Expand Up @@ -82,21 +76,6 @@ export default defineNuxtConfig({
rel: "stylesheet",
href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
},
{
rel: "stylesheet",
id: "themeDefaultStyle",
href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
},
{
rel: "stylesheet",
id: "themeStyle",
href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
},
{
rel: "stylesheet",
id: "protyleHljsStyle",
href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
},
],
// https://nuxt.com/docs/api/configuration/nuxt-config#head
script: isDev
Expand Down
23 changes: 1 addition & 22 deletions nuxt.vercel.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default defineNuxtConfig({
},

// colorMode
// 格式是 `class="light-${classSuffix}"`，为空是 `class="light"`
colorMode: {
classSuffix: "",
},
Expand All @@ -48,13 +49,6 @@ export default defineNuxtConfig({
plugins: [],
},

// https://github.com/element-plus/element-plus-nuxt-starter/blob/main/nuxt.config.ts
elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand All @@ -74,21 +68,6 @@ export default defineNuxtConfig({
rel: "stylesheet",
href: appBase + "resources/stage/build/app/base.css?v=" + staticV,
},
{
rel: "stylesheet",
id: "themeDefaultStyle",
href: appBase + "resources/appearance/themes/midnight/theme.css?v=2.9.1",
},
{
rel: "stylesheet",
id: "themeStyle",
href: appBase + "resources/appearance/themes/Zhihu/theme.css?v=0.0.6",
},
{
rel: "stylesheet",
id: "protyleHljsStyle",
href: appBase + "resources/stage/protyle/js/highlight.js/styles/vs2015.min.css?v=11.5.0",
},
],
// https://nuxt.com/docs/api/configuration/nuxt-config#head
script: isDev
Expand Down
Loading

0 comments on commit 30e1c26

Please sign in to comment.