add next theme with tailwind

.stylelintrc.json

@@ -6,7 +6,7 @@
 	"rules": {
 		"selector-class-pattern": "^([a-z][a-zA-Z0-9]*)$",
 		"keyframes-name-pattern": "^([a-z][a-zA-Z0-9]*)$",
-		"color-function-notation": null,
+		"color-function-notation": "legacy",
 		"scss/at-rule-no-unknown": [
 			true,
 			{

package.json

@@ -23,6 +23,7 @@
 	"dependencies": {
 		"next": "14.1.0",
 		"next-intl": "^3.8.0",
+		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

src/app/providers/ClientProviders.tsx

@@ -1,8 +1,13 @@
 'use client';
 
+import { Theme } from '@/shared/types';
+import { ThemeProvider } from 'next-themes';
 import { ReactNode } from 'react';
 
 export function ClientProviders({ children }: { children: ReactNode }) {
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	return <>{children}</>;
+	return (
+		<ThemeProvider attribute='class' defaultTheme={Theme.DARK}>
+			{children}
+		</ThemeProvider>
+	);
 }

src/app/providers/ServerProviders.tsx

@@ -1,15 +1,12 @@
-import { ThemeProvider } from '@/app/providers/ThemeProvider';
 import { NextIntlClientProvider, useMessages } from 'next-intl';
 import { ReactNode } from 'react';
 
 export function ServerProviders({ children }: { children: ReactNode }) {
 	const messages = useMessages();
 
 	return (
-		<ThemeProvider>
-			<NextIntlClientProvider messages={messages}>
-				{children}
-			</NextIntlClientProvider>
-		</ThemeProvider>
+		<NextIntlClientProvider messages={messages}>
+			{children}
+		</NextIntlClientProvider>
 	);
 }

src/app/styles/themes/light.scss

@@ -1,24 +1,13 @@
-.app_light_theme {
+[class="light"] {
 	--color-background: #fafafa;
-	--bg-dots: #cacaca;
-
-	--main-color: #FFFFFF;
+	--color-background-dots: #cacaca;
+	--color-main: #FFF;
 	--color-main-rgb: 255, 255, 255;
-
 	--color-main-inverted: #03020D;
 	--color-main-inverted-rgb: 3, 2, 13;
-
-	--primary-color: #30004e;
-	--inverted-primary-color: #B336FF;
-
-	--secondary-color: #001e6b;
-	--inverted-secondary-color: #346DFF;
-
-	--color-border: rgba(0, 0, 0, .1);
-	--color-border-select: rgba(0, 0, 0, .2);
-	--color-border-active: rgba(0, 0, 0, .2);
-
-	// text
+	--color-border: rgba(0, 0, 0, 10%);
+	--color-border-select: rgba(0, 0, 0, 20%);
+	--color-border-active: rgba(0, 0, 0, 20%);
 	--color-text: 0, 0, 0;
 
 	// Light ellipse

src/app/styles/themes/normal.scss

@@ -13,17 +13,17 @@
 	--color-success: #17c964;
 	--color-warning: #f5a524;
 	--color-danger: #f31260;
-	--color-border: rgb(255 255 255 / 10%);
-	--color-border-select: rgb(255 255 255 / 15%);
-	--color-border-active: rgb(255 255 255 / 20%);
+	--color-border: rgba(255, 255, 255, 10%);
+	--color-border-select: rgb(255, 255, 255, 15%);
+	--color-border-active: rgb(255, 255, 255, 20%);
 	--color-text: 255, 255, 255;
 
 	// Light ellipse
-	--light-color-ellipse-1: rgb(90 186 255 / 30%);
+	--light-color-ellipse-1: rgb(90, 186, 255, 30%);
 	--light-blur-ellipse-1: blur(400px);
-	--light-color-ellipse-2: rgb(255 90 209 / 30%);
+	--light-color-ellipse-2: rgb(255, 90, 209, 30%);
 	--light-blur-ellipse-2: blur(600px);
-	--light-color-ellipse-3: rgb(255 90 209 / 30%);
+	--light-color-ellipse-3: rgb(255, 90, 209, 30%);
 	--light-blur-ellipse-3: blur(400px);
 
 	// @media (max-width: $display-desktop) {

src/features/ThemeSwitcher/ThemeSwitcher.tsx

@@ -1,20 +1,26 @@
 'use client';
 
-import { Theme, useTheme } from '@/app/providers/ThemeProvider';
-import DarkIcon from 'public/images/icons/theme-dark.svg';
-import LightIcon from 'public/images/icons/theme-light.svg';
+import { Theme } from '@/shared/types';
+import { Button } from '@/shared/ui/Button';
+import { useTheme } from 'next-themes';
+import Moon from 'public/images/icons/moon.svg';
 import { memo } from 'react';
 
 interface ThemeSwitcherProps {
 	className?: string;
 }
 
 export const ThemeSwitcher = memo(({ className }: ThemeSwitcherProps) => {
-	const { theme, toggleTheme } = useTheme();
+	const { theme, setTheme } = useTheme();
+
+	const toggleTheme = () => {
+		const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+		setTheme(newTheme);
+	};
 
 	return (
-		<button type='button' onClick={toggleTheme} className={className}>
-			{theme === Theme.DARK ? <DarkIcon /> : <LightIcon />}
-		</button>
+		<Button slice onClick={toggleTheme} className={className}>
+			<Moon />
+		</Button>
 	);
 });

src/pages/TopPage/TopPage.tsx

@@ -46,7 +46,6 @@ export const TopPage: FC<TopPageProps> = memo(
 								<div className={`${cls.dots} noselect`} />
 								<Button
 									starlight
-									// padding='lg'
 									className='py-5 px-12 rounded-xl'
 									variant='layer'
 									startContent={

src/shared/types.ts

@@ -1,3 +1,8 @@
 export type Size = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
 export type clsxMods = Record<string, boolean | string | undefined>;
+
+export enum Theme {
+	LIGHT = 'light',
+	DARK = 'dark',
+}

src/shared/ui/Blackhole/Blackhole.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import cn from 'clsx';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import cls from './Blackhole.module.scss';
 
 interface BlackholeProps {
@@ -8,6 +10,16 @@ interface BlackholeProps {
 }
 
 export const Blackhole: FC<BlackholeProps> = ({ className = '', flip }) => {
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) {
+		return null;
+	}
+
 	return (
 		<div
 			className={cn(cls.blackhole, { [cls.flip]: flip }, className, 'noselect')}

src/shared/ui/SpaceCanvas/SpaceCanvas.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { Theme, useTheme } from '@/app/providers/ThemeProvider';
+import { Theme } from '@/shared/types';
 import { PointMaterial, Points } from '@react-three/drei';
 import { Canvas, useFrame } from '@react-three/fiber';
 import cn from 'clsx';
 import { Suspense, useEffect, useRef, useState } from 'react';
 // @ts-ignore
 import * as random from 'maath/random/dist/maath-random.esm';
+import { useTheme } from 'next-themes';
 import cls from './SpaceCanvas.module.scss';
 
 const StarBackground = (props: any) => {

src/widgets/Navbar/Navbar.tsx

@@ -1,17 +1,15 @@
 'use client';
 
-import { useTheme } from '@/app/providers/ThemeProvider';
 import { LangSwitcher } from '@/features/LangSwitcher';
+import { ThemeSwitcher } from '@/features/ThemeSwitcher';
 import { Link, usePathname } from '@/shared/config/i18n/navigation';
 import { Avatar } from '@/shared/ui/Avatar';
-import { Button } from '@/shared/ui/Button';
 import { Input } from '@/shared/ui/Input';
 import { Logo } from '@/shared/ui/Logo';
 import { Loader } from '@/widgets/Loader';
 import cn from 'clsx';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
-import Moon from 'public/images/icons/moon.svg';
 import { memo } from 'react';
 import cls from './Navbar.module.scss';
 
@@ -36,7 +34,6 @@ export const Navbar = memo(({ className = '', blackhole }: NavbarProps) => {
 
 	const t = useTranslations();
 	const pathname = usePathname();
-	const { theme, toggleTheme } = useTheme();
 
 	const isActive = (href: string) => {
 		return pathname === href ? cls.selected : '';
@@ -92,10 +89,7 @@ export const Navbar = memo(({ className = '', blackhole }: NavbarProps) => {
 					<nav className={cls.right}>
 						<nav className={cls.controlButtons}>
 							<LangSwitcher />
-							<Button slice onClick={toggleTheme}>
-								<Moon />
-							</Button>
-							{/* <ThemeSwitcher /> */}
+							<ThemeSwitcher />
 						</nav>
 						<Avatar
 							border

tailwind.config.js

@@ -5,4 +5,5 @@ module.exports = {
 		extend: {},
 	},
 	plugins: [],
+	darkMode: 'class',
 };