CN115408636A - Custom method and system for system theme color based on angular framework - Google Patents
Custom method and system for system theme color based on angular framework Download PDFInfo
- Publication number
- CN115408636A CN115408636A CN202211022307.2A CN202211022307A CN115408636A CN 115408636 A CN115408636 A CN 115408636A CN 202211022307 A CN202211022307 A CN 202211022307A CN 115408636 A CN115408636 A CN 115408636A
- Authority
- CN
- China
- Prior art keywords
- color
- theme
- angular
- introducing
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/48—Program initiating; Program switching, e.g. by interrupt
- G06F9/4806—Task transfer initiation or dispatching
- G06F9/4843—Task transfer initiation or dispatching by program, e.g. task dispatcher, supervisor, operating system
Abstract
The invention relates to the technical field of page rendering, in particular to a system theme color self-defining method based on an angular frame, which comprises the following steps of writing a popup window of a web page for changing the theme color; introducing ngx-color-picker using a color selector; packaging the components by an input box and a color selector, and introducing the components into an interface needing to be called; introducing cs-vars-ponyfil to change cs variables, and introducing js files into angular. The beneficial effects are that: the custom method and system code for system theme colors based on the ANGULAR framework are simple, theme color matching suitable for the environment can be timely made according to user preferences and scene requirements, finally generated scenes are subjected to color matching in a diversified selection mode, optimization efficiency is improved, the problem of scene personalized requirements is timely responded, good experience of users is guaranteed, resource consumption is reduced, and system themes can be changed in a short time by limited manpower.
Description
Technical Field
The invention relates to the technical field of page rendering, in particular to a system theme color self-defining method and system based on an angular frame.
Background
With the increasing and perfecting of the functions of a system and the increasing of the number of users of the system, the theme color of the system needs to be matched with the corresponding special scene sometimes, and the conditions of the preference and the personal aesthetic feeling of the user need to be met sometimes. In order to ensure that the user has a good system use experience and sense enjoyment, the proper theme color matching needs to be continuously changed according to the theme color condition of the current system.
In the prior art, the current method for replacing the theme color of the system mainly includes the following two methods:
(1) The designer redesigns the appropriate theme coloring according to the user scene, and the developer writes the redesigned colors into the system style.
The method for changing the theme color has the disadvantages that the theme color cannot be directly changed in the system, the time and labor are wasted under the conditions that the number of fields Jing Xuqiu is large and the number of users is large, and the change of the theme color of the system is difficult to complete within limited manpower and time limits.
(2) According to the needs of the user scene, only a few fixed theme colors are predefined, and the user can only select one of the existing colors for use and cannot set the theme color desired by the user according to the preference of the user.
This method of changing the theme color is better than the first method, and has a certain autonomy, but it is still poor in terms of user interactivity, so we need to find a method of changing the theme color of the system more flexibly.
Disclosure of Invention
The invention aims to provide a system theme color customization method and system based on an ANGULAR framework, and aims to solve the problems that the theme color replacement provided in the background technology is time-consuming and labor-consuming and cannot respond to the personalized requirements of users and scenes in time.
In order to achieve the purpose, the invention provides the following technical scheme: a method for customizing a system theme color based on an angular framework comprises the following steps:
writing a popup window of the web page for changing the theme color;
introducing ngx-color-picker using a color selector;
packaging the components by an input box and a color selector, and introducing the components into an interface needing to be called;
introducing cs-vars-ponyfil to change cs variables, and introducing js files into angular.
Using the css variable in the css style to modify the css style;
and caching the selected theme color locally, and calling the locally cached theme color by the refreshed page.
Preferably, the popup uses a nz-modal dialog box in the Angular UI component library ng-zorro-antd that conforms to the Ant Design specification.
Preferably, a color selector is used in the input box, and the color selector appears when a user clicks the input box; the color desired by the user is input in the input box, and the color input by the user is positioned on the color selector.
Preferably, after the js file is introduced, the cs variable is changed by the js operation in the event that the theme color is modified.
A self-defining system of system theme colors based on an ANGULAR framework is composed of a pop-up window module, a color selector, an assembly packaging module, a conversion module, a modification module and a cache module;
the popup module is used for writing a popup of a web page for changing the theme color;
the color selector is used for introducing ngx-color-picker for use;
the component packaging module is used for packaging the components by the input box and the color selector and then introducing the components into an interface needing to be called;
the conversion module is used for introducing css-vars-ponyfill to change css variables and introducing js files into angular.
The modification module is used for modifying the css style by using the css variable in the css style;
and the cache module is used for caching the selected theme color locally, and the refreshed page calls the locally cached theme color.
Preferably, in the popup module, a nz-modal dialog box in an Angular UI component library ng-zorro-antd conforming to the Ant Design specification is used for popup.
Preferably, in the component packaging module, a color selector is used in the input box, and the color selector appears when a user clicks the input box; the color desired by the user is input in the input box, and the color input by the user is positioned on the color selector.
Preferably, in the conversion module, after the js file is introduced, in the event of modifying the theme color, the css variable is changed by js operation.
Compared with the prior art, the invention has the beneficial effects that:
the custom method and the system code of the system theme color based on the angular framework are simple, the theme color matching suitable for the environment can be timely made according to the user preference and the scene requirement, the finally generated scene is subjected to color matching in a diversified selection mode, the optimization efficiency is improved, the problem of the personalized requirement of the scene is timely responded, the good experience of the user is ensured, the resource consumption is reduced, and the theme of the system can be changed in a short time by limited manpower.
Drawings
FIG. 1 is a diagram of a pop-up interface for changing the theme color of a web page;
FIG. 2 is a color selector interface diagram;
FIG. 3 is a block diagram of the input box and color selector code;
js file is introduced by enterprise, fig. 4 is a code diagram;
FIG. 5 is code for js to change the cs variable;
FIG. 6 is a code diagram for changing the style of css;
FIG. 7 is a code diagram of a localStorage cache storing theme colors;
FIG. 8 is a drawing of a locally stored subject color code map taken from a localStorage cache;
FIG. 9 is a flow chart of a customization method of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clear and fully described, embodiments of the present invention are further described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are illustrative of some, but not all, embodiments of the invention and are not to be construed as limiting the scope of the invention, as those skilled in the art will recognize and appreciate that many other embodiments can be made without inventive faculty.
In the description of the present invention, it should be noted that the terms "center", "middle", "upper", "lower", "left", "right", "inner", "outer", "top", "bottom", "side", "vertical", "horizontal", and the like indicate orientations or positional relationships based on those shown in the drawings, and are only for convenience of description and simplicity of description, but do not indicate or imply that the referred device or element must have a specific orientation, be constructed in a specific orientation, and be operated, and thus, should not be construed as limiting the present invention. Furthermore, the terms "first," "second," "third," "fourth," "fifth," and "sixth" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
In the description of the present invention, it should be noted that, unless otherwise explicitly specified or limited, the terms "mounted," "connected," and "connected" are to be construed broadly, e.g., as meaning either a fixed connection, a removable connection, or an integral connection; can be mechanically or electrically connected; they may be connected directly or indirectly through intervening media, or they may be interconnected between two elements. The specific meanings of the above terms in the present invention can be understood in specific cases to those skilled in the art.
For the purposes of simplicity and explanation, the principles of the embodiments are described by referring mainly to examples. In the following description, numerous specific details are set forth in order to provide a thorough understanding of the embodiments. It will be apparent, however, to one of ordinary skill in the art that the embodiments may be practiced without limitation to these specific details. In some instances, well-known methods and structures have not been described in detail so as not to unnecessarily obscure the embodiments. In addition, all embodiments may be used in combination with each other.
Example one
Referring to fig. 1 to 9, the present invention provides a technical solution: a custom method of system theme color based on an angular framework is characterized in that: the self-defining method of the system theme color based on the ANGULAR framework comprises the following steps:
writing a popup window of the web page for changing the theme color; the popup uses the nz-modal dialog box in the Angular UI component library ng-zorro-antd following the Ant Design specification;
introducing ngx-color-picker using a color selector; referring to fig. 2, it is a style of a color selection box, which can select colors in a color selector, select transparency, support multiple methods for representing colors (hexadecimal, RGB, RGBA), and set several more common theme color matching at the bottom;
packaging the components by an input box and a color selector, and introducing the components into an interface needing to be called; using a color selector in the input box, the color selector appears when the user clicks the input box; inputting a color required by the user in an input box, and positioning the color input by the user on a color selector; referring to fig. 1, a square is placed in front of the input box and shows the color at the moment in the input box, so that it is known what color is selected without opening the color selector. The following is the style of the dialog box, where an initial theme color is set;
introducing cs-vars-ponyfil to change cs variables, introducing js files into angular. After introducing the js file, in the event of modifying the theme color, changing the cs variable through js operation; the code is shown in figure 5;
using the cs variable in the cs style to modify the cs style; the code is shown in FIG. 6;
caching the selected theme color locally, and calling the locally cached theme color by the refreshed page; the localStorage cache stores the code of the theme color as shown in fig. 7, and the code of calling the localStorage cache for the theme color when the page is refreshed is shown in fig. 8.
Example two
A custom system of system theme color based on angular framework is composed of a pop-up window module, a color selector, a component packaging module, a conversion module, a modification module and a cache module;
the popup module is used for writing a popup of a web page for changing the theme color; the popup uses the nz-modal dialog box in the Angular UI component library ng-zorro-antd following the Ant Design specification;
the color selector is used for introducing ngx-color-picker;
the component packaging module is used for packaging the components by the input box and the color selector and then introducing the components into an interface needing to be called; using a color selector in the input box, the color selector appears when the user clicks the input box; inputting a color required by the user in an input box, and positioning the color input by the user on a color selector;
the conversion module is used for introducing cs-vars-ponyfil to change cs variables and introducing js files into angular. After the js file is introduced, in the event of modifying the theme color, the cs variable is changed through js operation;
the modification module is used for modifying the css style by using the css variable in the css style;
and the cache module is used for caching the selected theme color in a local cache, and the refreshed page calls the theme color cached in the local cache.
Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
Claims (8)
1. A self-defining method of system theme color based on an angular framework is characterized in that: the self-defining method of the system theme color based on the ANGULAR framework comprises the following steps:
writing a popup window of the web page for changing the theme color;
introducing ngx-color-picker using a color selector;
packaging the components by an input box and a color selector, and introducing the components into an interface needing to be called;
introducing css-vars-ponyfill to change css variables, and introducing js files into angular.
Using the cs variable in the cs style to modify the cs style;
and caching the selected theme color locally, and calling the locally cached theme color by the refreshed page.
2. The customization method of system theme colors based on the angular framework, according to claim 1, is characterized in that: pop-up uses the nz-modal dialog in the Angular UI component library ng-zorro-odd, which conforms to the Ant Design specification.
3. The customization method of system theme colors based on the angular framework, according to claim 2, is characterized in that: using a color selector in the input box, the color selector appears when the user clicks the input box; the color desired by the user is input in the input box, and the color input by the user is positioned on the color selector.
4. The customization method of system theme colors based on the angular framework, according to claim 1, is characterized in that: after the js file is introduced, the cs variable is changed by the js operation in the event that the theme color is modified.
5. A system for customizing theme colors based on an angular framework according to any one of claims 1 to 4, wherein: the system comprises a pop-up window module, a color selector, an assembly packaging module, a conversion module, a modification module and a cache module;
the popup module is used for writing a popup of a web page for changing the theme color;
the color selector is used for introducing ngx-color-picker;
the component packaging module is used for packaging the components by the input box and the color selector and then introducing the components into an interface needing to be called;
the conversion module is used for introducing cs-vars-ponyfil to change cs variables and introducing js files into angular.
The modification module is used for modifying the css style by using the css variable in the css style;
and the cache module is used for caching the selected theme color locally, and the refreshed page calls the locally cached theme color.
6. The custom system for system theme colors based on the angular framework, according to claim 5, wherein: in the popup module, a popup uses a nz-modal dialog box in an Angular UI component library ng-zorro-antd conforming to the Ant Design specification.
7. The custom system for system theme colors based on the angular framework, according to claim 6, wherein: in the component packaging module, a color selector is used in an input box, and the color selector appears when a user clicks the input box; the color desired by the user is input in the input box, and the color input by the user is positioned on the color selector.
8. The custom system for system theme colors based on the angular framework according to claim 7, wherein: in the conversion module, after a js file is introduced, in the event of modifying the theme color, the cs variable is changed through js operation.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211022307.2A CN115408636A (en) | 2022-08-25 | 2022-08-25 | Custom method and system for system theme color based on angular framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211022307.2A CN115408636A (en) | 2022-08-25 | 2022-08-25 | Custom method and system for system theme color based on angular framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115408636A true CN115408636A (en) | 2022-11-29 |
Family
ID=84161649
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211022307.2A Pending CN115408636A (en) | 2022-08-25 | 2022-08-25 | Custom method and system for system theme color based on angular framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115408636A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116048516A (en) * | 2023-03-29 | 2023-05-02 | 苏州瑞云智服信息科技有限公司 | Theme color variable using method based on Vue frame |
-
2022
- 2022-08-25 CN CN202211022307.2A patent/CN115408636A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116048516A (en) * | 2023-03-29 | 2023-05-02 | 苏州瑞云智服信息科技有限公司 | Theme color variable using method based on Vue frame |
| CN116048516B (en) * | 2023-03-29 | 2023-06-02 | 苏州瑞云智服信息科技有限公司 | Theme color variable using method based on Vue frame |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7190976B2 (en) | Customizing the display of a mobile computing device | |
| CN104007991B (en) | Application Program Interface layout adjustment method and device | |
| RU2382517C2 (en) | Method and system for setting up electronic transmission program interface, electronic transmission program server and decoder | |
| CN102414682B (en) | Method and apparatus for providing scraped web pages in a graphical user interface | |
| CN102662616B (en) | For screen graph adaptive approach and the system of mobile terminal | |
| EP2429152A1 (en) | Electronic device and casing color changing method thereof | |
| CN102043618B (en) | Method and device for controlling display style of window object | |
| CN106201155B (en) | Method for displaying user interface and system | |
| CN104462312A (en) | Web page displaying method and browser client side | |
| CN103914314B (en) | Method and device for adjusting brightness of display screen | |
| CN115408636A (en) | Custom method and system for system theme color based on angular framework | |
| CN103050090B (en) | Method and device for adjusting display brightness of mobile terminal application | |
| CN103488646A (en) | Method and device for browsing webpages with mobile terminal browser under weak light source | |
| CN101860698A (en) | EPG system for realizing personalized function | |
| CN102929617A (en) | Skin exchanging method for Web software UI (User Interface) | |
| CN105528389A (en) | A logic control method and device based on mobile phone browser core | |
| CN103412748A (en) | Display control method, device and system for user interface of embedded platform | |
| CN107168715A (en) | A kind of intelligent terminal menu subject GUI engine implementation method | |
| CN105975168A (en) | OSD menu fading-in and fading-out method and device | |
| CN102455851A (en) | Method and device for displaying user interfaces in different sets of user equipment | |
| CN103472972A (en) | Text display format setting unit and text display format setting method for mobile terminals and mobile terminal | |
| CN110187944A (en) | A method of based on the fast quick change skin of Android system | |
| CN103246502B (en) | A kind of implementation method of pop-up window and system | |
| CN110442385A (en) | Light editor, driving and control method, system, equipment and storage medium | |
| CN112052001B (en) | UI dynamic display design architecture, method, equipment and storage medium of APP client |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |