حالت تیره

تغییر حالت تیره در فالکون بدون دردسر است. شما می توانید حالت تیره را به طور پیش فرض فعال کنید یا در صورت تمایل یک سوئیچ Dark/Light ایجاد کنید. برای تنظیم حالت پیش‌فرض «تیره»، لطفاً صفحه پیکربندی را ببینید .

حالت تیره را تغییر دهید

تغییر حالت تیره در فالکون بسیار آسان است. می‌توانید با استفاده از کادر انتخاب، ورودی رادیویی، ورودی سوئیچ و مؤلفه نماد سفارشی، حالت تیره یا روشن را تغییر دهید.

چک باکس
سوئیچ ورودی
نماد سفارشی
کشویی
دکمه رادیویی
<div class="row">
  <div class="col">
    <h5 class="fs-0 mb-2">Checkbox </h5>
    <div class="form-check"><input class="form-check-input" id="flexCheckDefault" type="checkbox" data-theme-control="theme" /><label class="form-check-label" for="flexCheckDefault">Dark mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-0 mb-2">Switch Input</h5>
    <div class="form-check form-switch ps-0"><input class="form-check-input ms-0 me-2" id="switchDarkModeExample" type="checkbox" data-theme-control="theme" /><label for="switchDarkModeExample">Dark Mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-0 mb-2">Custom icon</h5>
    <div class="theme-control-toggle"><input class="form-check-input ms-0 theme-control-toggle-input" id="themeControlToggleExample" type="checkbox" data-theme-control="theme" value="dark" /><label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleExample"><span class="fas fa-sun fs-0"></span></label><label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleExample"><span class="fas fa-moon fs-0"></span></label></div>
  </div>
  <div class="col">
    <h5 class="fs-0 mb-2">Dropdown</h5>
    <div class="dropdown theme-control-dropdown font-sans-serif"><button class="btn btn-sm btn-falcon-default dropdown-toggle dropdown-caret-none" type="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust" data-theme-dropdown-toggle-icon="auto"></span></button>
      <div class="dropdown-menu dropdown-caret border py-0 mt-2" aria-labelledby="themeSwitchDropdown">
        <div class="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
      </div>
    </div>
  </div>
  <div class="col-12 mt-3">
    <h5 class="fs-0 mb-2">Radio button</h5>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault1" type="radio" value="light" data-theme-control="theme" /><label class="form-check-label" for="flexRadioDefault1">Light</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault2" type="radio" value="dark" data-theme-control="theme" /><label class="form-check-label" for="flexRadioDefault2">Dark</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault3" type="radio" value="auto" data-theme-control="theme" /><label class="form-check-label" for="flexRadioDefault3">Auto</label></div>
  </div>
</div>
حالت تیره را فعال کنید

data-bs-theme="dark" با افزودن ویژگی به عنصر ، حالت رنگ تیره ساخته شده را در کل پروژه خود فعال کنید <html> . این حالت رنگ تیره را برای همه اجزا و عناصر اعمال می کند، به غیر از مواردی که data-bs-theme ویژگی خاصی اعمال شده است.

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
اگر از گردش کار مبتنی بر gulp استفاده می کنید
رنگ های تیره را با استفاده از SCSS تغییر دهید

شما می توانید تمام متغیرهای مورد استفاده برای ایجاد حالت تیره را در /src/scss/theme/root/_dark.scssفایل پیدا کنید. اگر می خواهید متغیری را لغو کنید، آن متغیر را در /src/scss/theme/user.scssفایل خود کپی کنید و آن را به دلخواه به روز کنید. هنگامی که متغیر را با scss تغییر می دهید، مطمئن شوید که gulp در حال اجرا است.

اگر از گردش کار مبتنی بر gulp استفاده نمی کنید
رنگ های تیره را با استفاده از CSS تغییر دهید

می توانید تمام متغیرهای CSS مورد استفاده برای ایجاد حالت تیره را در /public/assets/css/theme.cssفایل پیدا کنید. جستجو کنید :root[data-bs-theme=dark]و همه متغیرهای موجود را مشاهده خواهید کرد. اگر می خواهید متغیری را لغو کنید، آن متغیر را در /public/assets/css/user.cssفایل خود کپی کنید و آن را به دلخواه به روز کنید.

