Introduction
Variables.css file contains root CSS variables that control the theme's color scheme and layout. Modify these values to create a custom theme that aligns with your product's color palette or client-specific branding requirements.
Apply a custom color theme for your app
To customize the theme of the GluedIn SDK application, follow these steps to locate and edit the Variables.css file:
Locating Variables.css
The Variables.css file is found in the project's assets folder. If you cannot find this file in the downloaded sample application, navigate to src/assets/css/Variables.css.
Example Usage
Refer to the example below to understand how to update the root variables:
:root {
/* Layout */
--max-width: 1920px;
--border-radius: 16px;
/* Theme Colors */
--theme-color: #e95f2a; /* Primary theme color */
--theme-color-light: #f8cfbf; /* Light shade for highlights */
--theme-white: #ffffff; /* Base white color */
--white: #ffffff;
--black: #000000;
--primary-black: #242424; /* Main dark shade */
--primary-gray: #596970; /* Standard gray */
--primary-red: #ff0000; /* Accent color */
--secondary-gray: #adbacf; /* Supporting gray */
--box-shadow-light: #00000014; /* Light shadow */
--secondary-black: #000000; /* Alternate dark shade */
/* Font Sizes */
--font-sz-xs: 14px;
--font-sz-sm: 16px;
--font-sz-md: 18px;
--font-sz-lg: 20px;
/* Font Weights */
--font-wt-medium: 500;
--font-wt-semibold: 600;
--font-wt-bold: 700;
}
Customization Tips
- Primary Colors: Change --theme-color and --theme-color-light for primary and secondary colors.
- Font Customization: Adjust --font-sz-* and --font-wt-* for tailored typography.
- Layout: Modify --border-radius for different corner styling.
Applying Your Changes
After editing Variables.css, save the file. The updates will automatically apply to your app, creating a consistent look that matches your product requirements.
This structured approach ensures flexibility and easy customization of your theme.
