# پیکربندی تم

رنگ های متنی پیش فرض برنامه خود ، سطوح و موارد دیگر را سفارشی کنید. موضوع خود را به راحتی در زمان واقعی تغییر دهید. Vuetify با پشتیبانی استاندارد برای انواع نور و تاریک همراه است.

# API

# برپایی

Vuetify با دو موضوع از پیش نصب شده ، سبک و تاریک همراه است. برای تنظیم موضوع پیش فرض برنامه خود ، از گزینه DefaultTheme استفاده کنید.

# جاوا اسکریپت

مثال فقط با مقدار پیش فرض

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن پیش فرض ایجاد کردن( موضوع:  پیش فرض: "تاریک" > >) 

اضافه کردن مضامین جدید به آسانی تعریف یک ویژگی جدید در موضوع. themes. موضوع مجموعه ای از رنگ ها و گزینه ها است که ظاهر و احساس کلی برنامه شما را تغییر می دهد. یکی از این گزینه ها موضوع را به عنوان یک تغییر سبک یا تاریک نشان می دهد. این امر باعث می شود که Vuetify بتواند مفاهیم طراحی مواد مانند سطوح مرتفع را که دارای رنگ روکش سبک تر هستند ، بیشتر کند. اطلاعات بیشتر در مورد مضامین تاریک در مورد طراحی مواد رسمی

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن,مضمون> از جانب 'vuetify' محاصره کردنمبهم=  تاریک: دروغ, رنگ:  زمینه: '#ffffff', سطح: '#ffffff', اولیه: '#6200ee', 'Primary-Darken-1': "#3700B3", ثانوی: '#03DAC6', 'Secondary-Darken-1': '#018786', خطا: '#B00020', اطلاعات: '#2196f3', موفقیت: '#4CAF50', هشدار: '#fb8c00', > > صادر کردن پیش فرض ایجاد کردن( موضوع:  پیش فرض: 'mycustomlighttheme', مضامین: مبهم, > > >) 

# متن

مثال فقط با مقدار پیش فرض

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن پیش فرض ایجاد کردن(موضوع: پیش فرض: "تاریک" > >) 

هنگام استفاده از TypeScript ممکن است از نوع ThemedEfinition استفاده کنید تا نکات نوع را برای ساختار شیء موضوع بدست آورید.

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن,مضمون> از جانب 'vuetify' محاصره کردنمبهم:مضمون= تاریک: دروغ,رنگ: زمینه: '#ffffff',سطح: '#ffffff',اولیه: '#6200ee', 'Primary-Darken-1': "#3700B3",ثانوی: '#03DAC6', 'Secondary-Darken-1': '#018786',خطا: '#B00020',اطلاعات: '#2196f3',موفقیت: '#4CAF50',هشدار: '#fb8c00', > > صادر کردن پیش فرض ایجاد کردن(موضوع: پیش فرض: 'mycustomlighttheme',مضامین: مبهم, > > >) 

# تم تغییر

این مورد هنگامی استفاده می شود که شما نیاز به تغییر موضوع در طول زمان اجرا دارید

قالب> V-APP> V-BTN @کلیک="ضمنی">تم کردن موضوعV-BTN> . V-APP> قالب> فیلمنامه> وارد كردن با استفاده از> از جانب 'vuetify' صادر کردن پیش فرض  برپایی ()  محاصره کردنموضوع= با استفاده از() برگشت موضوع, ضمنی: () =>موضوع.جهانی.نام.ارزش=موضوع.جهانی.جاری.ارزش.تاریک? 'سبک' : "تاریک" > > > فیلمنامه> 

باید در نظر داشته باشید که بیشتر مؤلفه های Vuetify از موضوع موضوع پشتیبانی می کنند. هنگام استفاده از زمینه جدید برای آن مؤلفه خاص و همه فرزندان آن ایجاد می شود. در مثال زیر ، V-BTN

از موضوع تاریک استفاده می کند زیرا در کارت V والدین آن اعمال می شود

قالب> V-APP> V-mard موضوع="تاریک"> V-BTN>فحشV-BTN> V-mard> V-APP> قالب> 

شما می توانید از این مؤلفه استفاده کنید تا به صورت پویا مضامین مختلف را در بخش های بزرگتر برنامه خود اعمال کنید ، بدون اینکه بخواهید موضوع را بر روی هر مؤلفه جداگانه تنظیم کنید. در مثال زیر ، ما یک موضوع سفارشی به نام High-Contrast را اعمال می کنیم.

قالب> V-APP> V-mard>. V-mard> نماینده V موضوع="کنتراست بالا"> V-mard>. V-mard> V-BTN>. V-BTN> نماینده V> V-APP> قالب> 

# رنگ تمهای سفارشی

