<![CDATA[<li id="5hhk0"></li>]]>
Using variables in components<\/h3> Once the variables are defined, you can use them in any CSS rule: <\/p>
.button {\n background-color: var(--color-primary);\n color: var(--color-text);\n}<\/pre> The advantage of this is that no matter what theme is currently, the buttons will automatically adapt to the corresponding color<\/strong> , and there is no need to write a style for each theme separately.<\/p> You can also nest variables, such as setting a default value:<\/p>
background-color: var(--custom-bg, var(--color-bg));<\/pre> This means that if --custom-bg<\/code> is not defined, --color-bg<\/code> will be replaced.<\/p> How to dynamically switch topics<\/h3> To make the topic switchable, it is generally necessary to manipulate class names or data attributes. For example:<\/p>
Light color<\/button>\nDark<\/button><\/pre> Corresponding JS:<\/p>
function switchTheme(themeName) {\n document.body.className = themeName === 'dark' ? 'theme-dark' : '';\n}<\/pre> You can also use data-theme<\/code> attribute instead of the class name, the logic is the same. The key is to change the class or attribute of a top-level container through JS and trigger variable updates.<\/p>\n Note: CSS variables are inherited, so as long as the class is changed on the root element or body, all child elements can perceive changes.<\/p><\/blockquote>\n
Theme variables can be more flexible<\/h3>\n In addition to basic colors, you can also define more types of theme variables, such as:<\/p>\n
\n Font size, line height: --font-size-base<\/code>\n<\/li>\n Round corner radius: --radius-default<\/code>\n<\/li>\n Border color: --border-color<\/code>\n<\/li>\n Shadow style: --shadow-level-1<\/code>\n<\/li>\n<\/ul>\n This will make the entire design system more unified and convenient for maintenance.<\/p>\n
If your project is large, it is recommended to concentrate the variables in a file, such as _variables.css<\/code> , and then import them through @import<\/code> .<\/p>\n Basically that's it. The core of using CSS variables to make the topic is \"define first, then use, and then switch\". The things that are not complicated but are easy to ignore details are variable naming specifications and scope controls. Maintaining a clear structure will make later expansion much easier.<\/p>"}
Home
Web Front-end
CSS Tutorial
How to use CSS variables for theming?
How to use CSS variables for theming?
Jul 15, 2025 am 01:22 AM
css variables
theme
The core of using CSS variables to achieve topic switching is to define the basic variables and organize the topic structure, and dynamically switch through class names or attributes. The steps are as follows: 1. Define basic variables such as colors, fonts, etc. in:root; 2. Create classes that cover variables for different themes (such as dark and light colors); 3. Call variables using var() in CSS rules; 4. Switch class names or attributes through JavaScript to achieve theme changes; 5. Expand variables to font size, rounded corners, shadows and other style attributes. This clear structure and easy maintenance lies in reasonable naming and scope control.
Using CSS variables to achieve topic switching is actually quite direct. The key is to organize the variable structure and dynamically switch with class names or attributes. The core idea is: extract the style information such as color, font, etc. into variables, and then switch the overall style by changing the variable values .
Define the basic variables and organize the topic
CSS variables (also called custom properties) are usually written in :root , which is the global scope. You can name variables according to your purpose, such as main color, background color, text color, etc.:
:root {
--color-primary: #4a90e2;
--color-bg: #ffffff;
--color-text: #333333;
} If you are doing multiple topics, such as "dark" and "light", you can override these variables in another class:
.theme-dark {
--color-bg: #1e1e1e;
--color-text: #f5f5f5;
} In this way, just add .theme-dark class to <body> or root element, the style of the entire page will automatically change.
Using variables in components Once the variables are defined, you can use them in any CSS rule:
.button {
background-color: var(--color-primary);
color: var(--color-text);
} The advantage of this is that no matter what theme is currently, the buttons will automatically adapt to the corresponding color , and there is no need to write a style for each theme separately.
You can also nest variables, such as setting a default value:
background-color: var(--custom-bg, var(--color-bg)); This means that if --custom-bg is not defined, --color-bg will be replaced.
How to dynamically switch topics To make the topic switchable, it is generally necessary to manipulate class names or data attributes. For example:
<button onclick="switchTheme('light')">Light color</button>
<button onclick="switchTheme('dark')">Dark</button> Corresponding JS:
function switchTheme(themeName) {
document.body.className = themeName === 'dark' ? 'theme-dark' : '';
} You can also use data-theme attribute instead of the class name, the logic is the same. The key is to change the class or attribute of a top-level container through JS and trigger variable updates.
Note: CSS variables are inherited, so as long as the class is changed on the root element or body, all child elements can perceive changes.
Theme variables can be more flexible
In addition to basic colors, you can also define more types of theme variables, such as:
Font size, line height: --font-size-base
Round corner radius: --radius-default
Border color: --border-color
Shadow style: --shadow-level-1
This will make the entire design system more unified and convenient for maintenance.
If your project is large, it is recommended to concentrate the variables in a file, such as _variables.css , and then import them through @import .
Basically that's it. The core of using CSS variables to make the topic is "define first, then use, and then switch". The things that are not complicated but are easy to ignore details are variable naming specifications and scope controls. Maintaining a clear structure will make later expansion much easier.
The above is the detailed content of How to use CSS variables for theming?. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
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
See all articles
![\"How](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175251372766867.jpeg\")