Try to apply mode styles to root html element before body (#162)

* Try to apply mode to root html element before body

* Make safe access ever more safe

* Update index.ts

Co-authored-by: Jake Moxey <jakemoxey@gmail.com>

packages/bumbag/src/ColorMode/ColorModeContext.tsx

@@ -3,9 +3,9 @@ import ConditionalWrap from 'conditional-wrap';
 
 import { useLocalStorage } from '../utils/useLocalStorage';
 import { useTheme } from '../utils/useTheme';
-import { addColorModeBodyClassName, getDefaultColorMode } from './utils';
+import { addColorModeRootElementClassName, getDefaultColorMode } from './utils';
 
-export const ColorModeContext = React.createContext<any>({ setColorMode: () => {}, colorMode: 'default' });
+export const ColorModeContext = React.createContext<any>({ setColorMode: () => { }, colorMode: 'default' });
 
 type Props = {
   children: React.ReactNode;
@@ -34,15 +34,15 @@ export function ColorModeProvider(props: Props) {
   ////////////////////////////////////
 
   React.useEffect(() => {
-    addColorModeBodyClassName(defaultMode);
+    addColorModeRootElementClassName(defaultMode);
     localStorage.set('mode', defaultMode);
   }, [defaultMode]); // eslint-disable-line
 
   ////////////////////////////////////
 
   const setColorMode = React.useCallback(
     (colorMode) => {
-      addColorModeBodyClassName(colorMode, mode);
+      addColorModeRootElementClassName(colorMode, mode);
       localStorage.set('mode', colorMode);
       setMode(colorMode);
     },

packages/bumbag/src/ColorMode/InitializeColorMode.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 const noflash = `(function() { try {
   var mode = localStorage.getItem('bb.mode');
   if (!mode) return
-  document.body.classList.add('bb-mode-' + mode);
+  document.getElementsByTagName('html')[0].classList.add('bb-mode-' + mode);
 } catch (e) {} })();`;
 
 export function InitializeColorMode() {

packages/bumbag/src/ColorMode/utils.ts

@@ -1,6 +1,6 @@
 import { omit } from '../utils/omit';
 
-const bodyClassPrefix = 'bb-mode';
+const rootElementClassPrefix = 'bb-mode';
 const cssVariablePrefix = '--bb';
 const palettePrefix = `${cssVariablePrefix}-palette`;
 
@@ -23,7 +23,7 @@ export function getColorModesCSSVariables(theme) {
   cssVariables = Object.entries(theme.palette.modes || {}).reduce((cssVariables, [modeKey, value]) => {
     return {
       ...cssVariables,
-      [`&.${bodyClassPrefix}-${modeKey}`]: mapCSSVariables(value),
+      [`&.${rootElementClassPrefix}-${modeKey}`]: mapCSSVariables(value),
     };
   }, cssVariables);
   return {
@@ -37,12 +37,13 @@ export function getColorFromCSSVariable(selector, fallback) {
   return `var(${palettePrefix}-${selector}, ${fallback})`;
 }
 
-export function addColorModeBodyClassName(nextMode: string, prevMode?: string) {
-  if (typeof window !== 'undefined' && window.document && window.document.body) {
+export function addColorModeRootElementClassName(nextMode: string, prevMode?: string) {
+  const rootElement = window?.document?.getElementsByTagName?.('html')?.[0] ?? window?.document?.body;
+  if (rootElement) {
     if (prevMode) {
-      document.body.classList.remove(`${bodyClassPrefix}-${prevMode}`);
+      rootElement.classList.remove(`${rootElementClassPrefix}-${prevMode}`);
     }
-    document.body.classList.add(`${bodyClassPrefix}-${nextMode}`);
+    rootElement.classList.add(`${rootElementClassPrefix}-${nextMode}`);
   }
 }
 

packages/bumbag/src/theme/index.ts

@@ -23,7 +23,7 @@ import Toast from './Toast';
 export default (overrides: ThemeConfig = {}) => ({
   name: 'default',
   useCSSVariables: true,
-  cssVariablesSelector: 'html,body',
+  cssVariablesSelector: 'html',
   ...overrides,
   altitudes: altitudes(overrides.altitudes || {}),
   borders: borders(overrides.borders || {}),