面试题：Solid.js中createContext实现主题切换功能 - 基础实现

定义上下文：
- 首先导入createContext，这是Solid.js中用于创建上下文的函数。
```
import { createContext } from'solid-js';

// 创建主题上下文
const ThemeContext = createContext({});
```
- 这里创建了一个初始值为空对象的主题上下文。实际应用中，可以根据亮色和暗色主题的默认设置来初始化这个对象，例如包含颜色变量等。

在组件中消费上下文：

使用ThemeContext.Consumer来在组件中获取上下文数据。

import { createContext } from'solid-js';

const ThemeContext = createContext({});

function ThemeConsumerComponent() {
    return (
        <ThemeContext.Consumer>
            {theme => (
                // 根据主题对象来渲染不同样式
                <div style={{ color: theme.textColor }}>
                    This text color will change based on the theme.
                </div>
            )}
        </ThemeContext.Consumer>
    );
}

在ThemeConsumerComponent组件中，通过ThemeContext.Consumer的函数式写法，接收主题对象theme，然后根据主题对象中的属性（如textColor）来渲染组件样式。

实现主题切换的逻辑：

可以在更高层级组件中定义主题切换状态和切换函数。

import { createContext, createSignal } from'solid-js';

const ThemeContext = createContext({});

function ThemeProvider({ children }) {
    const [isDarkTheme, setIsDarkTheme] = createSignal(false);

    const theme = {
        textColor: isDarkTheme()? 'white' : 'black',
        // 可以添加更多与主题相关的样式属性
    };

    const toggleTheme = () => {
        setIsDarkTheme(!isDarkTheme());
    };

    return (
        <ThemeContext.Provider value={{...theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

在ThemeProvider组件中，使用createSignal创建了一个isDarkTheme信号来表示当前是否为暗色主题，并提供了setIsDarkTheme函数用于更新这个状态。
根据isDarkTheme的值构建theme对象，包含与主题相关的样式属性。
定义toggleTheme函数，用于切换主题状态。
通过ThemeContext.Provider将theme对象和toggleTheme函数传递下去，使得子组件可以消费并实现主题切换。
在子组件中，可以这样使用：

function ThemeConsumerComponent() {
    return (
        <ThemeContext.Consumer>
            {({ toggleTheme }) => (
                <button onClick={toggleTheme}>
                    Toggle Theme
                </button>
            )}
        </ThemeContext.Consumer>
    );
}

ThemeConsumerComponent通过ThemeContext.Consumer获取toggleTheme函数，并将其绑定到按钮的onClick事件上，实现主题切换功能。

整合CSS样式：

假设亮色主题样式在light.css，暗色主题样式在dark.css。
在主题切换逻辑中，可以通过动态引入CSS文件或者使用CSS变量来切换样式。

动态引入CSS文件：

import { createContext, createSignal } from'solid-js';

const ThemeContext = createContext({});

function ThemeProvider({ children }) {
    const [isDarkTheme, setIsDarkTheme] = createSignal(false);

    const theme = {
        textColor: isDarkTheme()? 'white' : 'black',
        // 可以添加更多与主题相关的样式属性
    };

    const toggleTheme = () => {
        setIsDarkTheme(!isDarkTheme());
        const link = document.createElement('link');
        link.rel ='stylesheet';
        if (isDarkTheme()) {
            link.href = 'light.css';
        } else {
            link.href = 'dark.css';
        }
        const existingLink = document.querySelector('link[rel="stylesheet"]');
        if (existingLink) {
            document.head.removeChild(existingLink);
        }
        document.head.appendChild(link);
    };

    return (
        <ThemeContext.Provider value={{...theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

使用CSS变量：

在CSS文件中定义变量，例如light.css：

:root {
    --text - color: black;
}

dark.css：

:root {
    --text - color: white;
}

在主题切换逻辑中，根据主题状态更新html元素的class，例如：

import { createContext, createSignal } from'solid-js';

const ThemeContext = createContext({});

function ThemeProvider({ children }) {
    const [isDarkTheme, setIsDarkTheme] = createSignal(false);

    const theme = {
        textColor: isDarkTheme()? 'white' : 'black',
        // 可以添加更多与主题相关的样式属性
    };

    const toggleTheme = () => {
        setIsDarkTheme(!isDarkTheme());
        const htmlElement = document.documentElement;
        if (isDarkTheme()) {
            htmlElement.classList.add('dark');
            htmlElement.classList.remove('light');
        } else {
            htmlElement.classList.add('light');
            htmlElement.classList.remove('dark');
        }
    };

    return (
        <ThemeContext.Provider value={{...theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

在组件样式中使用CSS变量：

function ThemeConsumerComponent() {
    return (
        <div style={{ color: 'var(--text - color)' }}>
            This text color will change based on the theme.
        </div>
    );
}

面试题：Solid.js中createContext实现主题切换功能 - 基础实现

知识考点

面试题答案