2021-11-09 22:43:56 +00:00
|
|
|
// Insert this script in your index.html right after the <body> tag.
|
|
|
|
|
// This will help to prevent a flash if dark mode is the default.
|
2021-11-11 22:14:42 +00:00
|
|
|
const COLORS = {
|
2021-11-09 22:43:56 +00:00
|
|
|
light: {
|
2023-01-10 23:13:37 +00:00
|
|
|
body: '#f5f5f7',
|
2021-11-09 22:43:56 +00:00
|
|
|
color: '#212529',
|
|
|
|
|
navbarVariant: 'light',
|
2022-02-09 19:15:38 +00:00
|
|
|
navLink: 'rgba(0, 0, 0, 0.55)',
|
2021-11-09 22:43:56 +00:00
|
|
|
navLinkFocus: 'rgba(0, 0, 0, 0.7)',
|
|
|
|
|
navLinkActive: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
borderColor: '#ced4da',
|
|
|
|
|
inputBg: '#ffffff',
|
2021-11-09 23:13:34 +00:00
|
|
|
inputDisabledBg: '#e9ecef',
|
2021-11-09 23:04:15 +00:00
|
|
|
dropdownItemColor: 'rgba(0, 0, 0, 0.7)',
|
2021-11-09 22:43:56 +00:00
|
|
|
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
commentBg: 'rgba(0, 0, 0, 0.03)',
|
2022-04-15 16:56:01 +00:00
|
|
|
clickToContextColor: 'rgba(0, 0, 0, 0.07)',
|
2022-02-09 19:15:38 +00:00
|
|
|
brandColor: 'rgba(0, 0, 0, 0.9)',
|
|
|
|
|
grey: '#707070',
|
|
|
|
|
link: '#007cbe',
|
2023-01-05 19:24:09 +00:00
|
|
|
toolbarActive: 'rgba(0, 0, 0, 0.10)',
|
|
|
|
|
toolbarHover: 'rgba(0, 0, 0, 0.20)',
|
|
|
|
|
toolbar: '#ffffff',
|
|
|
|
|
quoteBar: 'rgb(206, 208, 212)',
|
|
|
|
|
quoteColor: 'rgb(101, 103, 107)',
|
2022-02-09 19:15:38 +00:00
|
|
|
linkHover: '#004a72',
|
2022-08-31 20:22:25 +00:00
|
|
|
linkVisited: '#537587'
|
2021-11-09 22:43:56 +00:00
|
|
|
},
|
|
|
|
|
dark: {
|
|
|
|
|
body: '#000000',
|
|
|
|
|
inputBg: '#000000',
|
2021-11-09 23:13:34 +00:00
|
|
|
inputDisabledBg: '#000000',
|
2022-02-09 19:15:38 +00:00
|
|
|
navLink: 'rgba(255, 255, 255, 0.55)',
|
2021-11-09 22:43:56 +00:00
|
|
|
navLinkFocus: 'rgba(255, 255, 255, 0.75)',
|
|
|
|
|
navLinkActive: 'rgba(255, 255, 255, 0.9)',
|
|
|
|
|
borderColor: 'rgba(255, 255, 255, 0.5)',
|
|
|
|
|
dropdownItemColor: 'rgba(255, 255, 255, 0.7)',
|
|
|
|
|
dropdownItemColorHover: 'rgba(255, 255, 255, 0.9)',
|
|
|
|
|
commentBg: 'rgba(255, 255, 255, 0.04)',
|
2022-04-15 16:56:01 +00:00
|
|
|
clickToContextColor: 'rgba(255, 255, 255, 0.2)',
|
2021-11-09 22:43:56 +00:00
|
|
|
color: '#f8f9fa',
|
2022-02-09 19:15:38 +00:00
|
|
|
brandColor: 'var(--primary)',
|
|
|
|
|
grey: '#969696',
|
|
|
|
|
link: '#2e99d1',
|
2023-01-05 19:24:09 +00:00
|
|
|
toolbarActive: 'rgba(255, 255, 255, 0.10)',
|
|
|
|
|
toolbarHover: 'rgba(255, 255, 255, 0.20)',
|
|
|
|
|
toolbar: '#3e3f3f',
|
|
|
|
|
quoteBar: 'rgb(158, 159, 163)',
|
|
|
|
|
quoteColor: 'rgb(141, 144, 150)',
|
2022-02-09 19:15:38 +00:00
|
|
|
linkHover: '#007cbe',
|
2022-08-31 20:22:25 +00:00
|
|
|
linkVisited: '#56798E'
|
2021-11-09 22:43:56 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-16 20:55:40 +00:00
|
|
|
const handleThemeChange = (dark) => {
|
2021-11-09 22:43:56 +00:00
|
|
|
const root = window.document.documentElement
|
|
|
|
|
const colors = COLORS[dark ? 'dark' : 'light']
|
|
|
|
|
Object.entries(colors).forEach(([varName, value]) => {
|
|
|
|
|
const cssVarName = `--theme-${varName}`
|
|
|
|
|
root.style.setProperty(cssVarName, value)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
|
(function () {
|
2021-11-11 22:14:42 +00:00
|
|
|
// Change these if you use something different in your hook.
|
2021-11-09 22:43:56 +00:00
|
|
|
const storageKey = 'darkMode'
|
|
|
|
|
|
|
|
|
|
const preferDarkQuery = '(prefers-color-scheme: dark)'
|
|
|
|
|
const mql = window.matchMedia(preferDarkQuery)
|
|
|
|
|
const supportsColorSchemeQuery = mql.media === preferDarkQuery
|
|
|
|
|
let localStorageTheme = null
|
|
|
|
|
try {
|
|
|
|
|
localStorageTheme = localStorage.getItem(storageKey)
|
|
|
|
|
} catch (err) {}
|
|
|
|
|
const localStorageExists = localStorageTheme !== null
|
|
|
|
|
if (localStorageExists) {
|
|
|
|
|
localStorageTheme = JSON.parse(localStorageTheme)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Determine the source of truth
|
|
|
|
|
if (localStorageExists) {
|
|
|
|
|
// source of truth from localStorage
|
|
|
|
|
handleThemeChange(localStorageTheme)
|
|
|
|
|
} else if (supportsColorSchemeQuery) {
|
|
|
|
|
// source of truth from system
|
|
|
|
|
handleThemeChange(mql.matches)
|
|
|
|
|
localStorage.setItem(storageKey, mql.matches)
|
|
|
|
|
}
|
|
|
|
|
})()
|
|
|
|
|
}
|