/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
:root,
[data-bs-theme=light] {
  --falcon-gray-100: #f9fafd;
  --falcon-gray-100-rgb: 249, 250, 253;

  --falcon-gray-200: #edf2f9;
  --falcon-gray-200-rgb: 237, 242, 249;

  --falcon-gray-300: #d8e2ef;
  --falcon-gray-300-rgb: 237, 242, 249;
}

[data-bs-theme=dark] {
  --falcon-gray-100: #0b1727;
  --falcon-gray-100: 11, 23, 39;

  --falcon-gray-200: #232e3c;
  --falcon-gray-200: 35, 46, 60;

  --falcon-gray-300: #344050;
  --falcon-gray-300: 52, 64, 80;
}
استفاده از کلاس های Dark CSS در HTML
شما می توانید یک سبک را بدون توجه به حالت فعلی (روشن یا تیره) ثابت نگه دارید

اگر می خواهید یک جزء بدون توجه به حالت فعلی رنگ خود (روشن یا تیره) را حفظ کند، می توانید از ویژگی های زیر استفاده کنید:

data-bs-theme="light"- حتی اگر حالت فعلی تیره باشد، رنگ را روشن نگه می دارد

data-bs-theme="dark"- حتی اگر حالت فعلی روشن باشد، رنگ را تیره نگه می دارد

دو مثال زیر ماندگاری رنگ را نشان می دهد -

اگر بین حالت روشن و تیره جابجا شوید، این عنصر رنگ خود را حفظ می کند.

<div class="card bg-100" data-bs-theme="light">
  <div class="card-body">
    <p class="mb-0 text-700"><b>This element will retain it's color if you switch between light and dark mode.</b></p>
  </div>
</div>

اگر بین حالت روشن و تیره جابجا شوید، این عنصر رنگ خود را حفظ می کند.

<div class="card bg-100" data-bs-theme="dark">
  <div class="card-body">
    <p class="mb-0 text-700"><b>This element will retain it's color if you switch between light and dark mode.</b></p>
  </div>
</div>
رنگ پس‌زمینه و متن را فقط برای حالت تیره لغو کنید

اگر می‌خواهید از رنگ متن یا رنگ پس‌زمینه متفاوتی به جای رنگ تم تیره پیش‌فرض برای هر عنصری استفاده کنید، می‌توانید از کلاس‌های ویژه «تیره» استفاده کنید:

  • dark__bg-*
  • dark__text-*

عنصر زیر مثال را نشان می دهد:

اگر بین حالت روشن و تیره جابجا شوید، این عنصر رنگ خود را حفظ می کند.

<div class="card bg-light dark__bg-primary">
  <div class="card-body">
    <p class="mb-0"><span class="fw-bold">This element will retain it's color if you switch between light and dark mode.</span></p>
  </div>
</div>
رویداد جاوا اسکریپت را در تغییر طرح رنگ منتشر کنید

وقتی بین حالت تیره و روشن جابجا می‌شوید، یا تنظیماتی را از پیکربندی تم جهانی در زمان اجرا تغییر می‌دهید، رویدادی را منتشر می‌کنیم. clickControl
ما از این رویداد برای به‌روزرسانی رنگ‌ها با استفاده از جاوا اسکریپت استفاده کردیم. به عنوان مثال، نمودارها با استفاده از این رویداد رنگ خود را تغییر می دهند. با قطعه کد زیر می توانید این رویداد را بگیرید و از آن استفاده کنید:

const themeController = document.body;

themeController.addEventListener(
  "clickControl",
  ({ detail: { control, value } }) => {

    if (control === "theme") {
      console.log(value) // value will be localStorage theme value (dark/light)
      // your code here

    }
  }
);

ممنون که با فالکون خلق کردید

نسخه 3.18.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما
چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال
موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید

سبک ناوبری عمودی

برای ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی