CSS 변수를 사용하여 각도 프로그램의 테마를 설정합니다 - 간단한 해결 방안!

사용자에게 어떻게 다른 응용 프로그램 배색 방안을 제공하는지 고려해 보셨습니까?아니면 응용 프로그램에 Dark 주제가 있기를 원합니까?
누가 변화를 좋아하지 않겠는가?휴대전화에서도 때때로 우리는 새로운 주제를 시도하는 외관과 느낌에 싫증을 느낀다.

여러 주제를 제공합니까?

때때로 브랜드 색채를 고수하는 것이 항상 좋은데, 특히 소비자의 제품에 직접 영합하는 것이 좋다.또 일부 응용 프로그램은 다른 기업에 영합하기 때문에 이런 응용 프로그램에서 서로 다른 기업을 위해 응용 프로그램의 외관과 느낌을 맞춤형으로 만드는 것이 가장 좋다.
그래서 답은 많은 일에 달려 있다는 것이다.예를 들면 다음과 같습니다.

누가 관객이야

그것이 가치를 가져올 수 있을까

하나의 좋은 예는 학교 관리 소프트웨어다.이 프로그램이 교사, 학생, 학부모가 사용한다고 가정하자.우리는 역할에 따라 응용 프로그램에 서로 다른 주제를 지정할 수 있다.
사용자 정의 테마를 제공하는 또 다른 프로그램은 흰색 탭을 사용할 수 있는 프로그램입니다.따라서 모든 사용자/기업에 대해 그들은 자신의 주제를 설정하여 자신의 브랜드 색깔과 일치하도록 할 수 있다.
응용 프로그램에 여러 가지 색 테마를 제공하더라도, 응용 프로그램에 Dark Mode 제공하는 것은 좋은 생각일 수 있습니다.점점 더 많은 제품 지원Dark 주제.

CSS 사용자 정의 속성

응용 프로그램에 테마를 설정하는 가장 간단한 방법은 CSS Variables/CSS custom properties를 사용하는 것이다.우리가 많은 일을 해야 할 때, 단지 여기와 저기서 색깔을 바꾸기만 하면, 주제화는 이전보다 훨씬 쉬워진다.
그러나 사용CSS custom properties은 매우 간단하다.
CSS 프로세서는 오랫동안 변수의 개념을 가지고 있었는데 몇 년 전까지만 해도 CSS는 이 방면에서 여전히 뒤떨어졌다.현재, 모든 현대 브라우저는 it를 지원합니다.

CSS 사용자 정의 속성에는 JavaScript에서 작업할 수 있는 흥미로운 부분이 있습니다.

선언 변수

--primaryColor: red;
--primaryFont: 'Poppins';
--primaryShadow: 0 100px 80px rgba(0, 0, 0, 0.07);

사용법

button {
    background: var(--primaryColor);
    font-family: var(--primaryFont);
    box-shadow: var(--primaryShadow);
}

이것은 CSS 사용자 정의 속성에 대한 가장 기본적인 지식입니다.

각도 주제화

CLI v11을 사용하는 새로운 Angular 프로젝트를 시작합니다.2.9. 이제 먼저 응용 프로그램에 대해 몇 가지 CSS 변수를 설명합니다.styles.scss 파일에서 다음을 수행합니다.

:root {
  --primaryColor: hsl(185, 57%, 35%);
  --secondaryColor: hsl(0, 0%, 22%);
  --textOnPrimary: hsl(0, 0%, 100%);
  --textOnSecondary: hsl(0, 0%, 90%);
  --background: hsl(0, 0%, 100%);
}

우리는 이미 일부 변수를 성명했고, 모든 변수에 기본 색을 지정했다.주의해야 할 점은 다른 색을 제공하려면 일반적인 방식으로 변수를 명명해야 한다는 것이다.너는 색깔의 이름으로 그것을 명명해서는 안 된다.

테마 설정

모든 테마가 설정될 theme.config.ts 파일을 만들 것입니다.항상 이렇게 정적 구성을 수행하거나 API 응답에서 구성을 가져올 수 있습니다.
만약 당신이 자주 주제를 바꾼다면, 후자는 더 좋은 방법이다.

export const THEMES = {
  default: {
    primaryColor: 'hsl(185, 57%, 35%)',
    secondaryColor: 'hsl(0, 0%, 22%)',
    textOnPrimary: 'hsl(0, 0%, 100%)',
    textOnSecondary: 'hsl(0, 0%, 90%)',
    background: 'hsl(0, 0%, 100%)',
  },
  dark: {
    primaryColor: 'hsl(168deg 100% 29%)',
    secondaryColor: 'hsl(161deg 94% 13%)',
    textOnPrimary: 'hsl(0, 0%, 100%)',
    textOnSecondary: 'hsl(0, 0%, 100%)',
    background: 'hsl(0, 0%, 10%)',
  },
  netflix: {
    primaryColor: 'hsl(357, 92%, 47%)',
    secondaryColor: 'hsl(0, 0%, 8%)',
    textOnPrimary: 'hsl(0, 0%, 100%)',
    textOnSecondary: 'hsl(0, 0%, 100%)',
    background: 'hsl(0deg 0% 33%)',
  },
  spotify: {
    primaryColor: 'hsl(132, 65%, 55%)',
    secondaryColor: 'hsl(0, 0%, 0%)',
    textOnPrimary: 'hsl(229, 61%, 42%)',
    textOnSecondary: 'hsl(0, 0%, 100%)',
    background: 'hsl(0, 0%, 100%)',
  },
};

이것은 가장 기본적인 방법이다.아마도 미래에 우리는 테마 맞춤형기를 어떻게 만드는지 토론할 수 있을 것이다. 사용자는 응용 프로그램의 외관과 느낌을 완전히 바꿀 수 있을 것이다.

테마 서비스

우리는 서비스를 만들고 그것을 ThemeService 라고 명명했다.업데이트 테마의 논리는 이 서비스에서 처리됩니다.우리는 서비스를 응용 프로그램에 주입한 다음 서비스에서 공개된 함수를 사용하여 테마를 변경할 수 있습니다.

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { THEMES } from '../config/theme.config';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  setTheme(name = 'default') {
    const theme = THEMES[name];
    Object.keys(theme).forEach((key) => {
      this.document.documentElement.style.setProperty(`--${key}`, theme[key]);
    });
  }
}

서비스가 매우 간단하다.우리는 주제를 바꾸는 함수를 공개했다.그 작업 원리는 기본적으로 styles.scss 파일에 정의된 CSS 변수 값을 덮어쓰는 것이다.
우리는 방문document이 필요하기 때문에 Document 영패를 구조 함수에 주입할 것이다.
이 함수는 적용할 테마의 이름을 사용합니다.이것은 설정 파일에서 선택한 테마의 테마 변수를 가져와서 순환해서 변수에 새 값을 적용합니다.
완성!

코드 및 데모

단추를 누르면 테마를 변경합니다.

반드시 평론 부분에 너의 생각을 첨가해야 한다.
보안 유지❤️