Define CSS custom properties (such as --color-primary) in:root to implement globally accessible style variables; 2. Rewrite these variables through classes (such as .theme-dark) to switch topics; 3. Improve maintainability with semantic naming and grouping prefixes; 4. Dynamically switch topics in JavaScript or combine prefers-color-scheme media query to respond to system preferences; 5. Call variables with the var() function and set alternate values to enhance compatibility, thereby achieving a modular, dynamic and easy-to-manage theme system.
Using CSS custom properties (also known as CSS variables) for theming is a powerful and maintained way to manage visual styles across your website or app. They allow you to define reusable values—like colors, fonts, or spacing—that can be easily updated globally or swapped for different themes (eg, light/dark mode).
Here's how to use them effectively:
? Define Custom Properties for Theming
Custom properties are declared with a double dash ( -- ) prefix. It's best to define them on a high-level selector like :root so they're globally accessible.
:root {
--color-primary: #007bff;
--color-background: #ffffff;
--color-text: #333333;
--font-size-base: 16px;
--border-radius: 8px;
} You can then use these values with the var() function:
.card {
background: var(--color-background);
color: var(--color-text);
border-radius: var(--border-radius);
}? Switch Themes with Classes
To support multiple themes (like light and dark), override your custom properties within a class (eg, .theme-dark ).
:root {
--color-background: #ffffff;
--color-text: #333333;
}
.theme-dark {
--color-background: #1a1a1a;
--color-text: #f0f0f0;
} Now, just add the theme-dark class to your <body> or root element to activate the dark theme:
<body class="theme-dark"> <div class="card">Themed content</div> </body>
This approach is simple and works well with JavaScript for theme toggling.
? Best Practices for Themed Variables
Use semantic names instead of literal values:
/* Good */ --color-text-primary --bg-surface /* Avoid */ --color-white --color-dark-blue
Group related variables under meaningful prefixes:
--color-primary: #007bff; --color-primary-hover: #0056b3; --font-family-heading: 'Georgia', serif; --font-family-body: 'Roboto', sans-serif;
Set fallback values in
var()when needed:color: var(--color-text, #333);
?? Dynamically Change Themes with JavaScript
You can toggle themes or let users choose their preference using JavaScript:
function setTheme(theme) {
document.documentElement.className = theme; // applys to :root
}
// Example usage
setTheme('theme-dark');
// or
setTheme('theme-light'); You can also respond to user preferences using prefers-color-scheme :
@media (prefers-color-scheme: dark) {
.theme-auto {
--color-background: #121212;
--color-text: #e0e0e0;
}
} Then use .theme-auto in your HTML for automatic theme.
? Summary
- Use
--custom-propertyin:rootfor global theme values. - Override them in classes (like
.theme-dark) for theme switching. - Use semantic naming for better maintenance.
- Toggle themes with JavaScript or respect OS preferences with media queries.
Basically, CSS custom properties make them modular, dynamic, and easy to manage—no preprocessor required.
The above is the detailed content of How to use CSS custom properties for theming?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Where are themes located in Windows 11?
Aug 01, 2023 am 09:29 AM
Windows 11 has so many customization options, including a range of themes and wallpapers. While these themes are aesthetic in their own way, some users still wonder where they stand in the background on Windows 11. This guide will show you the different ways to access the location of your Windows 11 theme. What is the Windows 11 default theme? The default theme background of Windows 11 is an abstract royal blue flower blooming with a sky blue background. This background is one of the most popular, thanks to the anticipation before the release of the operating system. However, the operating system also comes with a range of other backgrounds. Therefore, you can change the Windows 11 desktop theme background at any time. Themes are stored in Windo
How to unapply a theme (change or remove) in Windows 11
Sep 30, 2023 pm 03:53 PM
Themes play an integral role for users who wish to modify their Windows experience. It may change the desktop background, animations, lock screen, mouse cursor, sounds, icons, etc. But what if you want to remove themes in Windows 11? It's equally simple and there are options available, both for the current user profile and for the entire system, i.e. all users. Additionally, you can even delete custom themes in Windows 11 if they are no longer used for that purpose. How do I find my current topic? Press + to open the Settings app > Go to Personalization from the navigation pane > Click on Themes > The current theme will be listed on the right. How about WindowsI
How to detail the location of the win10 theme folder
Dec 27, 2023 pm 09:37 PM
Recently, many friends feel that the theme of Win10 does not meet their own aesthetics and want to change the theme. After downloading it online, they find that the folder cannot be found. Then the editor will show you how to find the folder of the Win10 theme. Which folder is the win10 theme in? 1. The default storage path location of Win10 system wallpapers: 1. Microsoft saves these pictures in the path C:\Windows\Web\Wallpaper. Under it are the default saves of pictures with three different themes. Location, 2, flowers and lines and colors theme pictures are also saved in the folder with the same name! The naming principle is imgXXX. We only need to follow this principle to change the name of the related image we want to set and paste the image into
win10 theme background picture location
Jan 05, 2024 pm 11:32 PM
Some friends want to find the theme pictures of their own system, but don’t know where the win10 theme pictures are stored. In fact, we only need to enter the Windows folder on the C drive to find the location of the theme pictures. The storage location of win10 theme images A: The win10 theme images are stored in the "themes" folder of the C drive. 1. First, we enter "This PC" 2. Then open the "c drive" (system drive) 3. Then enter the "Windows" folder in it. 4. Find and open the "resources" folder. 5. After entering, open the “themes” folder. 6. You can see the win10 theme pictures in the folder. Windows theme pictures are in a special format,
How to adjust a WordPress theme to avoid misaligned display
Mar 05, 2024 pm 02:03 PM
How to adjust WordPress themes to avoid misaligned display requires specific code examples. As a powerful CMS system, WordPress is loved by many website developers and webmasters. However, when using WordPress to create a website, you often encounter the problem of theme misalignment, which affects the user experience and page beauty. Therefore, it is very important to properly adjust your WordPress theme to avoid misaligned display. This article will introduce how to adjust the theme through specific code examples.
Find the folder location of the win10 theme
Jun 30, 2023 pm 12:57 PM
In which folder do I find the win10 theme? Recently, many friends feel that the theme of win10 is not in line with their own aesthetics. They want to change the theme. After downloading it online, they find that the folder cannot be found. Then Xiaobian will take you to find how to find the theme of the win folder. ? Detailed introduction to which folder the win10 theme is located 1. The default storage path location of Win10 system wallpapers: 1. Microsoft saves these pictures in the path C:WindowsWebWallpaper. Under it are the default storage locations for pictures with three different themes. 2. Flowers and Lines and Colors themed pictures are also saved in the folder with the same name! The naming principle is imgXXX. We only need to change the settings we want to set according to this principle.
How to adjust WeChat back to black theme
Feb 05, 2024 pm 02:12 PM
In the WeChat software, we can use the black theme mode or the default theme mode. So some users’ WeChat has turned into a black theme. How do they want to switch it back? Now let’s take a look at how to switch WeChat back to a black theme. 1. First open WeChat and enter the homepage, then click [My] in the lower right corner; 2. Then click [Settings] on the My page; 3. Then go to the settings page and click [General]; 4. Enter the general Click [Dark Mode] on the page; 5. Finally, click [Normal Mode] on the dark mode page;
VSCode Chinese settings: Personalize your editor
Mar 25, 2024 pm 05:00 PM
Title: VSCode Chinese Settings: Personalize Your Editor In today's programmer's work, a powerful, flexible and personalized code editor is an indispensable tool. Visual Studio Code (VSCode for short), as a free and open source modern code editor, is loved by the majority of developers. Like many software, VSCode also supports multiple languages, including Chinese. This article will introduce how to set up the Chinese environment in VSCode to make your editor more
