ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

don't load dark mode as a module

Browse Source
This commit is contained in:
keyan 2021-11-16 14:55:40 -06:00
parent d0687e626b
commit c89fb2716a
3 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/footer.js
View File

@ -10,9 +10,54 @@ import Link from 'next/link'
import useDarkMode from 'use-dark-mode' import useDarkMode from 'use-dark-mode'
import Sun from '../svgs/sun-fill.svg' import Sun from '../svgs/sun-fill.svg'
import Moon from '../svgs/moon-fill.svg' import Moon from '../svgs/moon-fill.svg'
import { handleThemeChange } from '../public/darkmode'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
// if you update this you need to update /public/darkmode
// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
const COLORS = {
light: {
body: '#f5f5f5',
color: '#212529',
navbarVariant: 'light',
navLink: 'rgba(0, 0, 0, 0.5)',
navLinkFocus: 'rgba(0, 0, 0, 0.7)',
navLinkActive: 'rgba(0, 0, 0, 0.9)',
borderColor: '#ced4da',
inputBg: '#ffffff',
inputDisabledBg: '#e9ecef',
dropdownItemColor: 'rgba(0, 0, 0, 0.7)',
dropdownItemColorHover: 'rgba(0, 0, 0, 0.9)',
commentBg: 'rgba(0, 0, 0, 0.03)',
clickToContextColor: 'rgba(0, 0, 0, 0.05)',
brandColor: 'rgba(0, 0, 0, 0.9)'
},
dark: {
body: '#000000',
inputBg: '#000000',
inputDisabledBg: '#000000',
navLink: 'rgba(255, 255, 255, 0.5)',
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)',
clickToContextColor: 'rgba(255, 255, 255, 0.08)',
color: '#f8f9fa',
brandColor: 'var(--primary)'
}
}
const handleThemeChange = (dark) => {
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)
})
}
const ChatPopover = ( const ChatPopover = (
<Popover> <Popover>
<Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}> <Popover.Content style={{ fontWeight: 500, opacity: 0.5, fontSize: '.9rem' }}>

2
pages/_document.js
View File

@ -8,7 +8,7 @@ class MyDocument extends Document {
<link rel='preload' href='/Lightningvolt-xoqm.ttf' as='font' type='font/ttf' crossOrigin='' /> <link rel='preload' href='/Lightningvolt-xoqm.ttf' as='font' type='font/ttf' crossOrigin='' />
</Head> </Head>
<body> <body>
<script src='/darkmode.js' type='module' /> <script src='/darkmode.js' />
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

2
public/darkmode.js
View File

@ -34,7 +34,7 @@ const COLORS = {
} }
} }
export const handleThemeChange = (dark) => { const handleThemeChange = (dark) => {
const root = window.document.documentElement const root = window.document.documentElement
const colors = COLORS[dark ? 'dark' : 'light'] const colors = COLORS[dark ? 'dark' : 'light']
Object.entries(colors).forEach(([varName, value]) => { Object.entries(colors).forEach(([varName, value]) => {