پرش به مطلب اصلی

سفارشی‌سازی دیزاین

در پروژه‌های پیاده‌سازی شده با Doravel شما این امکان را دارید که رنگ‌های پروژه را مطابق با متغیرهای تعریف شده در فیگمای دیزاین پروژه سفارشی‌سازی کنید.

رنگ‌های تعریف شده​

primary​

نام رنگمقدارپیش‌نمایش
primary#5c2d91
primary-active#4a2475
primary-clarity-20#68409633
primary-light#f3f0f7

success​

نام رنگمقدارپیش‌نمایش
success#22c55e
success-active#15803d
success-clarity-20#22c55e33
success-light#f0fdf4

danger​

نام رنگمقدارپیش‌نمایش
danger#f8285a
danger-active#d81a48
danger-clarity-20#f8285a33
danger-light#ffeef3

info​

نام رنگمقدارپیش‌نمایش
info#1b84ff
info-active#056ee9
info-clarity-20#1b84ff33
info-light#eff6ff

info2​

نام رنگمقدارپیش‌نمایش
info-2#7239ea
info-2-active#5014d0
info-2-clarity-20#7239ea33
info-2-light#f8f5ff

warning​

نام رنگمقدارپیش‌نمایش
warning#f6b100
warning-active#dfa000
warning-clarity-20#f6b10033
warning-light#fff8dd

secondary​

نام رنگمقدارپیش‌نمایش
secondary#f9f9f9
secondary-active#f9f9f9
secondary-clarity-20#f9f9f933
secondary-light#f9f9f9

light​

نام رنگمقدارپیش‌نمایش
light#ffffff
light-active#fcfcfc
light-clarity-20#ffffff33
light-light#ffffff

dark​

نام رنگمقدارپیش‌نمایش
dark#1e2129
dark-active#111318
dark-clarity-20#1e212933
dark-light#f9f9f9

gray​

نام رنگمقدارپیش‌نمایش
gray-100#f9f9f9
gray-200#f1f1f4
gray-300#dbdfe9
gray-400#c4cada
gray-500#99a1b7
gray-600#78829d
gray-700#4b5675
gray-800#252f4a
gray-900#071437
gray-1000#1b1b28

سفارشی‌سازی رنگ‌ها مطابق با پروژه​

برای تغییر این رنگ‌ها در پروژه یک فایل css ایجاد کنید و مقادیر جدید را با همین نام در کد زیر override کنید. سپس فایل css را در بخش asset های پروژه قرار دهید تا رنگ‌ها در کل پروژه اعمال شوند.

توجه

ممکن است که در دیزاین پیاده‌سازی شده برای پروژه، متغیرهای رنگی خارج از این ساختار اضافه شده باشد. در صورت مشاهده، مورد را با تیم زیرساخت به اشتراک بگذارید.

کد CSS کامل​

:root,
[data-bs-theme="light"] {
    /*
    ==============================
    THEME COLOR DEFINITIONS
    bs-* are bootstrap colors
    x-* are custom colors
    ==============================
    */

    /* Primary */
    --bs-primary: #5c2d91;
    --bs-primary-active: #4a2475;
    --bs-primary-light: #f3f0f7;
    --x-primary-clarity-20: #68409633;

    /* Success */
    --bs-success: #22c55e;
    --bs-success-active: #15803d;
    --bs-success-light: #f0fdf4;
    --x-success-clarity-20: #22c55e33;

    /* Danger */
    --bs-danger: #f8285a;
    --bs-danger-active: #d81a48;
    --bs-danger-light: #ffeef3;
    --x-danger-clarity-20: #f8285a33;

    /* Info */
    --bs-info: #1b84ff;
    --bs-info-active: #056ee9;
    --bs-info-light: #eff6ff;
    --x-info-clarity-20: #1b84ff33;

    /* Info-2 */
    --x-info-2: #7239ea;
    --x-info-2-active: #5014d0;
    --bs-info-2-light: #f8f5ff;
    --x-info-2-clarity-20: #7239ea33;

    /* Warning */
    --bs-warning: #f6b100;
    --bs-warning-active: #dfa000;
    --bs-warning-light: #fff8dd;
    --x-warning-clarity-20: #f6b10033;

    /* Secondary */
    --bs-secondary: #f9f9f9;
    --bs-secondary-active: #f9f9f9;
    --bs-secondary-light: #f9f9f9;
    --x-secondary-clarity-20: #f9f9f933;

    /* Light */
    --bs-light: #ffffff;
    --bs-light-active: #fcfcfc;
    --x-light-clarity-20: #ffffff33;
    --x-light-light: #ffffff;

    /* Dark */
    --bs-dark: #1e2129;
    --bs-dark-active: #111318;
    --x-dark-clarity-20: #1e212933;
    --x-dark-light: #f9f9f9;

    /* Gray */
    --bs-gray-100: #f9f9f9;
    --bs-gray-200: #f1f1f4;
    --bs-gray-300: #dbdfe9;
    --bs-gray-400: #c4cada;
    --bs-gray-500: #99a1b7;
    --bs-gray-600: #78829d;
    --bs-gray-700: #4b5675;
    --bs-gray-800: #252f4a;
    --bs-gray-900: #071437;
    --bs-gray-1000: #1b1b28;
}