분류 css

CSS 사용자 정의 속성이 있는 쉬운 웹 사이트 테마

컨텐츠 정보

  • 조회 6 (작성일 )

본문

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


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


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


Dev.to theme selection page 


전체 웹 사이트 테마 사용자 지정은 일부 사이트에서는 과도 할 수 있지만 웹용으로 디자인하고 개발할 때 여전히 염두에 두어야 할 사항입니다. 고맙게도 최신 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;
      }
    }


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


Operating system color selection reflected on a webpage 


사용자 정의 테마 선택 


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의 템플릿을 수정했습니다. 

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


Custom portfolio site with toggle theme button 


테마 스위치의 코드는 위의 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


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


결론 


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