Merge branch 'main' of github.com:nextui-org/nextui into feat/new-lading-page

apps/docs/content/docs/theme/dark-mode.mdx

@@ -41,6 +41,7 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes';
 // 2. Call `createTheme` and pass your custom values
 const lightTheme = createTheme({
   type: 'light',
+  className: 'light', // customize the class that enables this theme, `light-theme` by default
   theme: {
     colors: {...},
   }
@@ -48,6 +49,7 @@ const lightTheme = createTheme({
 
 const darkTheme = createTheme({
   type: 'dark',
+  className: 'dark', // customize the class that enables this theme, `dark-theme` by default
   theme: {
     colors: {...},
   }

packages/react/README.md

@@ -43,11 +43,10 @@ npm i @nextui-org/react
 Go to the root of your application and do this:
 
 ```jsx
-import { CssBaseline, NextUIProvider } from '@nextui-org/react';
+import { NextUIProvider } from '@nextui-org/react';
 
 const Application = () => (
   <NextUIProvider>
-    <CssBaseline /> // ---> Normalize styles
     <AppComponent /> // ---> Your App Component
   </NextUIProvider>
 );

packages/react/src/theme/stitches.config.ts

@@ -60,12 +60,12 @@ export const sharedVisuallyHidden = css({
   position: 'absolute'
 });
 
-export const createTheme = ({ type, theme }: Theme) => {
+export const createTheme = ({ type, theme, className }: Theme) => {
   if (!type) {
     throw new Error('Theme type is required');
   }
   return createThemeBase(
-    `${type}-theme`,
+    className || `${type}-theme`,
     deepMerge(type === 'dark' ? darkTheme : lightTheme, theme)
   );
 };

packages/react/src/theme/types.ts

@@ -47,6 +47,7 @@ export interface TokenValue {
 
 export type Theme = {
   type?: ThemeType | string;
+  className?: string;
   theme?: BaseTheme;
 };