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

alvaromontoro profile image

Bad CSS-Dad Jokes (II)

Alvaro Montoro -

madsstoumann profile image

Alien Signals — 2-in-1 Challenge

Mads Stoumann -

asimachowdhury profile image

Essential Resources for Frontend Developers: Links You Can’t Live Without

Asima Chowdhury -

devyoma profile image

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Emore Ogheneyoma Lawrence -