시대가 발전함에 따라 사이트 주제의 맞춤형 제작은 하나의 기능이 아니라 하나의 기대가 되고 있다.
많은 웹 사이트에서 한 걸음 더 나아가 사용자가 여러 주제(예:
일부 사이트에 대해 말하자면 완전한 사이트 주제 맞춤형은 좀 지나칠 수 있지만 사이트를 위해 디자인하고 개발할 때 우리는 여전히 이 점을 기억해야 한다.고맙게도 현대 CSS에 포함된 기능은 사이트의 맞춤형 제작을 쉽게 한다.대부분의 컨텐트는 CSS 사용자 정의 속성으로 요약됩니다.

CSS 속성:빠른 개요

CSS Custom Properties은 미리 프로세서를 사용하지 않고 CSS에서 재사용 가능한 변수를 정의할 수 있도록 합니다.그것들은 결코 완전히 새로운 것이 아니다.most modern browsers have supported them since 2016 . 그것들은 변수이기 때문에 우리는 그것들을 동적으로 업데이트할 수 있다.
속성 이름 앞에 --을 더하면 모든 요소에 사용자 정의 속성을 정의할 수 있습니다.root 요소에 재사용 가능한 속성을 만들려면 다음과 같이 정의할 수 있습니다(이 예는 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 속성이 업데이트되고 해당 속성을 참조하는 모든 위치에서 색상이 변경됩니다.
사용자 정의 속성은 많은 유용한 일을 할 수 있다.Michael Riethmuller의 this excellent article을 읽어 CSS 사용자 정의 속성, 사용 방법 및 사전 프로세서 변수와의 차이점에 대해 자세히 알아보는 것이 좋습니다.

테마 맞춤형 용례

사용자 정의 속성은 다시 사용되고 동적 업데이트될 수 있기 때문에 테마 사용자 정의에 매우 적합합니다.사용자 정의 속성을 사용하여 사이트를 사용자 정의하는 방법을 보여 줍니다.

다크 모드 구현

사이트에 암흑 모드를 추가하는 가장 간단한 방법은 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를 보면 사용자 정의 속성의 범위를 main 요소로 제한했음을 알 수 있습니다.확인란이 전환되면 선택기가 해당 역할 영역 속성을 업데이트합니다.따라서 main 요소의 모든 요소가 새 값으로 업데이트됩니다.
비록 이런 방법은 실현이 매우 빠르지만, CSS 선택기는 약간 변하기 쉬울 수 있다. (또한 우리의 HTML에 의존할 수 있다.)또한 대부분의 경우 사용자의 테마 선택을 저장하기를 원합니다.Javascript는 우리에게 더 많은 유연성을 주었다.

Javascript를 사용하여 사용자 정의 속성 수정

setProperty() method을 사용하여 Javascript에서 사용자 정의 속성을 업데이트할 수 있습니다.
만약 우리가 사용자 정의 속성이 main 요소에 작용한다면 자바스크립트에서 그것을 조회하고 setProperty()을 호출하여 속성을 새 값으로 업데이트할 수 있습니다.:root 위류에서 정의된 사용자 정의 속성은 매우 흔하다.이 경우 루트 요소에서 setProperty을 호출하여 사용자 정의 속성을 업데이트할 수 있습니다.
이 예들은 div개 요소만 바뀌었지만 같은 기술로 전체 사이트의 주제를 바꿀 수 있다.이 점을 보여주기 위해 저는 a template from 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"]);
}

미리 보기 here, 원본 코드는 here을 마음대로 보십시오.
이러한 테마 맞춤형을 실현함으로써 사이트에 새로운 테마를 추가하는 것은 새로운 테마 대상을 만드는 것처럼 간단합니다.우리는 local storage 또는 데이터베이스를 통해 사용자의 선호도를 저장할 수 있으며, 구체적으로는 우리가 사용할 수 있는 도구에 달려 있다.

색상 선택 사용자 정의

일부 사이트와 응용 프로그램은 사용자가 직접 테마를 만들고 수정할 수 있도록 한다.마찬가지로, 우리는 setProperty()을 사용하여 입력을 위해 공개된 값을 포함하여 모든 값으로 사용자 정의 속성을 업데이트할 수 있습니다.
다음 코드 펜에서는 첫 번째 사각형의 색상과 모든 사각형의 테두리가 입력 요소로 표시됩니다.양식을 제출하면 값이 업데이트되어 결과에 반영됩니다.
물론, 우리는 그것을 확장해서 전체 사이트나 응용 프로그램에서 사용하는 각종 속성을 공개할 수 있다.그런 다음 이러한 기본 설정을 내보내거나 저장하여 사용자의 선택을 기억하거나 주제를 공유할 수 있습니다.

결론

사용자 정의 속성은 웹 사이트를 철저하게 변경할 수 있으며, 많은 작업을 할 필요가 없다.이것은 prefers-color-scheme 테마에 대한 사용자의 선호도를 자동으로 측정하든지, 사용자가 자신의 테마를 선택하거나 수정할 수 있도록 하는 절호의 도구가 되었다.