Front-end theme color dynamic switching method and system

Abstract

The application discloses a front-end theme color dynamic switching method and system, belongs to the technical field of front-end development, and aims to solve the technical problem of how to combine CSS and JavaScript, dynamically change the background color, button, table, link font color and the like in a main page, and control a third-party page embedded by using iframe. The method comprises the following steps: creating a theme color file through a LESS preprocessor, and defining a light theme color and a dark theme color; configuring the theme color file in a Vue project through Vite, and referencing a theme color variable CSS; dynamically loading the theme color file through a route guard or an event listener, listening to theme color changes through a chart library, dynamically updating icon styles, and switching between the light theme and the dark theme, so as to realize user individual customization of platform background color changes.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, in particular to a front-end theme color dynamic switching method and system. BACKGROUND

[0002] With the increasing richness of website page content and the complexity of interaction, websites have gradually added some personalized customization functions, such as theme color switching functions.

[0003] Apache ECharts is a JavaScript-based open-source visualization chart library. ECharts provides various graph drawing, such as line charts, column charts, etc. It provides various custom configurations for users to configure chart styles. The custom configuration is injected into Echarts' Options through JavaScript variables. The theme color dynamic switching designed this time needs to use JavaScript combined with CSS variables.

[0004] The theme color replacement on the market mainly uses CSS variables for identification to replace the styles of some components in the page. However, for Echarts and the like which configure styles through JavaScript, synchronous theme color replacement cannot be performed.

[0005] How to combine CSS and JavaScript to dynamically change the background color, button, table, link font color, etc. in the main page, while also controlling the third-party pages embedded using iframe, is a technical problem that needs to be solved. SUMMARY

[0006] The technical task of the present application is to provide a front-end theme color dynamic switching method and system to solve the technical problem of how to combine CSS and JavaScript, and make the third-party pages embedded using iframe also follow the theme color to change the background color and font color.

[0007] In a first aspect, the present application provides a front-end theme color dynamic switching method, including the following steps:

[0008] Theme color file configuration: create a theme color file through a LESS preprocessor, and define light theme colors and dark theme colors;

[0009] Theme color variable reference: configure the theme color file in the Vue project through Vite, and reference the theme color variable CSS;

[0010] Theme color loading: monitor the parameters in the URL page, dynamically set the theme color style file to dark or light theme through the route guard, manage the theme color through the Pinia or Redux state management library, and use it in the global, if the Vue project uses third-party libraries including Echarts, get and listen to the global theme to redraw the chart.

[0011] As a preferred, the theme color file configuration includes the following steps:

[0012] Configure the Vite configuration file, and set the additionalData field to the light theme file by default;

[0013] Compile the Less file through Vite, write the light theme file light.module.less through Less, configure the light theme color, and write the dark theme file dark.module.less through Less, configure the dark theme color.

[0014] As a preferred, the theme color variable reference includes the following steps:

[0015] Configure the light.module.less file to be referenced in the global, and import the dark theme file through the additionalData field;

[0016] Compile the vue file through Vite, and the CSS variable can be referenced in the style tag and script tag of the vue file.

[0017] As a preferred, the theme color loading includes the following steps:

[0018] Determine whether to use dark theme or light theme through the route parameter theme;

[0019] Create a global store object, export the useGlobalStore method, dynamically update the global store object when the route parameter changes, set the CSS variable, and the CSS variable can directly use the theme color variable;

[0020] Change the CSS variable referenced in the vue file, where the CSS variable can be referenced in the style tag and script tag of the vue file;

[0021] Get the theme color variable after switching in JavaScript;

[0022] Get the current theme color in the chart library Echarts through the theme parameter of the global globalStore.

[0023] In a second aspect, the present application discloses a front-end theme color dynamic switching system for implementing front-end theme color dynamic switching through the front-end theme color dynamic switching method of any one of the first aspect, the system comprising a theme color file configuration module, a theme color variable reference module, and a theme color loading module.

[0024] The theme color file configuration module is configured to create a theme color file through a LESS preprocessor, and define a light theme color and a dark theme color.

[0025] The theme color variable reference module is configured to configure a theme color file in a Vue project through Vite, and reference theme color variable CSS.

