Búsqueda de sitios web

css - ¿Cómo alternar el tema en Tailwind (modo oscuro) con Angular?

Hice un modo oscuro CSS personalizado en Angular. Aquí está el enlace: Stackblitz

ahora quería hacer exactamente lo mismo con Tailwind.

¿Alguien podría ayudarme?

cómo configurar los colores del tema global, que hice en el proyecto de CSS personalizado así,

.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);
}

y el app.component.ts era así,

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

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

El tailwind dice que tengo que vincular la clase en la etiqueta body, y no tengo idea de cómo haría el modo oscuro con la clase vinculada al body.

por favor ayúdame. gracias

Respuesta #1

Tailwind en realidad tiene una forma de crear estilos personalizados. Una vez que sigas estas instrucciones de instalación para Tailwind, deberías poder crear tus propios estilos personalizados dentro del archivo tailwind.config.js que se crea en tu proyecto durante la instalación.

Para tus colores personalizados, el archivo tailwind.config.js se vería algo así:

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: [],
};

Lo más importante a tener en cuenta aquí son los nombres de los colores, y darkMode establecido en 'class'.

Los nombres de los colores (es decir, 'primary', 'dark-primary') son la forma en que usarás estos colores en tu código, y tener darkMode configurado en 'class' asegura que puedas cambiar tus estilos usando la sintaxis dark: de Tailwind.

Una vez que tengas tu archivo de configuración configurado, puedes enlazarlo al cuerpo con ngClass y al final deberías tener un index.html que se vea así:

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

y un app.component.html que se ve así:

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

Ahora podrás usar dark: para cambiar tus estilos para el modo oscuro, ya sea agregando una clase a un elemento de la siguiente manera:

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

o agregando lo siguiente a una definición de clase en un archivo css:

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

Como puede ver, estamos utilizando el nombre del color en el archivo tailwind.config.js (secondary-bg y dark-secondary-bg) para establecer el fondo (bg) en el color adecuado.

Aquí hay más información sobre el modo oscuro con tailwindcss si estás interesado.

¡Feliz programación! :)

Artículos relacionados