سیستم موضوع Vuetify از اضافه کردن رنگ های سفارشی پشتیبانی می کند. هنگام پیکربندی تنظیمات موضوع Vuetify ، رنگ های سفارشی خود را به Object Colors اضافه کنید و Vuetify تعدادی کلاس و متغیرهای CSS را برای استفاده در برنامه خود ایجاد می کند.

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن پیش فرض ایجاد کردن( موضوع:  پیش فرض: "mycustomtheme", مضامین:  همتای:  تاریک: دروغ, رنگ:  . , // ما برای تأکید بر سفارشی که اضافه کرده ایم ، ویژگی های رنگ استاندارد را در اینجا حذف کرده ایم چیزی: '#00ff00' > > > > >) 

خواص سفارشی برای رنگ ها لیستی از قرمز ، سبز ، آبی است ، بنابراین باید از عملکرد RGB () یا RGBA () استفاده شود:

قالب> قسمت طبقه="bg-on-on-on-some">رنگ پس زمینه با کنتراست رنگ متن مناسبقسمت> قسمت طبقه="متن-چیزی">رنگ متنقسمت> قسمت طبقه="مرزی">رنگ لبهقسمت> قالب> سبک> کلاس کلاس  زمینه: RGB(قارچ(-v-theme-the-them)) رنگ: RGBA(قارچ(-v-theme-on-them),0. 9) > سبک> 

# تغییرات رنگ

سیستم موضوع Vuetify می تواند به شما در ایجاد تعداد تغییرات برای رنگ های موضوع خود کمک کند. مثال زیر نحوه تولید 1 نوع سبک و 2 تیره برای رنگهای اولیه و ثانویه را نشان می دهد.

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن پیش فرض ایجاد کردن( موضوع:  پیش فرض: "mycustomtheme", تغییرات:  رنگ: ['اولیه', 'ثانوی'], روشن کردن: 1, تاریک کردن: 2, >, مضامین:  . > > >) 

قالب> قسمت طبقه="متن-تقلید-لایت ن-1">رنگ متنقسمت> قسمت طبقه="Text-Primary-Darken-1">رنگ متنقسمت> قسمت طبقه="Text-Primary-Darken-2">رنگ متنقسمت> قالب> 

# موضوع غیرفعال کردن

عملکرد موضوع را می توان با تنظیم ویژگی پیکربندی موضوع به False غیرفعال کرد. این امر مانع از ایجاد صفحه شیوه Vuetify می شود و کلاس های موضوعی برای مؤلفه ها اعمال نمی شود.

وارد كردن CreateApp> از جانب 'vue' وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن پیش فرض ایجاد کردن( موضوع: دروغ, >) 

# ساختار شیء تم

رابط مباحث  /** * اشیاء تم خام * برای افزودن مضامین جدید یا به روزرسانی رنگهای موجود می توان جهش داد */مضامین:مرجع [نام: رشته]:مضمون>> /** * نام موضوع فعلی * به ارث رسیده از مؤلفه های والدین */ فقط خواندنینام:مرجعرشته> /** شیء موضوع پردازش شده ، شامل رنگهای تولید شده به طور خودکار*// فقط خواندنیجاری:مرجعمضمون> فقط خواندنیمحاسبه:مرجع [نام: رشته]:مضمون>> فقط خواندنیجهانی:  /** نام موضوع جهانی فعلی*/نام:مرجعرشته> /** * موضوع موضوع پردازش شده از موضوع جهانی فعلی * معادل `theme. computedthemes. value [theme. global. name. value]` */ فقط خواندنیجاری:مرجعمضمون> > > 

# CSP غیرقانونی

صفحات با قوانین Script-Src یا Style-SRC CSP فعال شده ممکن است نیاز به عدم وجود برای برچسب های سبک تعبیه شده داشته باشد.

محتوای امنیتی-سیاست: Script-Src 'self' 'nonce-dqw4w9wgxcq' Content-Security-Policy: Style-Src 'self' 'nonce-dqw4w9wgxcq' 

// src/plugins/vuetify. js وارد كردن ایجاد کردن> از جانب 'vuetify' صادر کردن محاصره کردندزدی کردن= ایجاد کردن(موضوع: سرود: 'DQW4W9WGXCQ' > >) 

# پیاده سازی

Vuetify مطابق پیکربندی داده شده ، سبک های تم را در زمان اجرا ایجاد می کند. سبک های تولید شده در یک بخش DOM در یک برچسب با شناسه Vuetify-theme-Style-stylet به بخش DOM تزریق می شوند.

برای اطلاعات بیشتر آماده هستید؟

یادگیری خود را با محتوای مرتبط انتخاب شده توسط تیم ادامه دهید

یا با استفاده از پیوندهای ناوبری زیر بین صفحات حرکت کنید.