登录查看更多内容

Last updated on 2025年1月29日

How do you implement dark mode or theme switching with CSS variables?

由人工智能和领英社区提供技术支持

Dark mode is a popular feature that allows users to switch between a light and a dark theme for a website or an app. It can improve readability, reduce eye strain, and save battery life. In this article, you will learn how to implement dark mode or theme switching with CSS variables, a powerful tool that lets you define and reuse values for custom properties.

此文章中的业界达人

由社区从 27 条内容中精选。了解更多

Ph?m ?ình Thi?n

??Lead Software Engineer @ MISA JSC | Youtube “Ph?m ?ình Thi?n - T?i ?u Frontend”
Tapesh Dua

Software Engineer @Geeksforgeeks || Knight @Leetcode || Fullstack Developer || C++ & DSA || Top Front-end Coding Voice…
GULLAPALLI JYOTHI PRAKASH

Graduate Trainee at HCLTECH || Front-End Web Developer || RWD || Javascript || React js ll Git & GitHub || API

1 What are CSS variables?

CSS variables, also known as custom properties, are identifiers that start with -- and can hold any valid CSS value. You can use them to store colors, fonts, sizes, or any other style information that you want to reuse throughout your document. For example, you can declare a variable for the primary color of your theme like this:

:root {
  --primary-color: #ff0000;
}

The :root selector refers to the highest-level element in the document, which is usually the html element. By defining variables in the :root, you make them available to the entire document. You can then use the var() function to access the value of a variable in any CSS rule. For example, you can apply the primary color to the background of a button like this:

button {
  background-color: var(--primary-color);
}

添加您的观点

Ph?m ?ình Thi?n

??Lead Software Engineer @ MISA JSC | Youtube “Ph?m ?ình Thi?n - T?i ?u Frontend”
(已编辑)
举报内容
CSS variables are custom variables that you can create and reuse throughout your stylesheet. Variables store CSS values like color, width, height and so on. In oder to use CSS variables, declare CSS variables by using the -- prefix inside the :root element, and then in order to apply those, function with the variables declared above.

已翻译

赞
GULLAPALLI JYOTHI PRAKASH

Graduate Trainee at HCLTECH || Front-End Web Developer || RWD || Javascript || React js ll Git & GitHub || API
举报内容
"CSS variables, also known as custom properties, are like wizards in the realm of web styling. Unlike their fixed counterparts, these magical variables allow you to store and reuse values across your stylesheets. Think of them as enchanting tokens that hold the power to maintain consistency and flexibility in your design spells. With a simple declaration and a sprinkle of creativity, CSS variables empower you to easily update colors, sizes, and other properties throughout your entire website, casting a harmonious charm over your codebase. Embrace the magic of CSS variables, and watch your styles come to life with newfound ease and enchantment! ? #CSSMagic #WebDesign #LinkedInArticle"

已翻译

赞
Prasad Katkade

Developer by Day & Designer by Night !
(已编辑)
举报内容
Similar to variables in JavaScript or other programming languages, CSS variables hold assigned values that can be updated dynamically. To create dynamic theming based on CSS variables, one should first define these variables in the global styles.css under the root selector. Subsequently, reference these variables in design configuration files like tailwind.config or material UI styles, where the values assigned to CSS variables in the global styles act as the default styling. Finally, updating these CSS variables dynamically using JavaScript, with code like - document.documentElement.style.setProperty('--your-variable', 'value'), this allows seamless dark mode theme switching. ????? - Tutorial shared over my profile do checkout

已翻译

赞
Pavan R.

Software Development Engineer @ Nordstrom | LinkedIn Top Web Development Voice | UCM’23 Scholar | Ex-DBS
举报内容
A custom property is most commonly thought of as a?variable?in CSS.This makes it easier to maintain and update your stylesheets. CSS variable help DRY up your CSS. That is “Don’t Repeat Yourself.” Custom properties can make code easier to maintain because you can update one value and have it reflected in multiple places. ?Custom properties?must?be within a selector and start with two dashes (--).

已翻译

赞
Tapesh Dua

