如何从CSS变量读取主题色并在JS中适配canvas-gauges

核心问题分析 #

你的思路是对的：可以读取CSS变量到JS中，再传递给canvas-gauges。之前的错误有两个：

1. 用getAttribute读取CSS变量是错误的，CSS变量属于计算样式，需通过getComputedStyle获取
2. 直接在render外执行DOM查询时，组件还未挂载到页面，导致获取到null

方法一：读取CSS变量传递给仪表盘（SCSS主导配置） #

针对类组件，通过React的ref获取DOM元素，并在组件挂载后读取计算样式：

const Store = window.require('electron-store');
const store = new Store();
const theme = store.get("colorTheme");

class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.dashboardRef = React.createRef();
        this.state = {
            colorNeedle: ''
        };
    }

    componentDidMount() {
        // 组件挂载后读取DOM元素
        const dashboardEl = this.dashboardRef.current;
        if (dashboardEl) {
            // 获取元素的计算样式
            const computedStyle = window.getComputedStyle(dashboardEl);
            // 读取CSS变量并去除首尾空格
            const fillActive = computedStyle.getPropertyValue('--fillActive').trim();
            // 映射到仪表盘的指针色
            this.setState({ colorNeedle: fillActive });
        }
    }

    // 若支持主题切换，在组件更新时重新读取变量
    componentDidUpdate(prevProps) {
        if (prevProps.colorTheme !== this.props.colorTheme) {
            const dashboardEl = this.dashboardRef.current;
            if (dashboardEl) {
                const computedStyle = window.getComputedStyle(dashboardEl);
                const fillActive = computedStyle.getPropertyValue('--fillActive').trim();
                this.setState({ colorNeedle: fillActive });
            }
        }
    }

    render() {
        const { colorNeedle } = this.state;

        return <div className="dashboard" colorTheme={theme} ref={this.dashboardRef}>
            <div className="dashboard__header"></div>
            <div className="dashboard__gauges">
                <RadialGauge colorNeedle={colorNeedle}></RadialGauge>
            </div>
        </div>;
    }
}

export default Dashboard;

方法二：统一主题配置（JS主导，避免重复定义） #

更推荐的方式是把主题颜色统一放在JS文件中，同时供SCSS和React组件使用，彻底避免重复配置：

1. 创建theme.js统一管理主题：

export const themeConfig = {
    default: {
        fillInactive: '#7c7c7c'
    },
    Blue: {
        fillActive: '#3f77a4',
        colorNeedle: '#1a80d2' // 直接把仪表盘指针色放在这里
    }
};

2. 在themes.scss中引用JS变量（需Sass-loader支持）：

@import './theme.js';

:root {
    --fillInactive: #{themeConfig.default.fillInactive};
}

[colorTheme='Blue'] {
    --fillActive: #{themeConfig.Blue.fillActive};
}

3. 在Dashboard.js中直接使用JS变量：

const Store = window.require('electron-store');
const store = new Store();
const theme = store.get("colorTheme");
import { themeConfig } from './theme';

class Dashboard extends Component {
    render() {
        // 获取当前主题配置，默认用default
        const currentTheme = themeConfig[theme] || themeConfig.default;
        const colorNeedle = currentTheme.colorNeedle;

        return <div className="dashboard" colorTheme={theme}>
            <div className="dashboard__header"></div>
            <div className="dashboard__gauges">
                <RadialGauge colorNeedle={colorNeedle}></RadialGauge>
            </div>
        </div>;
    }
}

export default Dashboard;

关键注意点 #

• 方法一中，若存在主题切换功能，必须在componentDidUpdate中重新读取CSS变量，否则仪表盘颜色不会更新
• 方法二更易于维护，所有主题配置集中在一处，修改时无需同时改动SCSS和JS

内容的提问来源于stack exchange，提问作者Traxan