간단한 JavaScript 테마 전환

16440 단어 codenewbie css beginners javascript

ezToggle 소개

지난 주말에 저는 HTML, CSS, 기본 자바스크립트를 사용하여 사이트에 테마 전환을 추가하는 간단한 방법을 만들었습니다.
이것은 나의 첫 번째 JavaScript 성공 사례이지만, 사이트에 명암 테마를 추가하여 전환하는 간단한 방법을 찾고 있는 사람들에게는 이것이 아마도 그것일 것이다.
가장 중요한 것은 최소한의 자바스크립트를 포함하고 있기 때문에 누구나 사용할 수 있어야 한다는 것이다.

var body = document.querySelector('body');
var bodyClass = body.classList;
var themeToggle = document.querySelector('#theme-toggle');
var footer = document.querySelector('.footer');
var light = document.querySelector('.light');
var dark = document.querySelector('.dark');

themeToggle.addEventListener('click', () => {
    body.classList.toggle("light");
    body.classList.toggle("dark");
    themeToggle.classList.toggle("btn-light");
    themeToggle.classList.toggle("btn-dark");
    footer.classList.toggle("footer-light");
    footer.classList.toggle("footer-dark");
});

현재 페이지의 색이 바뀌지 않았다면 세 줄을 삭제할 수 있습니다. 진정한 비밀은 CSS 변수를 사용하는 것입니다.당신이 어떻게 당신의 사이트에서 이 점을 실현하는지 봅시다!

EZ 전환 입문

먼저 CSS 및 JS 파일이 필요합니다. 에서 파일을 찾을 수 있습니다.
나는 최근에 CSS 변수를 발견했다. 나는 그것들을 매우 좋아한다. 나는 그것들이 이 프로젝트와 진행 중인 모든 프로젝트에 매우 적합하다는 것을 안다.
모르는 경우 CSS 변수는 CSS 속성입니다. 한 번 정의하여 전체 문서에서 호출할 수 있습니다.이것은 색상, 전환, 여백/채우기 등에 매우 유용합니다!CSS에서 중복되는 모든 내용은 변수로 바뀔 수 있습니다.
이것은 테마에 특히 유용합니다. 설정된 변수의 색을 한 번 변경할 수 있고 전체 문서에서 변경할 수 있기 때문입니다.

/*--------------------Reusable Variables--------------------*/
:root {
    /*--------------------Light Theme Variables (Default)--------------------*/
    --light-theme-background-color: #eee;
    --light-theme-darker-background-color: #ccc;
    --light-theme-text-color: #333;
    --light-theme-link-color: #ff6347;
    --light-theme-link-hover-color: #fa2600;
}

GitHub 재구매 CSS 변수에 대한 추가 정보

아래의 코드를 보면 세 가지 속성에서만 조명 테마를 정의한 것을 발견할 수 있습니다.

.light {

    background: var(--light-theme-background-color);

    color: var(--light-theme-text-color);

    transition: var(--theme-change-timing);

}

내가 배치한 문서var(--light-theme-text-color); 중 어느 곳에서든지 우리가 #fff; 에서 정의한 --light-theme-text-color: #333; 과 같은 색을 나타냅니다. 왜 나는 두 종류 .light 와 .dark 에서 주제를 정의합니까?내가 간단하게 말한 클래스를 body 표시에 추가할 수 있기 때문에, 그리고 BAM, 당신의 주제가 바뀔 것이다.

설치 프로그램

HTML

우선, 우리는 body 라벨에 일종의 빛을 적용해야 한다.

<body class="light">

이것은 기본 테마를 .light 클래스에 정의된 모든 테마로 설정합니다.기본 테마가 짙은 색이면 <body class="dark"> 으로 변경하면 됩니다.

CSS

CSS를 설정하려면 몇 단계가 필요합니다.첫 번째 단계는 :root psudo 클래스에서 CSS 변수를 정의하는 것입니다.이렇게 하는 이유는 페이지의 다른 요소에서 변수를 반복할 필요가 없기 때문이다.:root 에서 선언할 때 요소마다 접근할 수 있습니다.

/*--------------------Reusable Variables--------------------*/
:root {
    /*--------------------Light Theme Variables (Default)--------------------*/
    --light-theme-background-color: #eee;
    --light-theme-darker-background-color: #ccc;
    --light-theme-text-color: #333;
    --light-theme-link-color: #ff6347;
    --light-theme-link-hover-color: #fa2600;

    /*--------------------Dark Theme Variables--------------------*/ 
    --dark-theme-background-color: #333;
    --dark-theme-darker-background-color: #111;
    --dark-theme-text-color: #eee;
    --dark-theme-link-color: #00fa9a;
    --dark-theme-link-hover-color: #00955b; 

    /*--------------------Other Variables--------------------*/ 
    --link-hover-timing: all 0.25s ease-in-out;
    --theme-change-timing: all 1s ease-in-out;
}

다음으로, 나는 모든 주제를 위해 몇 가지 종류를 만들었다.여기에는 본문의 일반.light과.dark주제, 그리고btn-light와.btn-dark및.footer-light주제가 포함됩니다.

/*--------------------Light Theme Styles (Default)--------------------*/
.light {
    background: var(--light-theme-background-color);
    color: var(--light-theme-text-color);
    transition: var(--theme-change-timing);
}

.light a {
    color: var(--light-theme-link-color);
}

.light a:hover {
    color: var(--light-theme-link-hover-color);
}

.footer-light {
    background: var(--light-theme-darker-background-color);
}

사용자가 만든 모든 클래스를 HTML 파일에 적용하는 적절한 요소만 기억하면 테마가 적절합니다.

JavaScript

우선, 우리는 우리의 변수를 정의해야 한다.파일의 맨 위에서 이 동작을 실행해야 합니다. 따라서 이 테마 전환 함수 외부에서 이 변수를 사용하면 사용할 수 있습니다.

var body = document.querySelector('body');
var bodyClass = body.classList;
var themeToggle = document.querySelector('#theme-toggle');
var footer = document.querySelector('.footer');
var light = document.querySelector('.light');
var dark = document.querySelector('.dark');

페이지 꼬리 스타일을 설정하지 않으려면 삭제할 수 있지만, 페이지의 나머지 부분보다 더 어둡기 때문에 다음 함수에서 사용할 수 있도록 정의해야 합니다.

themeToggle.addEventListener('click', () => {
    body.classList.toggle("light");
    body.classList.toggle("dark");
    themeToggle.classList.toggle("btn-light");
    themeToggle.classList.toggle("btn-dark");
    footer.classList.toggle("footer-light");
    footer.classList.toggle("footer-dark");
});