Software Engineer @Geeksforgeeks || Knight @Leetcode || Fullstack Developer || C++ & DSA || Top Front-end Coding Voice ?? || 10K+
举报内容
CSS variables, or custom properties, are identifiers prefixed with -- that can contain any valid CSS value. They enable storing style information such as colors, fonts, or sizes for reuse across a document. For instance, declaring a variable for the primary color: :root { --primary-color: #ff0000; } The :root selector targets the highest-level element, usually <html>, making variables accessible throughout the document. To use a variable, employ the var() function within CSS rules. For example: button { background-color: var(--primary-color); } This applies the primary color to the background of a button.

已翻译

赞

加载更多内容

2 How to create a dark theme with CSS variables

To create a dark theme with CSS variables, define a set of variables for the colors, fonts, and other style properties that you want to change when the user switches to the dark mode. For example, you can create a variable for the background color of the body element like this:

:root {
  --body-bg-color: #ffffff;
}

Then, you can use a media query to detect the user's preference for dark mode and override the variable with a different value. For example, you can use the prefers-color-scheme media feature to check if the user prefers a dark theme and change the background color to black like this:

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg-color: #000000;
  }
}

Finally, you can use the variable in your CSS rule to apply the background color to the body element like this:

body {
  background-color: var(--body-bg-color);
}

This way, the background color will change automatically based on the user's preference. You can repeat this process for any other style property that you want to change for the dark theme, such as text color, border color, or box-shadow.

添加您的观点

Tapesh Dua

Software Engineer @Geeksforgeeks || Knight @Leetcode || Fullstack Developer || C++ & DSA || Top Front-end Coding Voice ?? || 10K+
举报内容
To create a dark theme using CSS variables, start by defining variables for style properties such as background colors and text colors. For example, you could create a variable for the background color of the body element. Then, use a media query to detect if the user prefers a dark theme and update the variables accordingly. Finally, apply these variables throughout your CSS to style elements based on the user's preference. This approach allows your website to seamlessly adapt to dark mode without duplicating code or creating separate stylesheets.

已翻译

赞
Oleg Petrov

Senior Frontend Engineer @ Clickup | Frontend Development | Full-Stack Development
举报内容
To make a dark theme using CSS variables, start by setting up variables for your colors in the CSS root, like this: ``` :root { --background-color: white; --text-color: black; } ``` Then, make a dark theme by changing these colors: ``` .dark-theme { --background-color: black; --text-color: white; } ``` You can switch to the dark theme by adding the .dark-theme class to your website's body with JavaScript, like this: ``` document.body.classList.toggle('dark-theme'); ``` This way, you change your site's theme by just flipping a switch or pressing a button, without needing to redo all your styles.

已翻译

赞
Eduardo Moraes Rigo

