다크 모드의 출현으로 웹 사이트 테마 사용자 지정이 기능 대신 기대가 되고 있습니다.

많은 웹 사이트가 한 단계 더 나아가 사용자가 여러 테마 (예 : dev.to)에서 선택할 수 있도록 합니다.

https://dev.to/nathanminchow/easy-website-themes-with-css-custom-properties-1pb7

전체 웹 사이트 테마 사용자 지정은 일부 사이트에서는 과도 할 수 있지만 웹용으로 디자인하고 개발할 때 여전히 염두에 두어야 할 사항입니다. 고맙게도 최신 CSS에는 웹 사이트 사용자 정의를 쉽게 구현할 수 있는 기능이 포함되어 있습니다. 대부분은 CSS 사용자 정의 속성으로 요약됩니다.

CSS 속성 : 빠른 개요 

CSS 사용자 정의 속성을 사용하면 전 처리기 없이 CSS에서 재사용 가능한 변수를 정의 할 수 있습니다. 완전히 새로운 것은 아닙니다. 대부분의 최신 브라우저는 2016 년부터 이를 지원했습니다. 그리고 변수이기 때문에 동적으로 업데이트 할 수 있습니다.

사용자 지정 속성은 속성 이름 앞에-를 붙여 모든 요소에 정의 할 수 있습니다. 루트 요소에 재사용 가능한 속성을 생성하려면 다음과 같이 정의 할 수 있습니다 (이 예제는 MDN에서 가져옴).

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

var() 키워드를 통해 자식 요소에서 이러한 속성에 액세스 할 수 있습니다.

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

이것이 실제로 작동하는지 보기 위해 아래 예제에서 세 가지 색상을 정의했습니다. 확인란이 토글되면 CSS 속성이 업데이트 되고 참조되는 위치에 따라 색상이 변경됩니다.

https://codepen.io/nathanspenner/pen/LYVxpjP

사용자 지정 속성은 많은 유용한 작업을 수행 할 수 있습니다. CSS 사용자 정의 속성, 사용 방법 및 전 처리기 변수와의 차이점에 대해 자세히 알아 보려면 Michael Riethmuller가 작성한 이 훌륭한 기사를 읽는 것이 좋습니다.

테마 사용자 지정 사용 사례

사용자 지정 속성은 동적으로 재사용 및 업데이트 할 수 있으므로 테마 사용자 지정에 적합합니다. 사용자 지정 속성을 사용하여 사이트를 사용자 지정하는 방법을 살펴 보겠습니다.

다크 모드 구현 

사이트에 다크 모드를 추가하는 가장 간단한 방법은 prefers-color-scheme 미디어 쿼리를 사용하는 것입니다. 이 미디어 쿼리는 일반적으로 사용자 운영 체제의 테마에 해당합니다.

따라서 다음과 같이 정의 된 일부 범위 속성이 있는 경우 :

    main {
      --primary-color: cyan;
      --secondary-color: orange;
      --tertiary-color: yellow;
    }

미디어 쿼리에서 값을 간단히 업데이트 할 수 있습니다.

    @media (prefers-color-scheme: dark) {
      main {
        --primary-color: gray;
        --secondary-color: darkgray;
        --tertiary-color: lightgray;
      }
    }

그리고 이러한 속성을 사용하는 모든 요소는 사용자의 테마가 변경 될 때 동적으로 업데이트 됩니다. 실제로 어떻게 보일 수 있는지는 다음과 같습니다.

사용자 정의 테마 선택 

prefers-color-scheme이 좋은 출발점이지만, 때때로 우리는 사용자가 마음대로 테마를 선택할 수 있는 기능을 제공하고 싶습니다.

사용자 지정 속성을 활용하도록 사이트를 디자인 했다면 이 작업을 상당히 쉽게 수행 할 수 있습니다. 우리가 해야 할 일은 그것들을 수정하는 것뿐입니다. CSS나 자바스크립트를 통해 할 수 있습니다.

CSS로 사용자 지정 속성 수정 

다른 CSS와 마찬가지로 사용자 정의 속성은 적절한 선택자가 있는 한 업데이트 할 수 있습니다.

이전 예제의 CSS를 살펴보면 사용자 지정 속성의 범위를 기본 요소로 지정했음을 알 수 있습니다. 확인란이 토글되면 선택기가 그 안의 범위 속성을 업데이트합니다. 그러면 기본 요소 내의 모든 요소가 새 값으로 업데이트 됩니다.

https://codepen.io/nathanspenner/pen/LYVxpjP

