DEV Community: German P

Dark theme only CSS, Media Query and also with Javascript

German P — Tue, 28 Jun 2022 00:29:39 +0000

Code:Github repo
codepen: Con js y css
codepen: solo css

Installation

It can be run from any virtual server you have, this point is not 100% necessary.

First clone the repository and install.

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

yarn add

Run

yarn dev

Option 1 - only css

Generate variables that are assigned to the background and colors.

Documentation CSS Variables

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

Generate media query.

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

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

Conclusion: This simple step takes the browser theme and applies it to the page.

Option 2 With Javascript and media query

We detect what configuration the system has.

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

Schema color change event

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

Option 3 With Javascript manually by button.

It can be done by adding a class to the body .dark , .light we save it in the localStorage too.

// 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');
}

Button event

// 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.

With Javascript but without media query

The .lightmode class is removed and the @media (prefers-color-scheme: dark) is removed, everything is done with Javascript and stored in the LocalStorage.
From css we only have the variables in the root and in the .darkmode class, the .darkmode class is assigned to the body and is removed when it is in light mode, the base root variables being applied.

/* 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;
}

When the page loads we check which theme is on the system and which theme is on the local host. Leave the one found on Localhost.

// 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();

Here, finally, the auxiliary functions and the control of the button to change the theme, between dark and 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();

})

// 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

Dark theme solo CSS, MediaQuery y también con Javascript

German P — Sat, 25 Jun 2022 15:40:26 +0000

Code:Github repo
codepen: Con js y css
codepen: solo css

Instalación

Se puede ejecutar desde cualquier server virtual que tengas, no es necesario al 100%

Primero clonar el repositorio e instalar.

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

yarn add

Ejecutar

yarn dev

Opción 1 - Solo css

Generar variables que se asignaran a los background y colors.

Documentación Variables

/* solo ejemplo de variables */
body {
  /* crear variable  */
  --main-back-color: red;
  /* asignar variable  */
  background-color: var(--main-back-color); 
}

Generar media query.

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

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

Conclusión: con este simple paso toma el theme del navegador y lo aplica en la página.

Opción 2 Con Javascript y media query

Detectamos que configuración tiene el sistema.

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

Evento de cambio schema

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

Opción 3 Con Javascript manualmente por botón.

Se puede hacer agregando una clase al body .dark , .light lo guardamos en el localStorage también.

// cambio de dark mode a ligh 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');
}

Evento botón

// 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();

})

Nota hay una mejor solución para no duplicar tanto las variables de css y las clases. Que es controlando desde JS. Lo vemos en el proximo branch.

Con Javascript pero sin media query

Se elimina la clase .lightmode y se saca el @media (prefers-color-scheme: dark) se realiza todo con Javascript y se almacena en el LocalStorage.
De css solo nos queda las variables en el root y en la clase .darkmode, la clase .darkmode se asigna al body y se remueve cuando está en modo light quedando aplicadas las variables del root base.

/* variables globales */
: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;
}

Cuando carga la página verificamos que thema esta en el sistema y que theme en el local host. Deja el que se encuentre en el Localhost.

// Detectar el color del sistema
const detectColorScheme = () => {
  const localTheme = localStorage.getItem('theme');
  // Verificar que theme tiene el sistema/navegador 
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
    (localTheme === 'dark' || localTheme === null) ? enableDarkMode() : disableDarkMode();
  } else {
    (localTheme === 'dark') ? enableDarkMode() : disableDarkMode();
  }
}

// Verifica si hay cambios en el thema y lo cambia
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  event.matches ? enableDarkMode() : disableDarkMode();
});

// Detectar el color del sistema
detectColorScheme();

Aquí por último las funciones auxiliares y el control del botón para cambiar de theme, entre dark y 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();

})

// cambio de dark mode a 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');
}

Nota final: Uds podrían agregar mas temas de colores o dejar que el cliente selecciones los colores y los guarde en el localstorage o en la base de datos.

Cada punto esta un branch distinto.