다크 테마 전용 CSS, 미디어 쿼리 및 Javascript 포함

설치

가지고 있는 모든 가상 서버에서 실행할 수 있지만 이 점이 100% 필요한 것은 아닙니다.

First clone the repository and install.

git clone https://github.com/205mdp/html-css-js-dark-light-theme.git

yarn add 

운영

yarn dev

옵션 1 - CSS만

/* just variable example */
body {
  /* create variable  */
  --main-back-color: red;
  /* assign variable  */
  background-color: var(--main-back-color); 
}

:root {
  --background: white;
  --color: black;
}

/* media query dark  */
@media (prefers-color-scheme: dark) {
  :root {
    --background: black;
    --color: white;
  }
}

옵션 2 Javascript 및 미디어 쿼리 사용

시스템에 어떤 구성이 있는지 감지합니다.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
    localStorage.setItem('theme', 'dark');
} else {
    localStorage.setItem('theme', 'light');
}

스키마 색상 변경 이벤트

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  event.matches ? enableDarkMode() : disableDarkMode();
});

옵션 3 버튼으로 수동으로 Javascript 사용.

// Change from dark mode to light mode. 
const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  // 2. Update darkMode in localStorage
  localStorage.setItem('theme', 'dark');
}
// change from light mode to dark mode.
const disableDarkMode = () => {
  // 1. Remove the class from the body
  document.body.classList.remove('darkmode');
  // 2. Update darkMode in localStorage 
  localStorage.setItem('theme', 'light');
}

버튼 이벤트

// btn btn-theme
const btnTheme = document.querySelector('#btn-theme');

btnTheme.addEventListener('click', () => {
  // 1. Check if dark mode is enabled
  localStorage.getItem('theme') === 'dark' ? disableDarkMode() : enableDarkMode();

})

Note: There is a better solution to not duplicate both css variables and classes. Which is controlling from JS. We see it in the next branch.

Javascript를 사용하지만 미디어 쿼리는 사용하지 않음

/* global variables */
:root {
  --header-color: #f5f5f5;
  --header-back-color: rgb(84, 121, 241);
  --main-back-color: #f5f5f5;
  --main-color: #333;
  --header-container-max-width: 70rem;
}

.darkmode {
  --header-color: #b2b2b2;
  --header-back-color: rgb(31, 31, 31);
  --main-back-color: #595959;
  --main-color: rgb(235, 235, 235);
  --header-container-max-width: 70rem;
}

// Detect system color
const detectColorScheme = () => {
  const localTheme = localStorage.getItem('theme');
  // Check which theme the system/browser has 
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
    (localTheme === 'dark' || localTheme === null) ? enableDarkMode() : disableDarkMode();
  } else {
    (localTheme === 'dark') ? enableDarkMode() : disableDarkMode();
  }
}

// Check for changes to the theme and change it
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  event.matches ? enableDarkMode() : disableDarkMode();
});

// Detect system color
detectColorScheme();

// btn btn-theme
const btnTheme = document.querySelector('#btn-theme');

btnTheme.addEventListener('click', () => {
  // 1. Check if dark mode is enabled
  localStorage.getItem('theme') === 'dark' ? disableDarkMode() : enableDarkMode();

})

// Change from dark mode to light mode. 
const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  // 2. Update darkMode in localStorage
  localStorage.setItem('theme', 'dark');
}
// cambio de light mode a dark mode.
const disableDarkMode = () => {
  // 1. Remove the class from the body
  document.body.classList.remove('darkmode');
  // 2. Update darkMode in localStorage 
  localStorage.setItem('theme', 'light');
}

Final note: you could add more color themes or let the client select the colors and save them to localstorage or the database.

Each point is a different branch on github