[0026] The theme color loading module is configured to monitor parameters in a page URL, dynamically set a theme color style file as a dark theme or a light theme through a route guard, manage the theme color through a Pinia or Redux state management library, and use the theme color in a global state.

[0027] Preferably, the theme color file configuration module is configured to:

[0028] The Vite configuration file is configured by default, and the additionalData field is configured as a light theme file.

[0029] The LESS file is compiled through Vite, the light theme file light.module.less is written through LESS, the light theme color is configured, the dark theme file dark.module.less is written through LESS, and the dark theme color is configured.

[0030] Preferably, the theme color variable reference module is configured to:

[0031] The light.module.less file is configured to be referenced in a global state, and the dark theme file is imported through the additionalData field.

[0032] The vue file is compiled through Vite, and the CSS variable can be referenced in the style tag and the script tag of the vue file.

[0033] Preferably, the theme color loading module is configured to:

[0034] The theme color is determined to be a dark theme or a light theme through the route parameter theme.

[0035] Create a global store object, export the useGlobalStore method, dynamically update the global store object when the route parameter changes, set the CSS variable, and the CSS variable can directly use the theme color variable;

[0036] Change the CSS variable referenced in the vue file, where the CSS variable can be referenced in both the style tag and the script tag of the vue file;

[0037] Get the theme color variable after switching in JavaScript;

[0038] Get the current theme color through the theme parameter of the global globalStore in the chart library Echarts.

[0039] The front-end theme color dynamic switching method and system of the application has the following advantages:

[0040] 1. Using the combination of CSS variables and JavaScript, the method realizes quick and accurate theme color dynamic switching, simplifying the code operation of the complex theme color dynamic transformation function;

[0041] 2. Friendly to embedded third-party pages, ensuring that related pages can be updated synchronously after the main frame theme color is changed, avoiding the problem of inconsistent theme colors in different pages;

[0042] 3. Greatly improves the user experience, so that users can use any page in the platform without difference after switching the theme. BRIEF DESCRIPTION OF DRAWINGS

[0043] In order to more clearly illustrate the technical solutions in the embodiments of the application, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are only some embodiments of the application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0044] The application will be further described below in conjunction with the drawings.

[0045] Figure 1 The overall framework schematic diagram of the application platform for the front-end theme color dynamic switching method of embodiment 1;

[0046] Figure 2 The flowchart of the front-end theme color dynamic switching method of embodiment 1. DETAILED DESCRIPTION

[0047] The present application will be further described below in conjunction with the drawings and specific embodiments so that those skilled in the art can better understand and implement the present application, but the embodiments do not limit the present application, and the technical features in the embodiments and the embodiments can be combined with each other without conflict.

[0048] The embodiment of the present application provides a front-end theme color dynamic switching method and system, which is used for solving the technical problem of how to combine CSS and JavaScript, so that the third-party page embedded in iframe can also follow the theme color to change the background color and font color.

[0049] Embodiment 1:

[0050] The present application is a front-end theme color dynamic switching method, which includes three steps of theme color file configuration, theme color variable reference and theme color loading.

[0051] Step S100 theme color file configuration: create a theme color file through a LESS preprocessor, and define light theme color and dark theme color.

[0052] As a specific implementation of the theme color file configuration, the following operations are included:

[0053] (1) Configure the Vite configuration file, and set the additionalData field to the light theme file by default;

[0054] (2) Execute the Less file through Vite compilation, write the light theme file light.module.less through Less, configure the light theme color, write the dark theme file dark.module.less through Less, and configure the dark theme color.

[0055] Step S200 theme color variable reference: configure the theme color file in the Vue project through Vite, and reference the theme color variable CSS.

[0056] As a specific implementation of the theme color variable reference, the following operations are included:

[0057] (1) Configure the light.module.less file to be referenced in the global, and import the dark theme file through the additionalData field;

[0058] (2) Execute the vue file through Vite compilation, and the CSS variable can be referenced in the style tag and script tag of the vue file.

[0059] Step S300 theme color loading: watch the parameters in the URL, dynamically set the theme color style file to dark or light theme through the route guard, manage the theme color through the Pinia or Redux state management library, and use it in the global, if the Vue project uses third-party libraries including Echarts, get and listen to the global theme to redraw the chart.

