Skip to content

Instantly share code, notes, and snippets.

@Gioni06
Last active November 30, 2022 00:11
Show Gist options
  • Save Gioni06/eb5b28343bcf5793a70f6703004cf333 to your computer and use it in GitHub Desktop.
Save Gioni06/eb5b28343bcf5793a70f6703004cf333 to your computer and use it in GitHub Desktop.
Enable Dark mode with css variables and js
function activateDarkMode() {
const rootElement = document.querySelector(':root')
const darkTheme = {
'--background-color': '#1e1e1e',
'--primary-color': '#157efb',
'--font-color': '#dedede',
'--subtle-primary-color': '#151513',
'--block-background-color': '#323232',
'--menu-item-color': '#dedede',
'--menu-item-hover-color': '#157efb',
'--menu-item-alert-bg': '#151513',
'--menu-item-alert-shadow': '#151513',
'--alert-border-color': '#000',
'--tertiary-color:': '#727680'
}
for(k in darkTheme) {
rootElement.style.setProperty(k, darkTheme[k])
}
}
function activateLightMode() {
const rootElement = document.querySelector(':root')
const lightTheme = {
'--background-color': '#fff',
'--page-width': '70em',
'--primary-color': '#151513',
'--font-color': '#151513',
'--subtle-primary-color': '#151513',
'--block-background-color': '#f1f3f4',
'--menu-item-color': '#000',
'--menu-item-hover-color': '#000',
'--menu-item-alert-bg': '#ffffff',
'--menu-item-alert-shadow': '#dfe1e7',
'--alert-border-color': '#dfe1e7',
'--tertiary-color:': '#727680'
}
for(k in lightTheme) {
rootElement.style.setProperty(k, lightTheme[k])
}
}
/**
* Sets a color scheme for the website.
* If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode
* otherwise it will set a dark theme during night time
*/
function setColorScheme() {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified;
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode())
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode())
if(isDarkMode) activateDarkMode()
if(isLightMode) activateLightMode()
if(isNotSpecified || hasNoSupport) {
console.log('You specified no preference for a color scheme or your browser does not support it. I schedule dark mode during night time.')
now = new Date();
hour = now.getHours();
if (hour < 4 || hour >= 16) {
activateDarkMode();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment