From c89fb2716ac0de08a81658a5e574fe4c189c8682 Mon Sep 17 00:00:00 2001 From: keyan Date: Tue, 16 Nov 2021 14:55:40 -0600 Subject: [PATCH] don't load dark mode as a module --- components/footer.js | 47 +++++++++++++++++++++++++++++++++++++++++++- pages/_document.js | 2 +- public/darkmode.js | 2 +- 3 files changed, 48 insertions(+), 3 deletions(-) diff --git a/components/footer.js b/components/footer.js index 9d350ecc..9233a60b 100644 --- a/components/footer.js +++ b/components/footer.js @@ -10,9 +10,54 @@ import Link from 'next/link' import useDarkMode from 'use-dark-mode' import Sun from '../svgs/sun-fill.svg' import Moon from '../svgs/moon-fill.svg' -import { handleThemeChange } from '../public/darkmode' 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 = ( diff --git a/pages/_document.js b/pages/_document.js index 8c57dee1..3400d049 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -8,7 +8,7 @@ class MyDocument extends Document { -