d0zingcat/nextjs-notion-starter-kit
1
0
Fork 0
mirror of https://github.com/d0zingcat/nextjs-notion-starter-kit.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: inline noflash.js for dark mode

Browse Source
This commit is contained in:
Travis Fischer
2022-03-27 08:04:13 -04:00
parent ee8b547dae
commit a7731d152b
2 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/_document.tsx
View File

@@ -38,7 +38,50 @@ export default class MyDocument extends Document {
</Head>
<body>
<script src='noflash.js' />
<script
dangerouslySetInnerHTML={{
__html: `
/** Inlined version of noflash.js from use-dark-mode */
;(function () {
var storageKey = 'darkMode'
var classNameDark = 'dark-mode'
var classNameLight = 'light-mode'
function setClassOnDocumentBody(darkMode) {
document.body.classList.add(darkMode ? classNameDark : classNameLight)
document.body.classList.remove(darkMode ? classNameLight : classNameDark)
}
var preferDarkQuery = '(prefers-color-scheme: dark)'
var mql = window.matchMedia(preferDarkQuery)
var supportsColorSchemeQuery = mql.media === preferDarkQuery
var localStorageTheme = null
try {
localStorageTheme = localStorage.getItem(storageKey)
} catch (err) {}
var localStorageExists = localStorageTheme !== null
if (localStorageExists) {
localStorageTheme = JSON.parse(localStorageTheme)
}
// Determine the source of truth
if (localStorageExists) {
// source of truth from localStorage
setClassOnDocumentBody(localStorageTheme)
} else if (supportsColorSchemeQuery) {
// source of truth from system
setClassOnDocumentBody(mql.matches)
localStorage.setItem(storageKey, mql.matches)
} else {
// source of truth from document.body
var isDarkMode = document.body.classList.contains(classNameDark)
localStorage.setItem(storageKey, JSON.stringify(isDarkMode))
}
})();
`
}}
/>
<Main />

42
public/noflash.js
View File

@@ -1,42 +0,0 @@
/* eslint-disable */
// 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.
;(function () {
// Change these if you use something different in your hook.
var storageKey = 'darkMode'
var classNameDark = 'dark-mode'
var classNameLight = 'light-mode'
function setClassOnDocumentBody(darkMode) {
document.body.classList.add(darkMode ? classNameDark : classNameLight)
document.body.classList.remove(darkMode ? classNameLight : classNameDark)
}
var preferDarkQuery = '(prefers-color-scheme: dark)'
var mql = window.matchMedia(preferDarkQuery)
var supportsColorSchemeQuery = mql.media === preferDarkQuery
var localStorageTheme = null
try {
localStorageTheme = localStorage.getItem(storageKey)
} catch (err) {}
var localStorageExists = localStorageTheme !== null
if (localStorageExists) {
localStorageTheme = JSON.parse(localStorageTheme)
}
// Determine the source of truth
if (localStorageExists) {
// source of truth from localStorage
setClassOnDocumentBody(localStorageTheme)
} else if (supportsColorSchemeQuery) {
// source of truth from system
setClassOnDocumentBody(mql.matches)
localStorage.setItem(storageKey, mql.matches)
} else {
// source of truth from document.body
var isDarkMode = document.body.classList.contains(classNameDark)
localStorage.setItem(storageKey, JSON.stringify(isDarkMode))
}
})()