Linaria动态主题实现：基于CSS变量的主题切换方案

2026-01-29 12:25:18作者：裴麒琰

在当今的Web开发中，动态主题切换已成为提升用户体验的重要功能。Linaria作为零运行时CSS-in-JS库，通过CSS变量提供了优雅的主题切换解决方案。本文将详细介绍如何利用Linaria实现动态主题功能，让你的应用在明暗主题间无缝切换。✨

为什么选择CSS变量实现主题切换？

CSS自定义属性（CSS变量）是实现动态主题的理想选择。Linaria利用这一现代CSS特性，让你能够在编译时生成静态CSS，同时在运行时动态改变主题样式。

CSS变量的优势

零运行时开销：Linaria在构建时提取CSS，不增加JavaScript包大小
动态更新：通过JavaScript轻松修改变量值
作用域控制：可在全局或组件级别定义变量

三种主题实现方案对比

1. CSS自定义属性方案（推荐）

这是最现代和灵活的主题实现方式。通过在根元素应用不同的类名来切换CSS变量值：

// 定义不同主题的CSS变量
const lightTheme = css`
  --color-primary: #6200ee;
  --color-accent: #03dac4;
  --background: #ffffff;
  --text: #000000;
`;

const darkTheme = css`
  --color-primary: #03a9f4;
  --color-accent: #e91e63;
  --background: #1a1a1a;
  --text: #ffffff;
`;

2. 类名选择器方案

如果你需要支持不支持CSS变量的旧浏览器，可以使用类名选择器：

const Header = styled.h1`
  text-transform: uppercase;

  .theme-dark & {
    color: white;
    background: #1a1a1a;
  }

  .theme-light & {
    color: black;
    background: #ffffff;
  }
`;

3. React Context方案

结合React Context提供主题上下文，通过函数插值使用主题颜色：

const Button = withTheme(styled.button`
  background-color: ${props => props.theme.accent};
  color: ${props => props.theme.text};
`);

实战：构建完整的主题系统

步骤1：定义主题变量

在[packages/core/src/CSSProperties.ts](https://gitcode.com/gh_mirrors/li/linaria/blob/10302654006e414bfb52e3b4f07773d71b483abe/packages/core/src/CSSProperties.ts?utm_source=gitcode_repo_files)中定义标准的CSS属性类型，确保主题变量类型安全。

步骤2：创建主题切换组件

import { css } from '@linaria/core';

const ThemeToggle = styled.button`
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background: var(--color-accent);
  }
`;

步骤3：实现主题切换逻辑

const [currentTheme, setCurrentTheme] = useState('light');

const toggleTheme = () => {
  setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
};