Originally published on my-blog

본고는 CSS 변수를 사용하여 웹 응용 프로그램이나 사이트에서 주제를 전환하는 것에 관한 것이다.그것은 당신이 이미 나의 이전 문장을 읽었거나 이 기능에 대해 좀 알고 있다고 가정합니다.

우리는 무엇을 건설할 것입니까?

다음은 본고가 작성한 코드의 최종 결과입니다.이를 실현하기 위해 기본적인 HTML, CSS 및 JavaScript 작업을 사용합니다.

보시다시피 왼쪽에서 테마에 설정할 수 있는 옵션을 제공합니다.배경색, 색깔, 글씨체를 바꾸면 우리 사이트나 응용 프로그램에 테마를 전환하는 방법을 볼 수 있고 이해할 수 있다고 생각합니다.
이 과정은 매우 간단하다.먼저 HTML 레이아웃을 구축하여 기본 테마 변수를 사용하여 CSS를 적용하고 두 개의 이벤트 프로세서를 추가하여 테마를 동적으로 업데이트합니다.
JS 코드는 차세대 JavaScript로 작성되었으므로 최신 브라우저를 지원하는지 확인하십시오.

HTML 설정

기본 테마 전환기

왼쪽 상단의 동그라미는 각 동그라미에 할당된 미리 정의된 테마를 전환합니다.우리는 세 가지 미리 정의된 주제를 구축하고 색 입력을 통해 동적 착색을 허용할 것이다. 우리는 본문 뒤에서 볼 것이다.기본 색상 배열은 녹색(Vue), 파란색(Facebook), 파란색(Twitter)입니다.예를 들어 단추를 만들기 위해서 우리는 세 개의 span 요소를 사용할 수 있다.

Note that you could use a button or input element, it doesn't matter. There is no specific reason for me to use the span element. It's just an example.

네, 표시로 돌아가세요.보아하니 이렇다.

<span class="btn vue-green" data-bg-color="#42b883" data-color="#35495e">&nbsp;</span>
<span class="btn fb-blue" data-bg-color="#3b5998" data-color="#8b9dc3">&nbsp;</span>
<span class="btn tw-blue" data-bg-color="#0084b4" data-color="#00aced">&nbsp;</span>

우리는 span 요소를 사용하기 때문에 미리 정의된 색을 어딘가에 저장해야 한다.방법은 data 속성을 사용하는 것이다.이 속성의 값은 우리의 주제에 사용될 것입니다. 잠시 후에 본문에서 볼 수 있습니다.

TIP: You could also set these through JavaScript on page load to remain clean. The values could be, for example, defined as a CSS variable and when the page initially loads you could read them and set each span data attribute accordingly.

글꼴 변환기

글꼴 변환기는 세 개의 select 요소를 포함하는 간단한 option 요소가 될 것이다.option당 value 업데이트:

<select>
    <option value="12">12px</option>
    <option value="15" selected>15px</option>
    <option value="25">25px</option>
</select>

동적 음영처리

사용자 정의 테마 색에 대해서는 font-size 유형의 input 요소를 사용합니다.이것은 상당히 깔끔해서, 우리로 하여금 웹 페이지에 기능이 완비된 색 선택기를 가질 수 있게 한다.

<label for="bg-color">Background:</label>
<input type="color" id="bg-color">
<label for="color">Color:</label>
<input type="color" id="color">

전체 왼쪽 부분은 다음과 같습니다.

<aside>
    <h1>Theme Switcher</h1>
    <h3>Defaults</h3>
    <span class="btn vue-green" data-bg-color="#42b883" data-color="#35495e">&nbsp;</span>
    <span class="btn fb-blue" data-bg-color="#3b5998" data-color="#8b9dc3">&nbsp;</span>
    <span class="btn tw-blue" data-bg-color="#0084b4" data-color="#00aced">&nbsp;</span>
    <h3>Font Size</h3>
    <select>
        <option value="12px">12px</option>
        <option value="15px" selected>15px</option>
        <option value="25px">25px</option>
    </select>
    <h3>Dynamic Color</h3>
    <label for="bg-color">Background:</label>
    <input type="color" id="bg-color">
    <label for="color">Color:</label>
    <input type="color" id="color">
</aside>

변수 설정

