Tailwind 를 사용하여 Angular 애플리케이션에 테마 설정

tldr;
Tailwind의 가장 좋은 기능 중 하나는 팔레트와 응용 프로그램의 다른 유틸리티 종류를 확장하는 것이다.이 기능을 사용하면 Angular 응용 프로그램의 주제를 동적으로 변경할 수 있습니다.본고에서, 당신은 어떻게 각도 서비스를 만들고, 테마를 응용 프로그램 안내로 불러오는지 이해할 것입니다.

Before You Start
본문을 읽기 전에 각도 프로그램에서 Tailwind를 어떻게 사용하는지 알아보세요.이 글은 어떻게 이 점을 해냈는지 소개하지 않을 것이다.만약 당신이 프로젝트에 순풍을 설정하는 방법을 이미 알고 있다면, 당신은 기꺼이 할 것이다.
그 밖에 저는 his gist에 감사를 드립니다. 저는 서비스와 실용 기능 중 일부를 사용했습니다.

Extending Tailwind's Color Palette
프로그램의 테마를 설정할 수 있는 관건은 Tailwind의 팔레트를 확장하는 것입니다.이것은 순풍의 가장 멋진 기능 중 하나입니다. 당신은 read about it in their docs을 선택할 수 있습니다.이를 위해서는 tailwind.config.js 파일을 수정해야 합니다.이 파일은 theme 속성을 포함할 수 있으며, extend 속성을 추가할 수 있습니다.extend에 추가한 항목은 HTML 및 SCSS 파일에서 사용할 수 있는 유틸리티 클래스로 추가됩니다.다음은 colors 속성을 확장한 샘플 구성 파일입니다.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        // Here is where you will add our new colors
      }
    }
  }
}

이제 색을 확장하는 방법을 알게 되었으니, 테마마다 얼마나 많은 색을 바꿀 수 있는지 결정해야 한다.본문에 대해 세 가지 색깔이 있는데 그것이 바로 주색, 차색과 중음이다.프로그램을 불러올 때 세 가지 색 값을 제공해야 합니다.확장 팔레트는 이러한 색상으로 구성됩니다.우리는 곧 이 점을 보게 될 것이다.
현재Tailwind를 확장하는 실용 프로그램 클래스는 또 하나의 멋있는 점이 있다. 바로 확장 클래스의 값은 CSS custom property, 즉 CSS 변수일 수 있다는 것이다.클래스의 색상 값을 CSS 사용자 정의 속성으로 설정하여 응용 프로그램 주제를 변경할 수 있습니다.그런 다음 JavaScript를 사용하여 이러한 사용자 정의 속성을 업데이트합니다.다음은 각 색상의 모든 클래스를 포함하는 전체 tailwind.config.js 파일로, 설정되어 있으며 사용할 수 있습니다.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary-color': {
          DEFAULT: 'var(--primary-color-500'),
          50: 'var(--primary-color-50'),
          100: 'var(--primary-color-100'),
          200: 'var(--primary-color-200'),
          300: 'var(--primary-color-300'),
          400: 'var(--primary-color-400'),
          500: 'var(--primary-color-500'),
          600: 'var(--primary-color-600'),
          700: 'var(--primary-color-700'),
          800: 'var(--primary-color-800'),
          900: 'var(--primary-color-900'),
        },
        'secondary-color': {
          DEFAULT: 'var(--secondary-color-500'),
          50: 'var(--secondary-color-50'),
          100: 'var(--secondary-color-100'),
          200: 'var(--secondary-color-200'),
          300: 'var(--secondary-color-300'),
          400: 'var(--secondary-color-400'),
          500: 'var(--secondary-color-500'),
          600: 'var(--secondary-color-600'),
          700: 'var(--secondary-color-700'),
          800: 'var(--secondary-color-800'),
          900: 'var(--secondary-color-900'),
        },
        'accent-color': {
          DEFAULT: 'var(--accent-color-500'),
          50: 'var(--accent-color-50'),
          100: 'var(--accent-color-100'),
          200: 'var(--accent-color-200'),
          300: 'var(--accent-color-300'),
          400: 'var(--accent-color-400'),
          500: 'var(--accent-color-500'),
          600: 'var(--accent-color-600'),
          700: 'var(--accent-color-700'),
          800: 'var(--accent-color-800'),
          900: 'var(--accent-color-900'),
        }
      }
    }
  }
}

주제의 세 가지 색상(주색, 차색, 중음) 중 하나에 대해 모두 11개의 값이 있다.이것이 바로 Tailwind가 팔레트에서 제공하는 기능이기 때문에 당신도 이렇게 해야 합니다.일반적으로 DEFAULT은 중간 색상, 500이지만 기술적으로는 원하는 색상으로 설정할 수 있습니다.현재 템플릿의 기능은 .bg-primary-color-500 클래스를 사용하여 단추의 배경을 원색으로 변환합니다. (모든 원색 값).text-primary-color-400을 사용하여 텍스트 색상을 변경할 수도 있습니다.이것은 당신에게 있어서 매우 자연스러운 것이다. 마치 당신이 직접 순풍에서 제공한 어떤 색깔을 사용하는 것과 같다.각 색상의 값은 CSS 사용자 정의 속성에서 가져옵니다.우리는 즉시 이 속성들을 설정할 것이다.