[0060] As a specific implementation of theme color loading, the following steps are included:

[0061] (1) Determine whether to use the theme color as a dark theme or a light theme through the route parameter theme;

[0062] (2) Create a global store object and export the useGlobalStore method, which dynamically updates the global store object when the route parameter changes, sets the CSS variable, and the CSS variable can directly use the theme color variable;

[0063] (3) Change the CSS variable referenced in the vue file, where the CSS variable can be referenced in both the style tag and the script tag of the vue file;

[0064] (4) Get the theme color variable after switching in JavaScript;

[0065] (5) Get the current theme color in the chart library Echarts through the theme parameter of the global globalStore.

[0066] CSS (Cascading Style Sheets) is a computer language used to style HTML (an application of SGML) or XML (a subset of SGML) files. CSS can not only statically style web pages, but also dynamically format web page elements with various scripting languages.

[0067] Less is a CSS preprocessor that extends CSS language and adds features such as variables, mixins, functions, etc., making CSS more maintainable, convenient for theme making, and expandable. Based on the characteristics of Less, we can use CSS variables to configure theme colors uniformly in the page,

[0068] Vue is a JavaScript framework for building user interfaces. As a front-end framework used in daily development, it greatly reduces the need for developers to directly manipulate page elements, and through the feature of two-way binding, changes made by users on the platform can directly trigger the modification of page element styles, etc.

[0069] Vite is a front-end development and build tool that compiles.vue files into browser-executable JavaScript code for browser parsing and rendering.

[0070] The method of the embodiment is based on the above main technology, and realizes a front-end theme color dynamic switching method. A specific implementation step is given, including four operations of creating a light theme file, creating a dark theme file, theme color variable reference, and theme color file on-demand loading.

[0071] Operation 1, create a light theme file: write a light theme file using less. First, create src / style / light.module.less, configure the light theme color, and the code is as follows:

[0072] / / Light theme

[0073] @color-primary:#0a8cfa;

[0074] :export{

[0075] --color-primary:@color-primary;

[0076] }

[0077] Operation 2, create a dark theme file: write a dark theme file using less. First, create src / style / dark.module.less, configure the dark theme color. The light theme and the dark theme only differ in color value, and the variable name is unchanged, which is color-primary. The specific code is as follows:

[0078] / / Dark theme

[0079] @color-primary:#000;

[0080] :export{

[0081] --color-primary:@color-primary;

[0082] }

[0083] Operation 3, theme color variable reference: through the configuration file Vite.config.js of Vite, specifically including the following two processes:

[0084] Process 1, configure the light.module.less file to be referenced in the global, import the dark theme Less file through the additionalData field, and the specific code is as follows:

[0085]

[0086] Flow two, after configuration, in the.vue file <style>标签和<script>标签中均可使用，具体代码如下：

[0087] <style>

[0088] .box{

[0089] color:@color-primary；

[0090] }

[0091] < / style>

[0092] <script setup>

[0093] import cssVar from'@ / style / light.module.less'

[0094] const primaryColor＝cssVar['--color-primary'] / / 输出#0a8cfa

[0095] < / script> .

[0096] Operation four, theme file on demand loading, including the following six processes.

[0097] Process one, get the theme parameter parameter dark through the route, such as the route address is xxx? theme = dark, you can get the current need is dark theme through the parameter theme.

[0098] Flow two, create a global store object / src / store / global.js, export useGlobalStore method, when the route parameter changes, timely switch global state, code as follows:

[0099] import{defineStore}from'pinia'

[0100] export const useGlobalStore=defineStore('global',{

[0101] state:()=>{

[0102] return{

[0103] theme:{}, / / Theme color configuration

[0104] themeName:'light' / / Theme color name

[0105] }

[0106] },

[0107] actions:{

[0108] / / When the route parameter changes, timely switch global state

[0109] setTheme(theme,themeName){

[0110] this.theme=theme

[0111] this.themeName=themeName

[0112] }

[0113] }

[0114] })

[0115] Flow Three, judge at router.beforeEach global front-end guard hook, define route file, for example, in the file src / route / route.js, code writing as follows:

[0116] import{createRouter,createWebHashHistory}from'vue-router'

[0117] import{createPinia}from'pinia'