이 방법은 구현이 매우 빠르지 만 CSS 선택자는 다소 변덕스럽고 HTML에 따라 달라질 수 있습니다. 또한 대부분의 경우 사용자가 선택한 테마를 저장하려고 합니다. 

Javascript는 더 많은 유연성을 제공합니다.

Javascript로 사용자 지정 속성 수정 

setProperty() 메서드를 사용하여 Javascript에서 사용자 지정 속성을 업데이트 할 수 있습니다.

메인 요소로 범위가 지정된 사용자 지정 속성이 있는 경우 Javascript에서 쿼리하고 setProperty()를 호출하여 속성을 새 값으로 업데이트 할 수 있습니다.

https://codepen.io/nathanspenner/pen/zYGEVGx

: root 의사 클래스에 정의 된 사용자 지정 속성을 보는 것이 일반적입니다. 이 경우 루트 요소에서 setProperty를 호출하여 사용자 지정 속성을 업데이트 할 수 있습니다.

https://codepen.io/nathanspenner/pen/QWbqXKY

이러한 예제는 몇 가지 div 요소 만 변경했지만 동일한 기술을 사용하여 전체 사이트의 테마를 변경할 수 있습니다. 

이를 증명하기 위해 대부분의 배경, 텍스트 색상 및 액센트에 사용자 지정 속성을 사용하도록 HTML5UP의 템플릿을 수정했습니다. 

그런 다음 대신 어두운 값으로 해당 속성을 업데이트하는 토글 버튼을 추가했습니다.

테마 스위치의 코드는 위의 CodePens와 매우 유사합니다. Javascript에 몇 가지 "테마"개체를 정의합니다.

const darkTheme = {
  "--accent-color": "#4acaa8",
  "--background-color": "#343737",
  "--active-scroll-background": "#343737",
  "--color-text": "white",
  "--sidebar-color": "#444c48"
};

const lightTheme = {
  "--accent-color": "#4bcdab",
  "--background-color": "#f0ffff",
  "--active-scroll-background": "#f0ffff",
  "--color-text": "#777",
  "--sidebar-color": "#4bcdab"
};

그런 다음 토글 버튼을 누르면 지정된 "테마"의 속성으로 루트 요소에 정의한 사용자 지정 속성을 업데이트합니다.

function applyTheme(theme) {
  let root = document.documentElement;
  root.style.setProperty("--accent-color", theme["--accent-color"]);
  root.style.setProperty("--background-color", theme["--background-color"]);
  root.style.setProperty(
    "--active-scroll-background",
    theme["--active-scroll-background"]
  );
  root.style.setProperty("--color-text", theme["--color-text"]);
  root.style.setProperty("--sidebar-color", theme["--sidebar-color"]);
}

여기에서 소스 코드를 사용할 수 있는 프리뷰를 자유롭게 살펴보십시오.

이와 같은 테마 사용자 지정을 구현하면 사이트에 새 테마를 추가하는 것이 새 테마 개체를 만드는 것만 큼 간단합니다. 사용 가능한 도구에 따라 로컬 저장소 또는 데이터베이스를 통해 사용자의 기본 설정을 저장할 수 있습니다.

사용자 정의 색상 선택 

일부 웹 사이트 및 앱에서는 사용자가 직접 테마를 만들고 수정할 수 있습니다. 다시 한 번 setProperty()를 사용하여 입력을 위해 노출 된 값을 포함하여 모든 값으로 사용자 정의 속성을 업데이트 할 수 있습니다.

아래 Codepen에서 첫 번째 사각형의 색상과 모든 사각형의 테두리는 입력 요소로 노출됩니다. 양식이 제출되면 다음 값이 업데이트 되고 결과에 반영됩니다.

https://codepen.io/nathanspenner/pen/yLNPExq

당연히 이를 확장하여 전체 웹 사이트 또는 애플리케이션에서 사용되는 다양한 속성을 노출 할 수 있습니다. 그런 다음 이러한 기본 설정을 내보내거나 저장하여 사용자의 선택을 기억하거나 사용자가 테마를 공유하도록 허용 할 수 있습니다.

결론 

사용자 지정 속성을 사용하면 많은 작업 없이 웹 사이트를 전면적으로 변경할 수 있습니다. 따라서 선호 색상 스키마를 사용하여 사용자의 테마 기본 설정을 자동으로 감지하거나 사용자가 자신의 테마를 선택 (잠재적으로 수정) 할 수 있도록 허용하는 등 테마 사용자 지정을 구현하는 데 훌륭한 도구가 됩니다.