如何使用 Angular 在 Tailwind（暗模式）中切换主题？

Question

i made a custom css dark mode in angular. here's the link: stackblitz我在 angular 中自定义了 css 黑暗模式。这是链接： stackblitz

now i wanted to made the exact same thing with Tailwind.现在我想用 Tailwind 做同样的事情。

could anyone help me out?谁能帮帮我？

how to config the global theme colors, i made in the custom css project like this,如何配置全局主题 colors，我在自定义 css 项目中是这样制作的，

.theme-light {
  --primary: #2577c1;
  --secondary-bg: #fff;
  --theme: #fff;
  --header-color: rgb(194, 63, 226);
  --route-link-active: #fff;
  --link-color: rgb(85, 80, 80);
  --border-color: rgb(85, 80, 80);
}
.theme-dark {
  --primary: rgb(255, 80, 11);
  --secondary-bg: #424242;
  --theme: #424242;
  --header-color: var(--theme);
  --route-link-active: rgb(255, 80, 11);
  --link-color: #fff;
  --border-color: rgb(28, 214, 28);
}

and the app.component.ts was like this, app.component.ts 是这样的，

isDarkEnable = false;
presentTheme$ = new BehaviorSubject<string>('theme-light');
constructor() {}
ngOnInit() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    this.presentTheme$.next(savedTheme);
  }
}
changeTheme() {
  this.presentTheme$.value === 'theme-light'
    ? this.presentTheme$.next('theme-dark')
    : this.presentTheme$.next('theme-light');
  localStorage.setItem('theme', this.presentTheme$.value);
  this.isDarkEnable = !this.isDarkEnable;
}

app.component.html app.component.html

<div [class]="(presentTheme$ | async)">
  <header>
    <app-header>
      <a *ngIf="isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">LIGHT</a>
      <a *ngIf="!isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">DARK</a>
    </app-header>
  </header>

  <main>
    <router-outlet></router-outlet>
  </main>
</div>

the tailwind says that i have to bind the class in the body tag, and i have no idea that how would i do the dark mode with the class binded to the body.顺风说我必须在 body 标签中绑定 class，我不知道如何将 class 绑定到 body 上进行暗模式。

please help me.请帮我。 thank you谢谢你

Answer 1

Tailwind actually has a way to create custom styles. Once you follow these install instructions for tailwind , you should be able to create your own custom styles inside the tailwind.config.js file that is created in your project during the install. Tailwind 实际上有一种创建自定义 styles 的方法。一旦您按照 tailwind 的这些安装说明进行操作，您应该能够在安装过程中在项目中创建的tailwind.config.js文件中创建自己的自定义 styles。

For your custom colors the tailwind.config.js file would look something like this:对于您的自定义 colors， tailwind.config.js文件将如下所示：

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,ts}'],
  theme: {
    colors: {
      // Light theme colors
      'primary': '#2577c1',
      'secondary-bg': '#fff',
      'theme': '#fff',
      'header-color': '#c23fe2',
      'route-link-active': '#fff',
      'link-color': '#555050',
      'border-color': '#555050',

      // Dark theme colors
      'dark-primary': '#ff500b',
      'dark-secondary-bg': '#424242',
      'dark-theme': '#424242',
      'dark-header-color': '#424242',
      'dark-route-link-active': '#ff500b',
      'dark-link-color': '#fff',
      'dark-border-color': '#1cd61c',
    },
    extend: {},
  },
  plugins: [],
};

The most important things to note here are the names of the colors, and darkMode being set to 'class' .这里要注意的最重要的事情是darkMode的名称，以及设置为'class'的 darkMode。

The names of the colors (ie 'primary' , 'dark-primary' ) are how you will use these colors in your code, and have darkMode set to 'class' makes sure that you can change your styles using tailwinds dark: syntax. colors 的名称（即'primary' 、 'dark-primary' ）是您在代码中使用这些 colors 的方式，并将darkMode设置为'class'确保您可以使用 tailwinds dark:语法更改 styles。

Once you have your config file set up you can bind to the body with ngClass and in the end you should have an index.html that looks like this:设置配置文件后，您可以使用ngClass绑定到主体，最后您应该有一个index.html ，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TestApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <app-root></app-root>
</html>

and an app.component.html that looks like this:和一个app.component.html看起来像这样：

<body [ngClass]="{ dark: isDarkEnable }">
  <header>
    <app-header>
      <a *ngIf="isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">LIGHT</a>
      <a *ngIf="!isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">DARK</a>
    </app-header>
  </header>

  <main>
    <router-outlet></router-outlet>
  </main>
</body>

Now you will be able to use dark: to change your styles for dark mode either by adding a class to an element like so:现在您将能够使用dark:将 styles 更改为暗模式，方法是将 class 添加到如下元素：

<div class="bg-secondary-bg dark:bg-dark-secondary-bg"></div>

or by adding the following to a class definition in a css file:或者通过将以下内容添加到 css 文件中的 class 定义中：

.someclass {
  @apply bg-secondary-bg dark:bg-dark-secondary-bg;
}

As you can see, we are using the name of the color in the tailwind.config.js file ( secondary-bg and dark-secondary-bg ) to set the background ( bg ) to the appropriate color.如您所见，我们使用tailwind.config.js文件中的颜色名称（ secondary-bg和dark-secondary-bg ）将背景 ( bg ) 设置为适当的颜色。

Here is some more info about dark mode with tailwindcss if you are interested.如果您有兴趣，这里有一些关于使用 tailwindcss 的暗模式的更多信息。

Happy Coding: :)快乐编码：:)

Answer 2

you might consider using this tw-colors你可能会考虑使用这个tw-colors

const { createThemes } = require('tw-colors');

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [
    createThemes({
      light: {
        'primary': '#ff500b',
        'secondary-bg': '#fff',
        'theme': '#fff',
        'header-color': '#c23fe2',
        'route-link-active': '#fff',
        'link-color': '#555050',
        'border-color': '#555050',
      }, 
      dark: {
        'primary': '#2577c1',
        'secondary-bg': '#424242',
        'theme': '#424242',
        'header-color': '#424242',
        'route-link-active': '#ff500b',
        'link-color': '#fff',
        'border-color': '#1cd61c',
      }, 
    })
  ],
};

app.component.html

<body [ngClass]="{ 'theme-dark': isDarkEnable, 'theme-light': !isDarkEnable  }">
  <header>
    <app-header>
      <a *ngIf="isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">LIGHT</a>
      <a *ngIf="!isDarkEnable" (click)="changeTheme()" mode-button style="font-size:30px">DARK</a>
    </app-header>
  </header>

  <main>
    <router-outlet></router-outlet>
  </main>
</body>

Then you don't need to change the class or use dark:... anywhere in your app, switching the body class will change the colors everywhere.那么你不需要改变 class 或使用dark:...在你的应用程序的任何地方，切换身体 class 将改变 colors 无处不在。 Here is what the markup would look like:下面是标记的样子：

<div class='bg-primary'>...</div>

如何使用 Angular 在 Tailwind（暗模式）中切换主题？

问题描述

2 个解决方案

解决方案1
2 2022-03-17 02:23:52

解决方案2
0 2023-01-02 12:03:52

如何使用 Angular 在 Tailwind（暗模式）中切换主题？

问题描述

2 个解决方案

解决方案1 2 2022-03-17 02:23:52

解决方案2 0 2023-01-02 12:03:52

解决方案1
2 2022-03-17 02:23:52

解决方案2
0 2023-01-02 12:03:52