[0118] import{useGlobalStore}from'@ / store / global'

[0119] const routes=[

[0120] / / ... ]

[0122] / / create route

[0123] export const router=createRouter({

[0124] / / hash mode.

[0125] history:createWebHashHistory(),

[0126] routes

[0127] })

[0128] export const pinia=createPinia()

[0129] / / set html tag style attribute, add all theme color variables to inline style const setStyle=(styles)=>{

[0130] if(styles){

[0131] for(let key in styles){

[0132] document.getElementsByTagName('html')[0].style.setProperty(`${key}`,styles[key])

[0133] }

[0134] }

[0135] }

[0136] / / Global before guard, this hook will be triggered before entering each page

[0137] router.beforeEach(async (to, from, next) => {

[0138] const { theme} = to.query

[0139] const globalStore = useGlobalStore()

[0140] / / Determine the theme color file to be loaded according to the route parameters

[0141] await import(`@ / style / ${theme}.module.less`).then((module) => {

[0142] / / module.default is the color variable exported by the theme color file

[0143] if (module.default) {

[0144] / / Global state created by pinia

[0145] globalStore.setTheme(module.default, theme)

[0146] setStyle(module.default)

[0147] }

[0148] next()

[0149] })

[0150] })

[0151] export default routes

[0152] Finally, the content of the theme color file is injected into the style attribute of the html tag through the setStyle method. When theme is dar, --color-primary in style is #000 in dark.module.less, and vice versa. For example:

[0153] Process four, after inserting, directly use the theme color variable in css, the code is as follows:

[0154] .box{

[0155] background:var(--color-primary)

[0156] }

[0157] You can also use it in html

[0158] <div style＝"color:var(--color-primary)">Test template usage .

[0159] Process five, get the theme color variable after switching in JavaScript, the specific code is as follows:

[0160] <script setup>

[0161] import{useGlobalStore}from'@ / store / global'

[0162] const globalStore＝useGlobalStore()

[0163] / / 更新后的主题色，获取的是一个对象

[0164] const theme＝globalStore.theme

[0165] < / script> .

[0166] Process six, use globalStore to get the current theme color in Echarts. If Echarts is used in the project, and the tooltip will also be updated with the theme color change. At this time, you will find that the color does not change with the globalStore theme. The code is as follows:

[0167]

[0168]

[0169] You need to listen to the globalStore themeName, and when it changes, reassign the chartOption value

[0170]

[0171] The embodiment method is applied in specific application, such as Figure 1 The demonstration interface should show a front-end application with obvious theme color distinction, such as the interface of a background management system. The initial interface displays the default theme color, and the user can switch the theme color by clicking a button or selecting a drop-down menu. After switching, the colors of the entire interface, including the navigation bar, menu bar, chart, and other elements, should change accordingly to show the theme color switching effect.

[0172] Embodiment 2:

[0173] The present application is a front-end theme color dynamic switching system, including a theme color file configuration module, a theme color variable reference module, and a theme color loading module. The system realizes the dynamic switching of the front-end theme color through the method disclosed in Embodiment 1.

[0174] The theme color file configuration module is used to perform the following: creating a theme color file through a LESS preprocessor, and defining light theme colors and dark theme colors.

[0175] As a specific implementation of the theme color file configuration module, the module is used to perform the following operations:

[0176] (1) Configure the Vite configuration file, and set the additionalData field to the light theme file by default.

[0177] (2) Execute the Less file through Vite compilation, write the light theme file light.module.less through Less, configure the light theme color, write the dark theme file dark.module.less through Less, and configure the dark theme color.

[0178] The theme color variable reference module is used to perform the following: configuring the global theme color file in the Vue project through Vite, and referencing the theme color variable CSS.

[0179] As a specific implementation of the theme color variable reference, the module is used to perform the following:

[0180] (1) Configure the light.module.less file to be referenced in the global, and import the dark theme file through the additionalData field.

[0181] (2) Execute the vue file through Vite compilation, and the CSS variable can be referenced in both the style tag and the script tag of the vue file.

[0182] The theme color loading module is used to perform the following: monitoring the parameters in the page URL, dynamically setting the theme color style file to the dark theme or the light theme through the route guard, managing the theme color through the Pinia or Redux state management library, and using it globally. If a third-party library including Echarts is used in the Vue project, the global theme is obtained and listened to to redraw the chart.

