主页 / 问题 / 1600032
Accepted
stackoverflow
Asked:2024-11-17 09:22:08 +0800 CST2024-11-17 09:22:08 +0800 CST

如何制作自定义主题？

  • 772

我写了 hook useTheme，我们将有标准主题：黑暗和光明。但我还想添加一个“创建主题”按钮，当您单击它时，将新主题添加到自定义主题；默认情况下，我们添加的所有主题都被禁用。如果我们已经包含了自定义主题，则不需要添加属性data-theme，而只需获取其中的所有内容details并将其传递给setProperty.键是我们的类型--background, --color，值是颜色。您能帮助实施吗？））

我假设我们需要添加每个主题active: false，当您单击分离的主题时，更改状态并检查主题的整个列表，以确定包含哪个主题并更改它。

使用主题.js

export const useTheme = () => {
    // Получить системную тему пользователя
    const getSystemTheme = () => window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

    const [theme, setTheme] = useState(localStorage.getItem('app-theme') || getSystemTheme());

    // Получить кастомные темы пользователя
    const getCustomThemes = () => JSON.parse(localStorage.getItem('custom-themes')) || [];

    // Добавить обьект темы в LocalStorage custom-themes
    // Example: addCustomTheme({name: 'Название тема', details: [background: 'orange']})
    const addCustomTheme = obj => {
        if (getCustomThemes().find(t => t.name === obj.name)) return false;

        localStorage.setItem(
            'custom-themes', 
            JSON.stringify(
                [
                    ...getCustomThemes(), 
                    { ...obj, active: false }
                ]
            )
        );
    }

    useLayoutEffect(() => {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    }, [theme]);

    return { currentTheme: theme, setTheme, addCustomTheme };
}
reactjs

1 个回答

  1. Best Answer

    您需要添加toggleCustomTheme功能：

    import { useState, useLayoutEffect } from 'react';

export const useTheme = () => {
    // Получить системную тему пользователя
    const getSystemTheme = () => 
        window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

    const [theme, setTheme] = useState(localStorage.getItem('app-theme') || getSystemTheme());
    const [customThemes, setCustomThemes] = useState(getCustomThemes());

    // Получить кастомные темы пользователя
    const getCustomThemes = () => JSON.parse(localStorage.getItem('custom-themes')) || [];

    // Добавить обьект темы в LocalStorage custom-themes
    const addCustomTheme = obj => {
        if (customThemes.find(t => t.name === obj.name)) return false;

        const newThemes = [
            ...customThemes,
            { ...obj, active: false }
        ];
        
        localStorage.setItem('custom-themes', JSON.stringify(newThemes));
        setCustomThemes(newThemes); // Обновить состояние на основе локального хранилища
    };

    // Включить кастомную тему
    const toggleCustomTheme = (name) => {
        const updatedThemes = customThemes.map(theme => 
            theme.name === name ? { ...theme, active: !theme.active } : theme
        );

        localStorage.setItem('custom-themes', JSON.stringify(updatedThemes));
        setCustomThemes(updatedThemes);
        
        // Установить CSS-переменные для активной темы
        const activeTheme = updatedThemes.find(t => t.active);
        if (activeTheme) {
            Object.entries(activeTheme.details).forEach(([key, value]) => {
                document.documentElement.style.setProperty(key, value);
            });
            setTheme('custom'); // Устанавливаем специальное значение для темы
        } else {
            setTheme(getSystemTheme()); // Устанавливаем систему или прочую тему
        }
    };

    useLayoutEffect(() => {
        const defaultActiveTheme = customThemes.find(t => t.active);
        if (defaultActiveTheme) {
            Object.entries(defaultActiveTheme.details).forEach(([key, value]) => {
                document.documentElement.style.setProperty(key, value);
            });
            setTheme('custom'); // Устанавливаем специальное значение для темы
        } else {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
        }
    }, [theme, customThemes]);

    return { currentTheme: theme, setTheme, addCustomTheme, toggleCustomTheme, customThemes };
}
    • 0

相关问题