DEV Community

Yao
Yao

Posted on

为你的应用添加明暗主题

#theme #css

在我们开发的 React、Vue 等现代应用中，经常可以看到明暗主题切换功能（如下图），它是如何实现的呢？市面有很多种实现方案，接下来让我们逐个绍并分析它们的优劣。
Image description

方案一：CSS 变量

方案二：CSS in JS

方案三：Less/Sass 变量 + 两份主题 css 构建产物

Top comments (2)

Collapse
 
kartjim profile image
kart jim •

推荐相关文章：你好黑暗，我的老朋友 —— 为网站添加用户友好的深色模式支持

Collapse
 
xxxlgloverd profile image
xxxlgloverd •

xd,别卖关子

Read next

dev007777 profile image

Modern HTML5 Boilerplate

TheDev -

laustke profile image

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke -

adam profile image

🍏 Jony Ive Interview, Hyper-Responsive Components & Git Tricks (5-min read)

Adam Marsden -

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -