fix(dark theme): use tailwind default dark class to apply theme

deprecates `theme-dark` and introduces the Tailwind default way with `dark` class. If you didn't
touch the theming for Windmill in the past, you should see no difference (eg.: changing the class
applied to `body`)

src/Windmill.tsx

@@ -34,7 +34,7 @@ const Windmill: React.FC<Props> = ({
       if (setMode != null) {
         setMode('dark')
       }
-      document.documentElement.classList.add(`theme-dark`)
+      document.documentElement.classList.add(`dark`)
     }
   }, [dark])
 

src/__tests__/Windmill.test.tsx

@@ -43,8 +43,8 @@ describe('Windmill Context', () => {
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
-  it('should add theme-light class to html element is usePreferences is present', () => {
-    const expected = 'theme-light'
+  it('should add light class to html element if usePreferences is present', () => {
+    const expected = 'light'
     mount(
       <Windmill usePreferences>
         <Button />
@@ -66,7 +66,7 @@ describe('Windmill Context', () => {
   })
 
   it('should execute the toggleTheme method', () => {
-    const expected = 'theme-dark'
+    const expected = 'dark'
     const wrapper = mount(
       <Windmill usePreferences>
         <TestButton />
@@ -91,7 +91,7 @@ describe('Windmill Context', () => {
       }),
     })
 
-    const expected = 'theme-dark'
+    const expected = 'dark'
     mount(
       <Windmill usePreferences>
         <Button />
@@ -102,7 +102,7 @@ describe('Windmill Context', () => {
   })
 
   it('should add dark theme class to html element', () => {
-    const expected = 'theme-dark'
+    const expected = 'dark'
     mount(
       <Windmill dark>
         <Button />
@@ -113,7 +113,7 @@ describe('Windmill Context', () => {
   })
 
   it('should add dark theme class to html element when usePreferences is enabled', () => {
-    const expected = 'theme-dark'
+    const expected = 'dark'
     mount(
       <Windmill dark usePreferences>
         <Button />

src/utils/useDarkMode.ts

@@ -10,11 +10,11 @@ export const useDarkMode = (
   const toggleMode = () => {
     if (mode === 'light') {
       document.documentElement.className = ''
-      document.documentElement.classList.add('theme-dark')
+      document.documentElement.classList.add('dark')
       setMode('dark')
     } else {
       document.documentElement.className = ''
-      document.documentElement.classList.add('theme-light')
+      document.documentElement.classList.add('light')
       setMode('light')
     }
   }
@@ -32,7 +32,7 @@ export const useDarkMode = (
   useEffect(() => {
     if (mode) {
       window.localStorage.setItem('theme', mode)
-      document.documentElement.classList.add(`theme-${mode}`)
+      document.documentElement.classList.add(mode)
     }
   }, [mode])