Angular 6: 라이브러리가 없는 동적 테마

내가 기억할 수 있는 한 테마 지정의 개념은 주변에 있었습니다. 사용자에게 제품의 모양과 느낌을 선택할 수 있는 기능을 제공하는 것은 놀라운 가치가 있습니다. 즉, 보다 현지화된 경험을 제공하고 개발자 유지 관리 시간을 줄여줍니다.



Angular 앱에서 어떻게 이와 같은 것을 만들 수 있습니까?

Sass만으로는 작동하지 않는 이유

Sass 변수는 사전 설정된 테마 경험을 생성하는 데 작동할 수 있지만 가장 큰 단점은 JavaScript로 조작할 수 없다는 것입니다. 변수 값을 동적으로 변경하려면 JavaScript가 필요합니다!

재료만으로는 효과가 없는 이유

Angular Material이 출시된 이후로 개발자들은 재사용 가능한 구성요소를 활용하기 위해 이 라이브러리로 모여들었습니다(내장 접근성은 말할 것도 없고).

자료에는 테마가 내장되어 있지만 다음 두 가지 이유로 작동하지 않을 수 있습니다.

기본적으로 재질에는 접근성에 최적화된 자체 색상 팔레트가 함께 제공됩니다. 더 많은 색상을 생성하려면 타사 도구를 사용하여 매트 팔레트 혼합에 전달하거나 새 테마 파일을 만들어야 합니다. 이는 외부 종속성을 생성하고 코드를 건드리지 않고 테마를 전환하는 기능을 제한합니다.

훌륭한 옵션이지만 모든 사람이 재료를 사용하고 싶어하는 것은 아닙니다! 많은 개발자는 구성 요소를 활용하고 자체 라이브러리를 만들기 위해 전체 라이브러리를 가져오는 것을 원하지 않습니다.

해결책? Sass + CSS 변수!

네이티브 CSS 사용자 지정 속성(저는 변수라고 부릅니다)을 사용해 본 적이 없다면 시작하는 데 도움이 되는 훌륭한 문서(여기)가 있습니다. 이 접근 방식이 작동하는 이유는 CSS 변수가 JavaScript로 조작될 수 있기 때문입니다! 이 조합을 사용하면 양식을 사용하여 앱 전체에서 사용할 수 있는 Sass 맵에 CSS 변수를 전달할 수 있습니다.

한번 볼까!

이 구현:

외부 라이브러리를 사용하지 않음

여러 구성 요소가 양식을 통해 스타일을 동적으로 변경하도록 허용

양식을 데이터베이스 또는 로컬 저장소에 저장할 수 있는 객체로 저장합니다

.

미리 로드된 스타일 또는 미리 설정된 스타일로 외부 객체를 로드하는 기능이 있음

데모 링크: https://native-theming-form-medium.stackblitz.io/

Stackblitz 링크: https://stackblitz.com/edit/native-theming-form-medium

더 매직

이 방법의 핵심 원칙은 Sass 맵과 CSS 변수를 결합하는 것입니다.

thetheme.scss 파일에서 기본값이 설정되어 Sass 맵으로 전달됩니다.

테마.scss

// default colors
.theme-wrapper {
    --cardColor: #CCC;
    --cardBackground: #FFF;
    --buttonColor: #FFF;
    --buttonBackground: #FFF;
    --navColor: #FFF;
    --navBackground: #FFF;
    --footerColor: #FFF;
    --footerBackground: #FFF;
    --footerAlignment: left;
}
// pass variables into a sass map
$variables: (
    --cardColor: var(--cardColor),
    --cardBackground: var(--cardBackground),
    --buttonColor: var(--buttonColor),
    --buttonBackground: var(--buttonBackground),
    --navColor: var(--navColor),
    --navBackground: var(--navBackground),
    --footerColor: var(--footerColor),
    --footerBackground: var(--footerBackground),
    --footerAlignment: var(--footerAlignment)
);

전역 sass 맵에서 기본 css 변수를 반환하는 함수가 생성됩니다.

함수.scss

@function var($variable) {
    @return map-get($variables, $variable);
}

구성 요소는 이제 양식을 다시 제출할 때 변경되는 동적 변수를 호스팅하기 위해 이 두 파일을 읽을 수 있습니다.

카드.구성요소.scss

@import '../../theme';
@import '../../functions';
.card {
    background-color: var(--cardBackground);
    color: var(--cardColor);
}

이제 카드의 배경 색상은 #FFFFFF이고 텍스트 색상은 #CCCCCC입니다.

그러나 값을 어떻게 변경합니까?

테마 선택기 구성 요소를 통해!

theme-picker.component.html 파일에서 ngModel과 함께 템플릿 양식을 사용하여 고유한 키(스타일)와 값(입력)을 가진 객체를 생성합니다. 그런 다음 개체는 변수를 동적으로 덮어쓰는 TypeScript 파일로 전달됩니다.

테마 선택기.component.ts

// searching the entire page for css variables
private themeWrapper = document.querySelector('body');
onSubmit(form) {
    this.globalOverride(form.value);
}
globalOverride(stylesheet) {
    if (stylesheet.globalNavColor) {
        this.themeWrapper.style.setProperty('--navColor',     stylesheet.globalNavColor);
    }
...
    if (stylesheet.globalButtonColor) {
        this.themeWrapper.style.setProperty('--buttonColor',     stylesheet.globalButtonColor);
    }
}

globalOverride 함수는 특정 변수에 대한 값이 존재하는지 확인한 다음 각 CSS 변수를 새로 입력된 변수로 바꿉니다.

비올라!

이 코드는 크기 조정에 더 잘 최적화될 수 있으므로(사전 설정 스타일 개체 사용, 제출 시 스타일 저장/게시) 마음껏 사용해 보십시오!