Desenvolvedor Front End | React.js | Next.js | TypeScript | Node.js
举报内容
Comece definindo variáveis para cores de fundo, texto, e outros elementos chave: :root { --cor-fundo: #ffffff; --cor-texto: #333333; } body { background-color: var(--cor-fundo); color: var(--cor-texto); } Para alternar para o tema escuro, basta atribuir essas variáveis a elementos específicos ou a todo o documento, dependendo do escopo desejado. Você pode fazer isso dinamicamente usando JavaScript ou, em alguns casos, por meio de uma classe CSS adicional. const ativarTemaEscuro = () => { document.documentElement.style.setProperty('--cor-fundo', '#1f1f1f'); document.documentElement.style.setProperty('--cor-texto', '#ffffff'); };

已翻译

赞
Pavan R.

Software Development Engineer @ Nordstrom | LinkedIn Top Web Development Voice | UCM’23 Scholar | Ex-DBS
举报内容
/* Default colors */ body { --text-color: #222; --bkg-color: #fff; } /* Dark theme colors */ body.dark-theme { --text-color: #eee; --bkg-color: #121212; } /* Styles for users who prefer dark mode at the OS level */ @media (prefers-color-scheme: dark) { /* defaults to dark theme */ body { --text-color: #eee; --bkg-color: #121212; } /* Override dark mode with light mode styles if the user decides to swap */ body.light-theme { --text-color: #222; --bkg-color: #fff; } }

已翻译

赞

3 How to add a theme switcher with CSS variables

If you want to give the user more control over the theme, you can add a theme switcher that lets them toggle between the light and dark mode manually. To do this, you need to add some HTML elements that act as buttons or checkboxes for the theme switcher. For example, you can use a label and an input of type checkbox like this:

<label for="theme-switcher">Dark mode</label>
<input type="checkbox" id="theme-switcher">

Then, you need to use some JavaScript code to listen for the change event on the input element and add or remove a class name from the html element based on the checked state of the input. For example, you can use a class name of dark-theme to indicate that the user has selected the dark mode like this:

const themeSwitcher = document.getElementById("theme-switcher");
themeSwitcher.addEventListener("change", function() {
  if (this.checked) {
    document.documentElement.classList.add("dark-theme");
  } else {
    document.documentElement.classList.remove("dark-theme");
  }
});

Next, you need to use a CSS selector that targets the html element with the dark-theme class name and override the variables with the values for the dark theme. For example, you can use the same values as before for the background color and the text color, like this:

html.dark-theme {
  --body-bg-color: #000000;
  --text-color: #ffffff;
}

Finally, you need to use the variables in your CSS rules to apply the style properties to the elements that you want to change for the dark theme. For example, you can use the same rule as before for the body element and add another rule for the text color like this:

body {
  background-color: var(--body-bg-color);
}

p {
  color: var(--text-color);
}

This way, the style properties will change based on the class name of the html element, which is controlled by the theme switcher.

添加您的观点

Eduardo Moraes Rigo

Desenvolvedor Front End | React.js | Next.js | TypeScript | Node.js
举报内容
Você pode usar JavaScript para alterar os valores das variáveis CSS: <button onclick="toggleTheme()">Alternar Tema</button> <script> function toggleTheme() { const root = document.documentElement; const temaAtual = getComputedStyle(root).getPropertyValue('--cor-fundo'); if (temaAtual === '#ffffff') { root.style.setProperty('--cor-fundo', '#333333'); root.style.setProperty('--cor-texto', '#ffffff'); } else { root.style.setProperty('--cor-fundo', '#ffffff'); root.style.setProperty('--cor-texto', '#333333'); } } </script>

已翻译

赞
Tapesh Dua

Software Engineer @Geeksforgeeks || Knight @Leetcode || Fullstack Developer || C++ & DSA || Top Front-end Coding Voice ?? || 10K+
举报内容
To add a theme switcher using CSS variables, create HTML elements like a label and checkbox for toggling between light and dark modes. Use JavaScript to detect changes in the checkbox and toggle a "dark-theme" class on the HTML element accordingly. Define CSS rules targeting elements under the "dark-theme" class and override CSS variables with dark theme values. For instance, update background and text colors for the dark mode. Apply these variables in your CSS rules to style elements accordingly, ensuring dynamic theme switching. This approach allows users to control the theme manually, enhancing the user experience with customizable styling.

已翻译

赞
Getúlio Strapazzon

Software Engineer | Technical Leader | React | Angular | NodeJS | Java | Kotlin | IOS | Android
举报内容
Use JavaScript para alternar a classe dark-theme no elemento body ao clicar em um bot?o. Para persistir a preferência do usuário, utilize localStorage para salvar e carregar o tema escolhido. Isso garante uma experiência de usuário suave e personalizada.

已翻译

赞
Raquel Machado

Senior Software Engineer | Frontend focused Developer | React | Next | Node | Java | AWS | JavaScript | TypeScript | SQL
举报内容
To enhance the user experience, I’d suggest considering the use of local storage to save the user’s theme preference. This ensures that their selected theme persists across page reloads or sessions, creating a more seamless and personalized interaction with your website. It’s a small detail, but it can make a big difference in how users perceive the usability of your theme switching feature.

已翻译

赞

4 Benefits of using CSS variables for theme switching

Using CSS variables for theme switching offers several advantages compared to other methods, such as using multiple style sheets, inline styles, or JavaScript manipulation. These benefits include maintaining a more organized and maintainable CSS code by avoiding duplication and hard-coding of values, the ability to change the values of variables in one place and observe the effect on all elements that use them, and the potential to use media queries, pseudo-classes, or JavaScript to dynamically change the values of variables based on different conditions or user interactions.

添加您的观点

Tapesh Dua

Software Engineer @Geeksforgeeks || Knight @Leetcode || Fullstack Developer || C++ & DSA || Top Front-end Coding Voice ?? || 10K+
举报内容
Using CSS variables for theme switching streamlines code organization, preventing duplication and hard-coded values. Centralizing variable adjustments updates all elements consistently, ensuring maintainability. Moreover, CSS variables facilitate dynamic changes via media queries, pseudo-classes, or JavaScript, enhancing flexibility and customization. Overall, they offer a concise, efficient solution for implementing dynamic themes in web development.

已翻译

赞
Deepak Vijay Agrawal

Frontend @Qualys ? JavaScript ?? ? T-Shaped Software Professional ??
举报内容
Certainly! CSS variables bring several technical advantages to theme switching. They allow for dynamic and real-time changes, reducing the need for repetitive code adjustments. With variables, you can manage color schemes, font styles, and other design elements systematically. This enhances code modularity, making your stylesheets more maintainable and scalable. Additionally, the ability to apply variables through media queries facilitates responsive design, ensuring a seamless and engaging user experience across various devices and screen sizes.

已翻译

赞
Eduardo Moraes Rigo

Desenvolvedor Front End | React.js | Next.js | TypeScript | Node.js
举报内容
O uso de variáveis sempre será algo agregador no decorrer do desenvolvimento de qualquer projeto. Muito se deve a facilidade na manuten??o, uma vez que as variáveis s?o definidas, basta modificar os valores dessas variáveis para alterar o tema inteiro. Isso reduz a necessidade de percorrer todo o código em busca de cada ocorrência das cores específicas do tema. Além disso temos a quest?o da flexibilidade e reutiliza??o, por exemplo, as variáveis CSS permitem criar temas dinamicos e personalizáveis, você pode manipular vários tipos de temas com várias cores diferentes mudando por exemplo apenas uma variável!

已翻译

赞
Oleg Petrov

Senior Frontend Engineer @ Clickup | Frontend Development | Full-Stack Development
举报内容
Using CSS variables for theme switching makes changing your site's look easy and efficient. You can switch themes with just a few variable updates, avoiding the need for multiple stylesheets. This not only makes your code neater and easier to handle but also speeds up your site since only one stylesheet is used. Users can switch between themes smoothly, without page reloads, enhancing their experience. Plus, it's a modern approach that keeps your site flexible and ready for future updates

已翻译

赞

5 Challenges of using CSS variables for theme switching

Using CSS variables for theme switching can present certain challenges that need to be addressed. To ensure compatibility with browsers that don't support CSS variables or have partial support, tools like PostCSS and Babel can be used to transpile the CSS code to fallback values. Additionally, accessibility and usability should be taken into account when changing colors, fonts, and other style properties. WebAIM and Contrast Checker can be used to test the contrast ratio and readability of themes, while following the Web Content Accessibility Guidelines (WCAG) is recommended for best practices.

Finally, optimizing performance and loading time is important. CSSNano and PurgeCSS can help minify and remove unused variables, while code splitting techniques can be used to load only the necessary variables.

添加您的观点

Oleg Petrov

Senior Frontend Engineer @ Clickup | Frontend Development | Full-Stack Development
举报内容
Challenges of using CSS variables for theme switching include: — Limited support in older browsers. — Complexity in managing many variables for detailed themes. — Potential performance issues with extensive or complex variable usage. — Difficulty ensuring consistency when integrating with CSS frameworks or libraries not designed for CSS variable use.

已翻译

赞
Ben Wilfred

Senior Developer
(已编辑)
举报内容
Consistency of theme CSS variable consumption throughout your F/E componentry is challenging but necessary. Keep it simple and leverage component composition where the base visual components consume the theme CSS variables. Centralize the theme CSS variables for ease of reference. If applicable this will depend on your choice of CSS framework and CSS preprocessor. If it's a fit for you in your project, rather than re-inventing the wheel I advocate consuming pre-built libraries like Chakra-UI or Vuetify with built in configurable and centralized theming baked in to their component suite.

已翻译

赞
Getúlio Strapazzon

Software Engineer | Technical Leader | React | Angular | NodeJS | Java | Kotlin | IOS | Android
举报内容
Em resumo, n?o costumo fazer isso de forma nativa. Em quase 100% dos casos, acabo utilizando um framework como RadixUI ou Tailwind. No entanto, é sempre bom entender como isso funciona, pois pode ser útil no dia a dia como desenvolvedor front-end.

已翻译

赞

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Anton Tiurin ??

Senior Frontend Developer | 6+ years | React, TypeScript, JavaScript/HTML/CSS, Redux, Next.js
(已编辑)
举报内容
Here is example how I implemented themes in one of my project based on html data-attribute. 1. Firstly I add css variables which set the theme based on html data-theme attribute // Default theme is light :root { // your light them vars } // Variables for dark theme html[data-theme='dark'] { // your dark them vars } 2. Then we need function for theme changing. function changeTheme(theme: Themes) { document.documentElement.setAttribute( 'data-theme', theme ); this.currentTheme = theme; const color = getComputedStyle(document.body).getPropertyValue('--md-color-background'); document.querySelector('meta[name="theme-color"]')?.setAttribute('content', color); localStorage.setItem('theme', theme); }

已翻译

赞

Front-end Coding

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How do you implement dark mode or theme switching with CSS variables?

1

2

3

4

5

6

1 What are CSS variables?

2 How to create a dark theme with CSS variables

3 How to add a theme switcher with CSS variables

4 Benefits of using CSS variables for theme switching

5 Challenges of using CSS variables for theme switching

6 Here’s what else to consider

Front-end Coding

给文章评分

感谢您的反馈

更多Front-end Coding相关文章

更多相关阅读内容