Colors

Breaking change 1.14.0

Since version 1.14.0, all default parameters and the list of global CSS variables have been moved from the file stores/theme.ts to theme/index.ts.

Furthermore, the file app-layouts/common/Provider.vue will no longer have the task of adding CSS variables to the HTML tag; everything will be delegated to the theme store. Its role will be exclusively to initialize the theme store and apply all the styles generated by it.

Breaking change 1.10.0

Since version 1.10.0, the style object, located in the stores/theme.ts file, looks different. Now, the list of CSS variables is declared without using "--" as a prefix.

The app-layouts/common/Provider.vue component has also changed, and now it is responsible for adding the “-–” prefix to each variable before inserting it into the style attribute of the HTML tag.

To continue using these variables through the store, you only need to perform 2 simple replacements throughout the code:

A) from: style['-- to: style['

B) from: style.value["-- to: style.value["

By modifying the colors of the template, you can generate a multitude of variations, giving your project a unique and personalized look. The ability to customize various color parameters opens up endless possibilities for creating diverse and appealing designs. These color parameters are divided into two macro groups: dark and light.

From the primary color scheme to the smallest accents, each change can create a distinct visual impact, making your project stand out from the crowd.

With a versatile color palette at your disposal, you can create different moods and atmospheres, from vibrant and energetic to calm and sophisticated. Whether you're aiming for a modern, classic, or playful style, the ability to personalize colors allows you to tailor the template to match your specific branding and preferences.

In addition to color choices, various other parameters can be tweaked to create even more variations. Typography options, spacing, and layout adjustments play a crucial role in shaping the overall visual experience. By experimenting with these elements, you can create designs that align perfectly with the message you want to convey.

Info

To perform quick tests on the colors, you can use the LayoutSettings component found within the template and in the Pinx demo.

The entire template use of a primary color. The primary color serves as a foundation upon which all other elements of the user interface (UI) are built. By establishing a primary color, designers can create a harmonious and unified visual experience across different screens and components.

Info

You can find the list of colors in the file theme/index.ts. This file serves as a central repository or store for managing various aspects of the app's theme, including color definitions.

Within the theme/index.ts file, you will likely come across an object or a set of variables that define different color properties such as the primary color, secondary color, background color, accent color, and more. Each color parameter may be represented as a hexadecimal value, RGB/RGBA values, or even named colors.

Having a centralized location for storing color definitions in the theme/index.ts file offers several advantages:

Easy Maintenance: With all color values consolidated in one place, it becomes straightforward to manage and update the color scheme of the entire app. Designers and developers can quickly make changes to the color palette without having to hunt down color codes scattered throughout the codebase.
Consistency: As mentioned earlier, maintaining consistency in the color scheme is crucial for a cohesive and professional-looking UI. Storing colors in a central theme file ensures that all UI elements access the same color values, promoting design consistency across the app.
Scalability: As the app grows and evolves, having a centralized theme file makes it easier to scale the design system and implement new color variations or themes without disrupting existing components.
Reusability: The color values stored in the theme/index.ts file can be easily reused throughout the app, simplifying the process of applying consistent colors to different UI elements and components.
Customizability: By having colors defined in a single location, it becomes more convenient for developers or users to customize the app's color scheme according to their preferences or branding requirements.

The getCssVars object found in the theme/index.ts file allows you to define a set of CSS variables that can be used throughout the entire application. These variables can be accessed in your CSS/SCSS code using the var() syntax.

To manage this, there is a function called setCssGlobalVars located in the store/theme.ts file. This function is responsible for writing the CSS variables from the style object (obtained from the getCssVars function) into the style attribute of the HTML tag. Additionally, it ensures that these variables remain synchronized with any changes made to the style object.

Here's how it works in detail:

Defining Variables: In theme/index.ts, you define the style object (inside the getCssVars function) which contains key-value pairs representing your CSS variables, such as background colors, font sizes, and other properties.
Using Variables: These variables can be used in your CSS/SCSS files by referencing them with the var() function. For example, var(--bg-color) will use the value defined in the style object for the background color.
Synchronization: The setCssGlobalVars function in store/theme.ts takes the style object and writes its contents into the style attribute of the HTML tag. This ensures that the CSS variables are globally accessible throughout the application.
Dynamic Updates: If the style object is updated (for example, if the user changes the theme), the setCssGlobalVars function ensures that these updates are reflected immediately by synchronizing the new values with the HTML tag's style attribute.

This setup allows for a consistent and dynamic theming system where CSS variables are centrally managed and easily accessible across the entire application.