گردش کار مبتنی بر Gulp

اگر از جریان کار پایه gulp استفاده می کنید، می توانید رنگ های تم خود را با دو رویکرد مختلف به روز کنید.

1. استفاده از متغیر scss:

می‌توانید فرم رنگ‌های متغیر مورد نیاز خود را بیاورید src/scss/theme/_colors.scss و آن را src/scss/_user-variables.scss به عنوان نیاز خود در متغیرها به‌روزرسانی کنید. توصیه می کنیم این رویکرد را دنبال کنید.

حالت نور، سبک تم پیش‌فرض در فالکون است. بنابراین، اگر متغیرهای SCSS بوت استرپ را به‌روزرسانی کنید، در حالت نور تأثیر می‌گذارد. اگر می خواهید هر رنگی را به روز کنید، متغیر مربوطه را برای این رنگ پیدا کنید و موضوع را در فایل _user-variables.scss قرار دهید. مثلا:

//*-----------------------------------------------
//|   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;

اگر می خواهید هر رنگ تم را برای حالت تاریک به روز کنید، $theme-dark-colors متغیر را به روز کنید و برای به روز رسانی رنگ های خاکستری باید $dark-grays متغیر را به روز کنید.

/*-----------------------------------------------
|   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. استفاده از متغیر CSS:

برای به روز رسانی رنگ تم با این روش، باید متغیر CSS را برای هر دو حالت به روز کنید. اگر رنگی را تغییر دهید، باید رنگ RGB مربوطه را نیز به آن اختصاص دهید. لطفاً توجه داشته باشید که گاهی اوقات ممکن است لازم باشد متغیر CSS مؤلفه مربوطه را به روز کنید. مثلا:

/*-----------------------------------------------
|   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};
    }
  }
}

اگر از گردش کار مبتنی بر Gulp استفاده نمی کنید

می توانید CSS خود را اضافه کنید و سبک تم را در public/assets/css/user.css فایل لغو کنید. می توانید تمام رنگ های تم از جمله خاکستری را با استفاده از متغیرهای css به روز کنید. اگر رنگی را تغییر دهید، باید رنگ rgb مربوطه را به آن اختصاص دهید. گاهی اوقات ممکن است لازم باشد متغیر css مؤلفه مربوطه را نیز به روز کنید.

/*-----------------------------------------------
|   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;
  }
}