fix(color-mode): fix pristine className

Author: gregberge

packages/core/src/colorModes.js

@@ -120,14 +120,17 @@ export function useColorModeState(theme, { target = document.body } = {}) {
 
   // Add mode className
   const customPropertiesEnabled = hasCustomPropertiesEnabled(theme)
+  const initialColorModeName = getInitialColorModeName(theme)
+  const pristine = mode === initialColorModeName && !storage.get()
   React.useLayoutEffect(() => {
     if (!customPropertiesEnabled) return undefined
+    if (pristine) return undefined
     const className = getColorModeClassName(mode)
     target.classList.add(className)
     return () => {
       target.classList.remove(className)
     }
-  }, [customPropertiesEnabled, target, mode])
+  }, [customPropertiesEnabled, target, mode, pristine])
 
   // Store mode preference
   const changedRef = React.useRef(false)

packages/core/src/colorModes.test.js

@@ -203,7 +203,7 @@ describe('#useColorModeState', () => {
       const setDarkModeBtn = getByTestId('setDarkMode')
       const setDefaultModeBtn = getByTestId('setDefaultMode')
       expect(getByTestId('mode')).toHaveTextContent('default')
-      expect(document.body).toHaveClass('xstyled-color-mode-default')
+      expect(document.body).not.toHaveClass('xstyled-color-mode-default')
       expect(document.body).not.toHaveClass('xstyled-color-mode-dark')
       fireEvent.click(setDarkModeBtn)
       expect(document.body).not.toHaveClass('xstyled-color-mode-default')
@@ -222,7 +222,7 @@ describe('#useColorModeState', () => {
       const setDarkModeBtn = getByTestId('setDarkMode')
       const setDefaultModeBtn = getByTestId('setDefaultMode')
       expect(getByTestId('mode')).toHaveTextContent('default')
-      expect(main).toHaveClass('xstyled-color-mode-default')
+      expect(main).not.toHaveClass('xstyled-color-mode-default')
       expect(main).not.toHaveClass('xstyled-color-mode-dark')
       fireEvent.click(setDarkModeBtn)
       expect(main).not.toHaveClass('xstyled-color-mode-default')