HTML 구성 가능 부분이 완료되었기 때문에 CSS 변수와 기본값을 설정할 때입니다.이 작업은 color 위조 클래스에서 수행됩니다.

:root {
    --primary-color: #42b883;
    --primary-bg-color: #35495e;
    --primary-font-size: 15px;
    --color-white: #fff;
}

이것은 우리로 하여금 지정된 색이나 글꼴이 필요한 곳에서 변수를 다시 사용할 수 있게 한다.예를 들어, 기본 테마는 녹색입니다.

변수 사용

만약에 우리가 :root 원소의 background-color, body 원소의 color 및 각각의 main 원소의 font-size 를 변경하려고 한다고 가정하자.
우리의 css는 다음과 같이 해야 한다.

body {
    /* removed for brevity */
    background-color: var(--primary-bg-color);
}
main {
    /* removed for brevity */
    color: var(--primary-color);
}
p {
    font-size: var(--primary-font-size);
}

CSS 변수는 p 함수를 사용하여 요소로 설정됩니다.CSS 속성 값은 CSS 변수에서 해석되고 가져옵니다.이것은 매우 간결하다. 왜냐하면 우리가 변수를 변경할 때마다 이 속성의 값이 업데이트되기 때문이다.

JavaScript 설정

자, 이제 자바스크립트 부분을 소개하겠습니다.그것 없이는 테마 전환이 불가능하다.CSS 변수의 값을 변경하려면 JavaScript 코드가 필요합니다.우리는 몇 가지 간단한 절차를 완성할 것이다.

CSS 변수를 업데이트하기 위한 논리 생성

필요한 요소 찾기

추가 이벤트 처리 프로그램

변수 업데이트를 담당하는 코드 실행

변수 업데이트를 담당하는 함수:

const handleThemeUpdate = (cssVars) => {
    const root = document.querySelector(':root');
    const keys = Object.keys(cssVars);
    keys.forEach(key => {
        root.style.setProperty(key, cssVars[key]);
    });
}

요컨대, 이 함수는 대상을 매개 변수로 하고, 키마다 var 위조 클래스에 정의된 상응하는 CSS 변수를 업데이트합니다.이 점을 실현하기 위해서 우리는 이러한 방식으로 대상을 정의해야 한다. 키마다 CSS 변수 이름을 대표하고, 키마다 적용하고자 하는 실제 CSS 값을 대표한다.
예:

{
    '--primary-bg-color': 'green'
}

이제 요소를 찾아 이벤트 처리 프로그램을 추가해야 합니다.

const themeSwitchers = document.querySelectorAll('span');
const fontSwitcher = document.querySelector('select');
const dynamicInputs = document.querySelectorAll('input');

themeSwitchers.forEach((item) => {
    item.addEventListener('click', (e) => {
        handleThemeUpdate({
            '--primary-bg-color': e.target.getAttribute('data-bg-color'),
            '--primary-color': e.target.getAttribute('data-color')
        });
    });
});

fontSwitcher.addEventListener('change', (e) => {
    handleThemeUpdate({
        '--primary-font-size': `${e.target.value}px`
    });
});

dynamicInputs.forEach((item) => {
    item.addEventListener('change', (e) => {
        const cssPropName = `--primary-${e.target.id}`;
        handleThemeUpdate({
            [cssPropName]: e.target.value
        });
    });
});

이제 HTML, CSS, JS 간의 연결을 볼 수 있기를 바랍니다.사용자가 span 요소를 눌렀을 때, 우리의 :root 속성을 읽고 그 값을 해당하는 CSS 변수로 설정합니다.
또한 사용자가 색상 선택기 요소의 값을 변경하거나 새 글꼴 크기를 선택하면 선택한 값이 적절한 CSS 변수로 설정됩니다.
코드를 좀 가지고 놀고 싶으면 live fiddle 보세요.
읽어주셔서 감사합니다. 다음 글은 안녕히 계세요.

한층 더 읽다

만약 네가 아직 나의 이전 게시물CSS Variables Cheat Sheet을 읽은 적이 없다면, 가서 보아라.
CSS flexbox 모듈에 관심이 있으시면 this article 를 참조하십시오.그것은 그것을 어떻게 사용하는지 배우기 위해 간단한 해석과 재미있는 방법을 제공했다.