Vuejs SPA 动态主题答案

【问题标题】：Vuejs SPA dynamic themeVuejs SPA 动态主题
【发布时间】：2020-09-02 20:21:25
【问题描述】：

我有一个已构建的 Vuejs 单页应用程序，我想添加用户可切换的动态主题。用户在某处或某处有按钮的地方，他们可以单击“浅色”或“深色”主题选项，整个应用程序会立即更新。我还想让我的所有“主题”scss 文件都是本地的。

这个答案here 是我迄今为止找到的最接近的答案，但主题不是本地的。

const themes = {
  flatly: "https://bootswatch.com/4/flatly/bootstrap.min.css",
  materia: "https://bootswatch.com/4/materia/bootstrap.min.css",
  solar: "https://bootswatch.com/4/solar/bootstrap.min.css"
};

如果我能弄清楚如何让这个答案与本地主题文件一起工作，那就太好了，但是用本地路径切换链接路径是行不通的。

const themes = {
  dark: "dark-theme.scss",
  light: "light-theme.scss"
};

我怀疑这不起作用，因为 Webpack 或其他一些不包含 scss 文件的编译问题。

我发现如果我在 index.html 中添加如下内容，我可以让我的主题文件出现在客户端源代码中 <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>dark-theme.scss"> 但后来我不知道如何在我的应用程序中引用它。也许像http://localhost:8080/dark-theme.scss这样的链接？但是我认为这在生产中不起作用（而且它在本地也不起作用）。

我也看过：

this 与上面链接的答案类似，遇到类似问题
this 仅具有 scss 变量，并且无法向类添加属性，例如
this 我认为这不是一个非常干净的解决方案，因为它要求所有组件都了解主题等

我也尝试在我的main.ts 文件中执行类似import "@/path/to/theme.scss"; 的操作，确实工作，但我不知道如何利用它来使主题可切换。它只是在我的脑海中添加了一个类似以下的元素，它没有 id 或 class，所以我无法有效地查询它来切换它。使用 require 也可以做类似的事情。

<style type="text/css" >
  ...
</style>

【问题讨论】：

几周前我和一位客户遇到了类似的问题。恕我直言，实现这一点的最佳方法是导入您在main.ts 中提到的两个主题，然后使用 JavaScript 方法提供媒体查询不提供的内容：我的意思是，在尚不支持它们的浏览器上。现在是凌晨 3 点，但我会从明天开始关注您的问题和可能的答案！
@FedericoMoretti 谢谢，我很想看到这个问题的答案。让我知道我的帖子中是否有任何歧义需要我澄清。

标签： javascript html css vue.js webpack

【解决方案1】：

main.ts:

import "@/path/to/dark-theme.scss"
import "@/path/to/light-theme.scss"

黑暗主题.scss：

body.dark {
  /* rest of the theme */
}

light-theme.scss：

body.ligh {
  /* rest of the theme */
}

index.html（或根据本地存储或操作系统模式从 main.ts 注入）：

<body class="light">

你的开关在哪里：

methods: {
  toggleTheme() {
    document.body.classList.toggle('dark')
    document.body.classList.toggle('light')
  }
}

【讨论】：

这似乎运作良好。如果我不需要body.dark 并且可以只在根级别拥有一个包含所有css 的scss 文件，我仍然会更喜欢，但这似乎完全可以接受。感谢您的回答。

【解决方案2】：

这是我想到的一个技巧，你可以使用。为您的主题创建两个空组件，如下所示：

<template><div></div></template>
<script>export default {name: 'DarkTheme'}</script>
<style>
  @import "~@/path/to/theme.scss"
</style>

现在在您的应用中，您可以在这两个组件上使用 v-if，例如

<dark-theme v-if="theme == 'dark'"/>
<light-theme v-if="theme == 'light'"/>

PS：此代码未经测试

【讨论】：