[0183] As a specific implementation of the theme color loading module, the module is used to perform the following:

[0184] (1) Determine whether to use a dark theme or a light theme by the theme parameter in the route parameter;

[0185] (2) Create a global store object and export a useGlobalStore method. When the route parameter changes, dynamically update the global store object and set CSS variables. The CSS variables can directly use theme color variables;

[0186] (3) Change the CSS variables referenced in the vue file. In the style tag and script tag of the vue file, CSS variables can be referenced;

[0187] (4) Get the theme color variable after switching in JavaScript;

[0188] (5) Get the current theme color in the chart library Echarts through the theme parameter of the global globalStore.

[0189] The application has been described in detail above with reference to the drawings and preferred embodiments, but the application is not limited to these disclosed embodiments. Based on the above embodiments, those skilled in the art can know that more embodiments of the application can be obtained by combining the means in the above different embodiments, and these embodiments are also within the protection scope of the application.

Claims

1. A method for dynamically switching front-end theme colors, characterized in that, Includes the following steps: Theme color file configuration: Create theme color files using the LESS preprocessor to define light and dark theme colors; Theme color variable reference: In a Vue project, global theme color files are configured using Vite, and theme color variables (CSS) are referenced. Theme color loading: The route parameter `theme` determines whether to use a dark or light theme; a global store object is created, and the `useGlobalStore` method is exported. When the route parameter changes, the global store object is dynamically updated, and CSS variables are set. These CSS variables can directly use the theme color variable; CSS variables referenced in the Vue file are modified, specifically referenced in both the `style` and `script` tags of the Vue file; the switched theme color variable is retrieved in JavaScript; and the current theme color is obtained in the Echarts charting library through the `theme` parameter of the global `globalStore`.

2. The front-end theme color dynamic switching method according to claim 1, characterized in that, The theme color configuration file includes the following steps: Configure the Vite configuration file; by default, the additionalData field is set to the light theme file. Vite compiles and executes Less files, using Less to create the light theme file light.module.less and configure the light theme color, and also using Less to create the dark theme file dark.module.less and configure the dark theme color.

3. The front-end theme color dynamic switching method according to claim 1 or 2, characterized in that, Referencing theme color variables involves the following steps: Configure the light.module.less file to be referenced globally, and import the dark theme file through the additionalData field; Vite compiles and executes Vue files, referencing CSS variables in both the style and script tags of the Vue files.

4. A front-end theme color dynamic switching system, characterized in that, The system is used to achieve dynamic switching of front-end theme colors through a front-end theme color dynamic switching method as described in any one of claims 1-3, the system comprising a theme color file configuration module, a theme color variable reference module, and a theme color loading module; The theme color file configuration module is used to perform the following: create a theme color file using the LESS preprocessor, defining light and dark theme colors; The theme color variable reference module is used to perform the following: In a Vue project, configure the global theme color file through Vite and reference the theme color variable CSS; The theme color loading module performs the following actions: It determines whether to use a dark or light theme based on the route parameter `theme`; it creates a global store object, exports the `useGlobalStore` method, dynamically updates the global store object when the route parameter changes, sets CSS variables (which can directly use the theme color variable), modifies CSS variables referenced in Vue files (specifically, CSS variables are referenced in both `style` and `script` tags within the Vue file), retrieves the switched theme color variable in JavaScript, and obtains the current theme color in the Echarts charting library via the `theme` parameter of the global `globalStore`.

5. The front-end theme color dynamic switching system according to claim 4, characterized in that, The theme color file configuration is used to perform the following: Configure the Vite configuration file; by default, the additionalData field is set to the light theme file. Vite compiles and executes Less files, using Less to create the light theme file light.module.less and configure the light theme color, and also using Less to create the dark theme file dark.module.less and configure the dark theme color.

6. The front-end theme color dynamic switching system according to claim 4 or 5, characterized in that, The theme color variable reference module is used to execute the following: Configure the light.module.less file to be referenced globally, and import the dark theme file through the additionalData field; Vite compiles and executes Vue files, referencing CSS variables in both the style and script tags of the Vue files.

Images