{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":88,"style":"BOLD"}],"text":"Привет! Сегодня покажу, как за несколько минут с помощью готовой библиотеки реализовать переключение между темной и светлой темой на сайте. Выбранная тема сохраняется в localStorage браузера и отлично работает на всех устройствах.","type":"unstyled","key":"6q1a7"},{"data":{"image":{"id":"685571e366f64522f6d6373e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Превью | Канал dzen.ru/in9var","type":"atomic:image","key":"3ju0a"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":9,"offset":48}],"inlineStyleRanges":[],"text":"Код данной статьи доступен в репозитории GitHub по ссылке.","type":"unstyled","key":"ddqar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливаем пакет next-themes","type":"header-two","key":"ea8be"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вводим команду в консоль:","type":"unstyled","key":"6o4ib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm i next-themes","type":"blockquote","key":"ebtvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный пакет сильно упрощает реализацию переключения тем: он берет на себя все заботы о хранении выбранной темы и решает такие проблемы, как «вспышки» при обновлении страницы с выбранной темной темой.","type":"unstyled","key":"5urq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы решите реализовывать переключение тем самостоятельно, вы поймете, о чем я.","type":"unstyled","key":"bkik4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем провайдер темы","type":"header-two","key":"ees2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":8,"style":"BOLD"},{"length":18,"offset":31,"style":"BOLD"}],"text":"В папке app/theme создаем файл theme-provider.tsx со следующим содержимым:","type":"unstyled","key":"336c6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"'use client';","type":"blockquote","key":"8cn3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { ThemeProvider as NextThemesProvider } from 'next-themes';","type":"blockquote","key":"97ac5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export function ThemeProvider({ children, ...props }) {","type":"blockquote","key":"34nm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return {children};","type":"blockquote","key":"cnjgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ugmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1jajn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот кусок кода взят из официальной документации.","type":"unstyled","key":"dqkpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем переключатель темы","type":"header-two","key":"1q70s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":8,"style":"BOLD"},{"length":17,"offset":37,"style":"BOLD"}],"text":"В папке app/components создадим файл ThemeSwitcher.jsx со следующим содержимым:","type":"unstyled","key":"6o3ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"'use client';","type":"blockquote","key":"f6nk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useEffect, useState } from 'react';","type":"blockquote","key":"8k723"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useTheme } from 'next-themes';","type":"blockquote","key":"aujih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { FaSun, FaMoon } from 'react-icons/fa';","type":"blockquote","key":"aqar6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const ThemeSwitcher = () => {","type":"blockquote","key":"baiba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [mounted, setMounted] = useState(false);","type":"blockquote","key":"1k1es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const { theme, setTheme } = useTheme();","type":"blockquote","key":"b1ltl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const handleClick = () => {","type":"blockquote","key":"3mrr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (theme === 'light') setTheme('dark');","type":"blockquote","key":"a5kc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"else setTheme('light');","type":"blockquote","key":"bs016"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"4ca53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {","type":"blockquote","key":"2rrn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setMounted(true);","type":"blockquote","key":"1233q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}, [theme]);","type":"blockquote","key":"8aj6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if (!mounted) return null;","type":"blockquote","key":"3l320"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"1lp64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"dmufj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{theme === 'light' ? (","type":"blockquote","key":"digff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"48j92"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":") : (","type":"blockquote","key":"4sh6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2lsik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":")}","type":"blockquote","key":"clpv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bt191"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"blockquote","key":"7do7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"dqe6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default ThemeSwitcher;","type":"blockquote","key":"bppak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e6mpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":34,"style":"BOLD"},{"length":10,"offset":60,"style":"BOLD"},{"length":6,"offset":165,"style":"BOLD"}],"text":"Используя встроенный в библиотеку next-themes кастомный хук useTheme(), мы сможем управлять переключением темы, а также контролировать текущую тему. Создадим кнопку button, которая меняет иконку в зависимости от выбранной темы, а при нажатии переключает тему на противоположную.","type":"unstyled","key":"c2un8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаем провайдер в layout.jsx","type":"header-two","key":"btjrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы переключение темы работало на всех страницах нашего проекта, необходимо «обернуть» все дочерние элементы сайта в наш созданный компонент провайдера.","type":"unstyled","key":"848lq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":4,"style":"BOLD"}],"text":"Код layout.jsx:","type":"unstyled","key":"5dfng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { Geist, Geist_Mono } from 'next/font/google';","type":"blockquote","key":"7b1pu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import './globals.css';","type":"blockquote","key":"7hn30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { ThemeProvider } from './theme/theme-provider';","type":"blockquote","key":"79shq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import ThemeSwitcher from './components/ThemeSwitcher';","type":"blockquote","key":"dvr3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const geistSans = Geist({","type":"blockquote","key":"cfs41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"variable: '--font-geist-sans',","type":"blockquote","key":"b7pvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"subsets: ['latin'],","type":"blockquote","key":"57eb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"1dvvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const geistMono = Geist_Mono({","type":"blockquote","key":"d8mb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"variable: '--font-geist-mono',","type":"blockquote","key":"bii61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"subsets: ['latin'],","type":"blockquote","key":"bt1q5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"66fd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const metadata = {","type":"blockquote","key":"agmse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"title: 'Create Next App',","type":"blockquote","key":"ccadh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"description: 'Generated by create next app',","type":"blockquote","key":"frs57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"9oe2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default function RootLayout({ children }) {","type":"blockquote","key":"fmu70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"el8kr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5t8na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"578hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"b4fc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2fn19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"352tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"454ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{children}","type":"blockquote","key":"fectk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"46c1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8clqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5992v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"blockquote","key":"dbide"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"2k7pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"30vvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как это работает?","type":"header-two","key":"8da5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":76,"style":"BOLD"}],"text":"После всех проделанных манипуляций при нажатии на кнопку переключения тем в тег html нашего сайта будут добавлены атрибут и стиль, соответствующие темной либо светлой теме.","type":"unstyled","key":"3g47b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"417oj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":73,"style":"BOLD"}],"text":"В нашем случае мы задаем цвета темы через переменные, и за счет атрибута [data-mode] сайт перекрашивается в соответствующие выбранной теме цвета.","type":"unstyled","key":"274r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":root {","type":"blockquote","key":"a7ljf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-primary: 270 80% 20%;","type":"blockquote","key":"99mh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-secondary: 47 80% 50%;","type":"blockquote","key":"f0ms5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-on-primary: 260 9% 13%;","type":"blockquote","key":"dpg7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-on-secondary: 260 9% 13%;","type":"blockquote","key":"8mrra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"evvel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[data-mode='light'] {","type":"blockquote","key":"28rul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-background: 0 0% 100%;","type":"blockquote","key":"17ms0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-on-background: 0 0% 0%;","type":"blockquote","key":"es50l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4nr0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[data-mode='dark'] {","type":"blockquote","key":"4garl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-background: 0 0% 0%;","type":"blockquote","key":"1cep5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--color-on-background: 0 0% 100%;","type":"blockquote","key":"6p331"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"atn90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fhma9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге получаем рабочую кнопку переключения тем:","type":"unstyled","key":"67a6p"},{"data":{"image":{"id":"685577be4ad6d45c944956e9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9qkkg"},{"data":{"image":{"id":"685577bef927ca6deadbaa7b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"790kq"},{"data":{"image":{"id":"6856b90b274b0929215c7fdc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cnpl0"},{"data":{"image":{"id":"6856b90b315bca4bf7e87eb0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bfmcb"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":9,"offset":52}],"inlineStyleRanges":[],"text":"Данная статья и весь код в удобном формате доступны по ссылке.","type":"unstyled","key":"53l4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом всё, если появятся вопросы, пишите их в комменты, постараюсь на них ответить.","type":"unstyled","key":"46nsg"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":14,"offset":59},{"key":3,"length":9,"offset":119}],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.","type":"unstyled","key":"5a48b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"SJZzEHjxKhvMjkIC1Ddj"}],"entityMap":{"0":{"data":{"url":"https://github.com/in9vr/nextjs-theme-switch-example"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://blog.in9var.ru/blog/dobavlyaem-temnuyu-temu-na-sayt-next-js-primer-prostoy-realizacii"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://dzen.ru/away?to=https%3A%2F%2Fblog.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://dzen.ru/away?to=https%3A%2F%2Fin9var.ru"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}