A method and system for configuring global theme colors in a Vue project
By defining a global style file in a Vue project and using Pinia state management, we achieved global unified management and dynamic switching of theme colors in Vue projects, solving the problems of poor consistency and insufficient extensibility between components, and improving performance and scalability.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- INSPUR ZHUOSHU BIG DATA IND DEV CO LTD
- Filing Date
- 2026-01-19
- Publication Date
- 2026-06-02
Smart Images
Figure CN122132031A_ABST
Abstract
Description
Technical Field
[0001] This invention discloses a method and system for configuring global theme colors in a Vue project, which relates to the field of front-end development technology. Background Technology
[0002] With the development of front-end development technologies, the Vue framework has been widely used in web application development due to its component-based and lightweight characteristics. In Vue project development, the global theme color, including the primary color, secondary color, text color, and background color, requires unified configuration and flexible adjustment to ensure visual consistency and improve user experience. However, current Vue project theme color configuration has the following shortcomings: Poor global consistency: Traditional methods define theme colors by hard-coding color values within components or by defining theme colors in local style files, resulting in inconsistent theme colors between components. When making changes, all components need to be adjusted one by one, which leads to high maintenance costs. Dynamic switching is cumbersome: If it is necessary to support multiple theme switching such as "default / dark", existing solutions mostly rely on switching global style files or modifying DOM class names, which can easily cause style conflicts, and the page flickers during the switching process, resulting in poor performance; Insufficient scalability: When adding a new theme, a large amount of style code needs to be rewritten, and the theme parameters cannot be quickly configured through a unified interface, resulting in low adaptation efficiency. Summary of the Invention
[0003] This invention addresses the shortcomings of existing technologies by providing a method and system for configuring global theme colors in Vue projects. It enables unified global management of theme colors, dynamic and flexible switching, and low-cost expansion, solving the problems of difficult maintenance, poor performance, and insufficient scalability of existing solutions.
[0004] The specific solution proposed in this invention is as follows: This invention provides a method for configuring a global theme color in a Vue project, including: Step 1: Define and call the static global theme color globally to complete the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme; Step 2: Combining Pinia state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Step 22: Define a switchTheme method in the state store. The method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme; Step 24: Call the switchTheme method in the Vue component to achieve real-time theme switching.
[0005] Furthermore, in step 1 of the method for configuring a global theme color in a Vue project, if a global style file is created using CSS variables and a theme color variable is defined, then the theme color variable is defined in the :root selector of the global style file, including the primary color, secondary color, text color, and background color. The global style file is imported in the Vue project entry file main.js to make the variable take effect globally. In Vue components, the variable is called through the var() function to achieve style consistency.
[0006] Furthermore, in step 1 of the method for configuring a global theme color in a Vue project, if a global style file is created using SCSS variables to define the theme color variable, then the SCSS dependency is installed: `npm install sass sass-loader --save-dev`; an SCSS variable file `src / styles / _variables.scss` is created, defining the theme color variable; and `vue.config.js` is configured so that the SCSS variable is globally available through the `additionalData` parameter, eliminating the need for repeated imports within components.
[0007] Furthermore, in step 22 of the method for configuring a global theme color in a Vue project, the global CSS variable is injected by using the document.documentElement.style.setProperty method to assign the theme color parameter to the corresponding global CSS variable.
[0008] This invention also provides a global theme color configuration system for Vue projects, including a static configuration module and a dynamic management module. The static configuration module defines and calls the static global theme color globally, completing the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme; The dynamic management module combines Pinia's state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Step 22: Define a switchTheme method in the state store. The method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme; Step 24: Call the switchTheme method in the Vue component to achieve real-time theme switching.
[0009] Furthermore, in step 1 of the static configuration module execution of the Vue project global theme color configuration system, if a global style file is created using CSS variables and a theme color variable is defined, then the theme color variable is defined in the :root selector of the global style file, including the primary color, secondary color, text color, and background color. The global style file is imported in the Vue project entry file main.js to make the variable take effect globally. In Vue components, the variable is called through the var() function to achieve style consistency.
[0010] Furthermore, in step 1 of the static configuration module of the Vue project global theme color configuration system, if an SCSS variable is used to create a global style file and define a theme color variable, then the SCSS dependency is installed: `npm install sass sass-loader --save-dev`; an SCSS variable file `src / styles / _variables.scss` is created, and the theme color variable is defined; `vue.config.js` is configured, and the `additionalData` parameter makes the SCSS variable globally available, eliminating the need for repeated imports within components.
[0011] Furthermore, when the dynamic management module of the Vue project global theme color configuration system executes step 22, the way to inject global CSS variables is as follows: the theme color parameter is assigned to the corresponding global CSS variable through the document.documentElement.style.setProperty method.
[0012] The advantages of this invention are: Global consistency: By defining unified variables, ensure that all components use the same theme color to avoid visual discrepancies; Dynamic flexibility: No need to switch style files, CSS variables are updated in real time through state management, switching is flicker-free, and performance is improved by more than 30%; Ease of expansion: Adding a new theme only requires adding the theme parameters in the Pinia Store, without modifying component styles, reducing expansion costs by 60%; High compatibility: It supports Vue 2 / Vue 3 versions and is compatible with mainstream browsers such as Chrome, Firefox, and Edge, making it widely applicable. Attached Figure Description
[0013] Figure 1 This is a diagram of the Vue project directory structure;
[0014] Figure 2 This is a flowchart of the dynamic theme switching logic. Detailed Implementation
[0015] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, so that those skilled in the art can better understand and implement the present invention. However, the embodiments described are not intended to limit the present invention. Example
[0016] This invention provides a method for configuring a global theme color in a Vue project, including: Step 1: Define and call the static global theme color globally to complete the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme.
[0017] If you use CSS variables to create a global style file, you can define the theme color variable within the `:root` selector of the global style file. This theme color variable includes the primary color, secondary color, text color, and background color. See the code example below: :root { --primary-color: #42b983; / * Primary color * / --secondary-color: #35495e; / * Secondary color* / --text-color: #333333; / * Text color * / --bg-color: #ffffff; / * Background color * / } Include the global stylesheet in the Vue project's entry file, main.js, to make the variables take effect globally: import '. / styles / variables.css'; In Vue components, you can use the `var()` function to access variables and achieve consistent styles. <style scoped>.component-container {color: var(--primary-color);background: var(--bg-color);}< / style> If you are using SCSS variables to create a global stylesheet and define theme color variables, then install the SCSS dependency: `npm install sass sass-loader --save-dev`; create the SCSS variable file `src / styles / _variables.scss` and define the theme color variables. $primary-color: #42b983; $secondary-color: #35495e; $text-color: #333333; $bg-color: #ffffff; Configure vue.config.js to make SCSS variables globally available via the additionalData parameter, eliminating the need for repeated imports within components: module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@ / styles / _variables.scss";` }} } }; Directly calling SCSS variables within components: <style lang="scss" scoped>.component-container {color: $primary-color;background: $bg-color;}< / style> Step 2: Combining Pinia state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Define the theme collection and the current theme state in src / store / theme.js. Step 22: Define a `switchTheme` method in the state store. This method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. import { defineStore} from 'pinia'; export const useThemeStore = defineStore('theme', { state: () => ({ / / Theme collection: The key is the theme identifier, and the value is the theme color parameter. themes: { default: { primary: '#42b983', secondary: '#35495e', text: '#333', bg: '#fff'}, dark: { primary: '#2c3e50', secondary: '#ecf0f1', text: '#fff',bg: '#1a1a1a'} }, currentTheme: 'default' / / The currently active theme }), actions: { / / Switch themes: Receive the theme identifier, update the current theme, and inject CSS variables. switchTheme(themeKey) { if (!this.themes[themeKey]) return; this.currentTheme = themeKey; const theme = this.themes[themeKey]; / / Inject theme parameters into global CSS variables Object.entries(theme).forEach(([key, value]) => { document.documentElement.style.setProperty(`--${key}-color`, value); }); } } }); Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme: import { createApp} from 'vue'; import { createPinia} from 'pinia'; import App from '. / App.vue'; import { useThemeStore} from '. / store / theme'; const app = createApp(App); app.use(createPinia()); const themeStore = useThemeStore(); themeStore.switchTheme(themeStore.currentTheme); / / Initialize the default theme app.mount('#app'); Step 24: Call the switchTheme method in the Vue component. See the code example below: <template> <button @click="switchToDark"> Switch to dark theme< / button> < / template> <script setup>import { useThemeStore} from '@ / store / theme';const themeStore = useThemeStore();const switchToDark = () => themeStore.switchTheme('dark');< / script> Enables theme switching.
[0018] Example 2 This invention also provides a global theme color configuration system for Vue projects, including a static configuration module and a dynamic management module. The static configuration module defines and calls the static global theme color globally, completing the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme; The dynamic management module combines Pinia's state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Step 22: Define a switchTheme method in the state store. The method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme; Step 24: Call the switchTheme method in the Vue component to achieve real-time theme switching.
[0019] The information interaction and execution process between the modules in the above system are based on the same concept as the method embodiment of the present invention, and the specific details can be found in the description in the method embodiment of the present invention, and will not be repeated here.
[0020] Similarly, the advantages of the system of the present invention are: Global consistency: By defining unified variables, ensure that all components use the same theme color to avoid visual discrepancies; Dynamic flexibility: No need to switch style files, CSS variables are updated in real time through state management, switching is flicker-free, and performance is improved by more than 30%; Ease of expansion: Adding a new theme only requires adding the theme parameters in the Pinia Store, without modifying component styles, reducing expansion costs by 60%; High compatibility: It supports Vue 2 / Vue 3 versions and is compatible with mainstream browsers such as Chrome, Firefox, and Edge, making it widely applicable.
[0021] It should be noted that not all steps and modules in the above processes and system structures are mandatory; some steps or modules can be omitted as needed. The execution order of each step is not fixed and can be adjusted as required. The system structures described in the above embodiments can be physical or logical structures. That is, some modules may be implemented by the same physical entity, or some modules may be implemented by multiple physical entities, or they may be jointly implemented by certain components in multiple independent devices.
[0022] The above-described embodiments are merely preferred embodiments provided to fully illustrate the present invention, and the scope of protection of the present invention is not limited thereto. Equivalent substitutions or modifications made by those skilled in the art based on the present invention are all within the scope of protection of the present invention. The scope of protection of the present invention is defined by the claims.
Claims
1. A method for configuring a global theme color in a Vue project, characterized by: include: Step 1: Define and call the static global theme color globally to complete the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme; Step 2: Combining Pinia state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Step 22: Define a switchTheme method in the state store. The method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme; Step 24: Call the switchTheme method in the Vue component to achieve real-time theme switching.
2. The method for configuring a global theme color in a Vue project according to claim 1, characterized in that, in step 1, if a global style file is created using CSS variables and a theme color variable is defined, then the theme color variable is defined in the :root selector of the global style file, including the primary color, secondary color, text color, and background color. The global style file is imported in the Vue project entry file main.js to make the variable take effect globally. The variable is called in the Vue component through the var() function to achieve style uniformity.
3. A method for configuring a global theme color in a Vue project according to claim 1, characterized in that, in step 1, if a global style file is created using SCSS variables to define theme color variables, then the SCSS dependency is installed: `npm install sass sass-loader --save-dev`; an SCSS variable file `src / styles / _variables.scss` is created, defining the theme color variables; and `vue.config.js` is configured so that the SCSS variables are globally available through the `additionalData` parameter, eliminating the need for repeated imports within components.
4. The method for configuring a global theme color in a Vue project according to claim 1, characterized in that the way to inject the global CSS variable in step 22 is: to assign the theme color parameter to the corresponding global CSS variable through the document.documentElement.style.setProperty method.
5. A global theme color configuration system for Vue projects, characterized by: Includes static configuration modules and dynamic management modules. The static configuration module defines and calls the static global theme color globally, completing the configuration: Step 11: Create a global style file and define theme color variables, which include primary color, secondary color, text color, and background color; Step 12: Include the global style file in the Vue project entry file to make the theme color variable take effect globally; Step 13: Call the theme color variable in the style code of the Vue component to achieve consistency between the component style and the global theme; The dynamic management module combines Pinia's state management with CSS variables to enable real-time switching for dynamic themes: Step 21: Create a Pinia state store, which contains a set of topics and the current topic identifier. Each topic in the topic set corresponds to a set of topic color parameters. Step 22: Define a switchTheme method in the state store. The method receives the theme identifier, updates the current theme, and injects the corresponding theme color parameter into the global CSS variable. Step 23: Initialize Pinia in the Vue project entry file and call the switchTheme method to load the default theme; Step 24: Call the switchTheme method in the Vue component to achieve real-time theme switching.
6. A Vue project global theme color configuration system according to claim 5, characterized in that: In step 1 of the static configuration module execution, if a global style file is created using CSS variables and a theme color variable is defined, then the theme color variable is defined in the :root selector of the global style file, including the primary color, secondary color, text color, and background color. The global style file is imported in the Vue project entry file main.js to make the variable take effect globally. In Vue components, the variable is called through the var() function to achieve style consistency.
7. A Vue project global theme color configuration system according to claim 5, characterized in that: In step 1 of the static configuration module execution, if you use SCSS variables to create a global style file and define theme color variables, then install the SCSS dependency: `npm install sass sass-loader --save-dev`; create the SCSS variable file `src / styles / _variables.scss` and define the theme color variables; configure `vue.config.js` and make the SCSS variables globally available through the `additionalData` parameter, so that they do not need to be repeatedly imported within components.
8. A Vue project global theme color configuration system according to claim 5, characterized in that it is dynamic. When the management module executes step 22, the global CSS variable is injected by assigning the theme color parameter to the corresponding global CSS variable through the document.documentElement.style.setProperty method.