Loading the Theme When the App Loads
프로그램이 시작될 때 테마를 불러올 수 있는 여러 가지 방법이 있습니다.이 예에서는 프로그램이 시작될 때 APP_INITIALIZER 영패를 사용하여 테마를 불러옵니다.이것은 언제든지 테마를 변경할 수 있습니다. 이것은 테마를 저장하는 위치에 따라 달라집니다. 왜냐하면 설정은 실행할 때가 아니라 구축할 때가 아니기 때문입니다.너는 더 많은 것을 읽을 수 있다.응용 프로그램 안내에 몇 개의 협동 작업이 필요할 때 설정을 불러옵니다.TailwindThemeModule을 만든 후 첫 번째 단계는 class을 만드는 것입니다. 테마를 가져올 때 테마를 불러오는 모듈로 전달됩니다.다음은 코스입니다.

// tailwind-theme-config.class.ts
export class TailwindThemeConfig {
  configUrl: string;

  constructor(obj: any = {}) {
    this.configUrl = obj.configUrl || './assets/tailwind-theme.config.json';
  }
}

우리는 곧 이 수업으로 돌아올 것이다.다음은 부트에 구성 파일을 로드하고 주제를 초기화하는 서비스입니다.

// tailwind-theme.service.ts
import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DOCUMENT } from '@angular/common';
import { TailwindTheme, updateThemeVariables } from '../tailwind-util';
import { TailwindThemeConfig } from '../tailwind-theme-config.class';
import { switchMap } from 'rxjs/operators';

@Injectable()
export class TailwindThemeService {
  constructor(
    private _http: HttpClient,
    @Inject(DOCUMENT) private readonly document: Document,
    private config: TailwindThemeConfig,
  ) {}

  loadConfig(): Promise<any> {
    const configUrl = this.config.configUrl || './assets/tailwind-theme.config.js';
    return this._http
      .get(`${configUrl}`)
      .pipe(
        switchMap((configObject: { themeUrl: string }) => {
          return this._http.get(configObject.themeUrl);
        }),
      )
      .toPromise()
      .then((themeData: TailwindTheme) => {
        updateThemeVariables(themeData, this.document);
      })
      .catch((err: any) => {
        console.error('There was an error while loading the Tailwind Theme.');
      });
  }
}

당신은 1분 안에 이 loadConfig 방법을 사용할 것입니다. 아래에서도 tailwind-util 파일을 제공할 것입니다.우리가 이전에 만든 클래스는 구조 함수를 통해 이 서비스에 주입됩니다.loadConfig 메서드는 Tailwind 테마 구성 객체를 가져오는 방법에 대해 설명합니다.이것은 Tailwind가 올바르게 사용한 tailwind.config.js 파일과 혼동해서는 안 됩니다.이것은 사용자 정의 설정 대상입니다. 테마를 불러오는 데 필요한 정보를 포함합니다.첫 번째 http.get은 파일에서 구성 객체를 가져옵니다.파일에는 다른 파일 또는 API 끝점을 가리키는 themeUrl 속성이 포함되어 있습니다.이 파일은 응용 프로그램의 로컬 파일일 수도 있고 원격 파일일 수도 있다.두 번째 http.get은 테마 정보를 불러옵니다.여기서 주제의 주색, 차색, 강조색을 얻을 수 있습니다.반환치는 Promise으로 전환해야 하는데 이것은 APP_INITIALIZER 영패의 요구 때문이다..then 블록은 TailwindTheme 인터페이스에 표시된 주제 데이터를 가져와 updateThemeVariables 함수에 전달한다.마지막으로 .catch 블록에서 오류를 포착했습니다.
다음은 TailwindTheme 및 Color 커넥터입니다.

// tailwind-theme.interface.ts
export interface Color {
  name: string;
  hex: string;
  isDarkContrast: boolean;
}

export interface TailwindTheme {
  'primary-color': string;
  'secondary-color': string;
  'accent-color': string;
}

테마가 주, 차, 중음보다 많거나 적으면 이 인터페이스에 추가해야 합니다.다음 기능은 팔레트를 만드는 데 유용한 두 가지 함수가 포함된 유틸리티 파일입니다.

// tailwind-util.ts
import * as tinycolor from 'tinycolor2';
import { Color, TailwindTheme } from './tailwind-theme.interface';

export function computeColorPalette(hex: string): Color[] {
  return [
    getColorObject(tinycolor(hex).lighten(45), '50'),
    getColorObject(tinycolor(hex).lighten(40), '100'),
    getColorObject(tinycolor(hex).lighten(30), '200'),
    getColorObject(tinycolor(hex).lighten(20), '300'),
    getColorObject(tinycolor(hex).lighten(10), '400'),
    getColorObject(tinycolor(hex), '500'),
    getColorObject(tinycolor(hex).darken(10), '600'),
    getColorObject(tinycolor(hex).darken(20), '700'),
    getColorObject(tinycolor(hex).darken(30), '800'),
    getColorObject(tinycolor(hex).darken(40), '900'),
  ];
}

