### Styling

We recommend you to customize your theme styles using the user style files. Use the following approaches to customize the theme’s styles :

##### Gulp based workflow

`user.scss`

You can add your own SCSS and override the theme style in the `src/scss/user.scss` file.

`_user-variables.scss`

To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use `src/scss/_user-variables.scss`. Any variable from `node_modules/bootstrap/scss/variables` or `src/scss/theme/_variables.scss` can be overridden with your own value.

`_bootstrap.scss`

To remove bootstrap components, update `src/scss/_bootstrap.scss` file.

##### If you are not using Gulp based workflow

`user.css`

You can add your own CSS and override the theme style in the `public/assets/css/user.css` file.

##### Changing theme colors

##### Gulp based workflow

If you are using gulp base work flow, you can update your theme colors with two different approaches.

###### 1. Using scss variable:

`_user-variables.scss`

You can bring your necessary variable colors form `src/scss/theme/_colors.scss` and paste it into `src/scss/_user-variables.scss` then update variables as your necessity. We recommend to follow this approach.

Light mode is default theme style in Falcon. So, if you update any bootstrap’s SCSS variables, it will effect in Light mode. If you want to update any color, find the corresponding variable for thise color and place theme to _user-variables.scss file. For example:

    //*-----------------------------------------------
    //|   Theme Colors
    //-----------------------------------------------*/

    $primary: $blue !default;
    $secondary: $gray-600 !default;
    $success: $green !default;
    $info: $cyan !default;
    $warning: $yellow !default;
    $danger: $red !default;
    $light: $gray-100 !default;
    $dark: $gray-1100 !default;

If you want to update any theme colors for dark mode, update `$theme-dark-colors` variable and to update the grays colors you have to update the `$dark-grays` variable.

    /*-----------------------------------------------
    |   Theme Styles
    -----------------------------------------------*/
    $theme-dark-colors: (
      'primary': $primary,
      'secondary': $secondary,
      'success': $success,
      'info': $info,
      'warning': $warning,
      'danger': $danger,
      'light': $light,
      'dark': rgba($gray-1000, 0.25),
    ) !default;

    $dark-grays: (
      '100': $gray-1100,
      '200': $gray-1000,
      '300': $gray-900,
      '400': $gray-800,
      '500': $gray-700,
      '600': $gray-600,
      '700': $gray-500,
      '800': $gray-400,
      '900': $gray-300,
      '1000': $gray-200,
      '1100': $gray-100,
    ) !default;

###### 2. Using CSS variable:

`_user.scss`

To update theme color with this approach, you have to update CSS variable for both modes. If you change any color you have to assign it's corresponding RGB color too. Please note sometimes you may need to update corresponding component's CSS variable. For example:

    /*-----------------------------------------------
    |   Theme Styles
    -----------------------------------------------*/
    $success: #00d27a;
    $danger: #e63757;
    :root,
    [data-bs-theme="light"] {
      --falcon-primary:  #{$success};
      --falcon-primary-rgb: #{to-rgb($success)};
      ...
      ...
      ...
    }
    @if $enable-dark-mode {
      @include color-mode(dark, true) {
        --falcon-primary: #{$danger};
        --falcon-primary-rgb: #{to-rgb($danger)};
        .card{
          --falcon-card-bg: #{$success};
        }
      }
    }

##### If you are not using Gulp based workflow

You can add your own CSS and override the theme style in the `public/assets/css/user.css` file. You can update all theme colors including grays using css variables. If you change any color you have to assign it's corresponding rgb color. Sometimes you may need to update corresponding component's css variable too.

    /*-----------------------------------------------
    |   Theme Styles
    -----------------------------------------------*/
    :root,
    [data-bs-theme=light] {
      --falcon-primary:  #00d27a;
      --falcon-primary-rgb: 0, 210, 122;
      ...
      ...
      ...
      /* grays */
      --falcon-gray-100:  #f9fafd;
      --falcon-gray-100-rgb: 249, 250, 253;
    }
    [data-bs-theme=dark]{
      --falcon-primary:  #e63757;
      --falcon-primary-rgb: 230, 55, 87;

      .card{
        --falcon-card-bg: #00d27a;
      }
    }

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize