Customization SCSS | Judia - Admin & Dashboard Template

How to reduce unused SCSS ( CSS ) code of Light, Dark & Brand Topbar for the Light, Dark & Brand Modes?

Do the below changes in the src/assets/scss/_variables.scss file.

Q: If you want to use the light top bar colors from the light mode in the dark mode, follow these steps:

Set $light-topbar-layout-dark to false. This means that the light top bar colors will be used in the dark mode. In other words, the top bar will have the same colors as in the light mode even when you're using dark mode.
If you set $light-topbar-layout-dark to true, it will generate CSS for the dark mode with the light top bar colors. This means that the top bar will have different colors in each mode.
In summary, setting $light-topbar-layout-dark to false will keep the light top bar colors in dark mode, and setting it to true will generate CSS for dark mode with light top bar colors, resulting in different colors for the top bar in each mode.

Q: If you want to use the dark top bar colors from the light mode in the dark mode, follow these steps:

Set $dark-topbar-layout-dark to false. This means that the dark top bar colors from the light mode will be used in the dark mode. In other words, the top bar will have the same colors as in the light mode even when you're using dark mode.
If you set $dark-topbar-layout-dark to true, it will generate CSS for the dark mode with the dark top bar colors. This means that the top bar will have different colors in each mode.
In summary, setting $dark-topbar-layout-dark to false will keep the dark top bar colors in dark mode, and setting it to true will generate CSS for dark mode with dark top bar colors, resulting in different colors for the top bar in each mode.

Q: If you want to use the brand top bar colors from the light mode in the brand mode, follow these steps:

Set $brand-topbar-layout-dark to false. This means that the brand top bar colors from the light mode will be used in the brand mode. In other words, the top bar will have the same brand colors as in the light mode even when you're using the brand mode.
If you set $brand-topbar-layout-dark to true, it will generate CSS for the brand mode with the brand top bar colors. This means that the top bar will have different brand colors in each mode.
In summary, setting $brand-topbar-layout-dark to false will keep the brand top bar colors in the brand mode the same as in the light mode, and setting it to true will generate CSS for the brand mode with brand top bar colors, resulting in different colors for the top bar in each mode.

Structure

Judia has managed the scss file in the ( judia_v*/src/assets/scss ) folder. We have used gulp-sass for scss compilation. You can add your custom scss in the custom.scss file instead of doing changes in the app.scss or other scss files as it will create conflicts in future updates.

Variables Structure

We have defined all the variables in the src/assets/scss/ folder.

_variables.scss: All bootstrap variables are defined in this file.

Layout Structure

We have added all layouts files in the src/assets/scss/structure folder.

_footer.scss: Footer-related scss define in this file.
_layouts.scss: Manage Boxed layout scss in this file.
_page-head.scss: Manage page heading scss in this file.
_topbar.scss: Topbar scss in this file.
_menu.scss: Menu scss in this file.

Other SCSS file Structure

We have created all the scss files in the src/assets/scss folder.

apps: All apps related scss files are created in this folder.
components: All components related scss files are created in this folder.
fonts: All fonts are imported in this scss file.
pages: All the pages related to scss are written in this folder and page wise scss created i.e. _authentication.scss, _chat.scss, _dashboard.scss etc
plugins: All the plugins ( Apex chart, ckeditor, full calendar etc ) are created in the plugins folder.
icons.scss: All icons scss are imported in this file.

Quick customization of layout using scss.

You can make changes in the src/assets/scss/_*.scss file.

Variables	Description
$primary: $purple; $secondary: $blue; $success: $green; $info: $teal; $warning: $yellow; $danger: $red; $light: $gray-200; $dark: $gray-900;	You can manage those colors to update the color theme.
--#{$prefix}font-sans-serif: "Inter",sans-serif --#{$prefix}font-monospace: "Inter",sans-serif	You can set the default font in these variables.

Variables

Description

$primary:       $purple;
$secondary:     $blue;
$success:       $green;
$info:          $teal;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;

You can manage those colors to update the color theme.

--#{$prefix}font-sans-serif:                         "Inter",sans-serif
--#{$prefix}font-monospace:                          "Inter",sans-serif

You can set the default font in these variables.