export function getColorObject(value: tinycolor.Instance, name: string): Color {
  const c = tinycolor(value);
  return {
    name,
    hex: c.toHexString(),
    isDarkContrast: c.isLight(),
  };
}

export function updateThemeVariables(theme: TailwindTheme, document: Document) {
  for (const [name, color] of Object.entries(theme)) {
    const palette = computeColorPalette(color);
    for (const variant of palette) {
      document.documentElement.style.setProperty(`--${name}-${variant.name}`, variant.hex);
    }
  }
}

updateThemeVariables 함수는 theme 인터페이스 대상을 수신하고 순환 대상(primary-color, secondary-color과 accent-color)의 키를 사용하며 computeColorPalette 함수를 사용하여 키마다 팔레트를 만든다.이러한 색상 변형의 각각은 순환하며 각 값에 대한 CSS 사용자 정의 속성을 만들거나 업데이트합니다.tailwind.config.js 파일은 확장 색상 클래스의 CSS 사용자 정의 속성 값을 사용합니다.TailwindThemeModule의 마지막 단계는 실제 모듈 파일입니다.

// tailwind-theme.module.ts
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TailwindThemeService } from './tailwind-theme/tailwind-theme.service';
import { TailwindThemeConfig } from './tailwind-theme-config.class';

export function initTailwindThemeConfig(tailwindThemeSvc: TailwindThemeService) {
  return () => tailwindThemeSvc.loadConfig();
}

@NgModule({
  imports: [CommonModule],
  providers: [
    TailwindThemeService,
    {
      provide: APP_INITIALIZER,
      useFactory: initTailwindThemeConfig,
      deps: [TailwindThemeService],
      multi: true,
    },
  ],
})
export class TailwindThemeModule {
  static forRoot(config: TailwindThemeConfig): ModuleWithProviders<TailwindThemeModule> {
    return {
      ngModule: TailwindThemeModule,
      providers: [
        {
          provide: TailwindThemeConfig,
          useValue: config,
        },
        TailwindThemeService,
      ],
    };
  }
}

이 모듈 파일은 TailwindThemeService에 등록하고 APP_INITIALIZER 영패를 사용하여 loadConfig 방법을 호출합니다.응용 프로그램을 가져오고 초기화할 때 이 함수를 호출합니다.또한 모듈은 TailwindThemeConfig 대상을 가져올 때 모듈에 전달할 수 있습니다.이것이 바로 static forRoot 방법의 용도다.
이것이 Tailwind 테마 서비스를 만드는 데 필요한 모든 내용입니다.너는 this gist에서 이 서류들의 전문을 찾을 수 있다.

Importing the TailwindThemeModule TailwindThemeModule을 만든 후 사용할 주 AppModule으로 가져와야 합니다.이를 수행할 수 있는 방법은 다음과 같습니다.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TailwindThemeModule } from './tailwind-theme';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TailwindThemeModule.forRoot({ configUrl: './assets/config/tailwind-theme.config.json' }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

모듈을 가져오고 forRoot 방법에서 대상을 제공합니다.이 대상은 configUrl류에 필요한 TailwindThemeConfig류를 가지고 있다.이 값은 문자열 문자일 수 있지만, 이 설정 (Tailwind 테마 색상을 제공하는 위치) 은 환경마다 같은 위치에 있어야 합니다.또한 environment 파일을 사용하여 환경에 따라 위치를 변경할 수도 있습니다.

Running Your ApplicationTailwindThemeModule을 가져왔으니 프로그램을 시작할 수 있습니다.로컬에서 제공한 다음 app.component.html 파일을 엽니다.구성 요소에 몇 단락의 문자를 추가하면, 각 단락의 문자는 서로 다른 '순풍' 종류를 가지고 있다.너는 이렇게 할 수 있다.

<!-- app.component.html -->
<p class="text-primary-color-500">This will be the primary color.</p>
<p class="text-secondary-color-500">This will be the secondary color.</p>
<p class="text-accent-color-500">This will be the accent color.</p>

500 색상 값 외에 50과 100-900 값이 있어야 한다.

Conclusion
이로써 응용 프로그램에 세 가지 다른 색을 테마화할 수 있습니다. 그것이 바로 주색, 차색, 강조색입니다.디자인 중의 색깔이 이 세 가지 색깔을 바탕으로 사용할 수 있다면 너는 사용할 수 있다.만약 없다면 위와 같이 강조색을 더 많이 추가할 수 있다.이 밖에 본고는 프로그램이 시작될 때 테마를 바꾸는 방법을 보여 주지만, updateThemeVariables 함수를 사용하면 언제든지 테마를 변경할 수 있습니다.마찬가지로 확장 색상 값은 CSS 사용자 정의 속성을 기반으로 하기 때문입니다.