Cirth HujjatlarCirth Hujjatlar

Mavzular va moslashtirish

Hujjatlaringiz ko'rinishini mavzular va brending opsiyalari bilan moslashtiring.

Yangilangan 1/24/2026
Muallif

Cirth-ning mavzular tizimi yordamida hujjatlaringizni brendingizga moslashtiring. Tayyor mavzulardan birini tanlang yoki o'zligingizga mos ranglarni sozlang.

Mavzuni tanlash

Tayyor mavzular

Cirth bir nechta professional tarzda ishlab chiqilgan mavzularni taklif etadi:

  1. Loyiha sozlamalari > Tashqi ko'rinish (Appearance) bo'limiga o'ting

  2. Mavjud mavzularni ko'zdan kechiring

  3. Ko'rish uchun bosing

  4. Mavzuni qo'llash (Apply Theme) tugmasini tanlang

Mavzuni ko'zdan kechirish (Preview)

Qo'llashdan oldin siz quyidagilarni amalga oshirishingiz mumkin:

  • Yorug' va qorong'u rejimdagi ranglarni ko'rish

  • Tipografiya tanlovlarini tekshirish

  • Kod bloklari uslubini ko'rish

Mavzu komponentlari

Har bir mavzu quyidagilarni belgilaydi:

Ranglar

O'zgaruvchi

Foydalanish

Asosiy (Primary)

Havolalar, tugmalar, urg'ular

Orqa fon (Background)

Sahifa foni

Old fon (Foreground)

Asosiy matn rangi

Xira (Muted)

Ikkinchi darajali matn, chegaralar

Karta (Card)

Karta fonlari

Urg'u (Accent)

Ajratib ko'rsatish, hover holatlari

Tipografiya

  • Shrift oilasi - O'qish qulayligi uchun sans-serif

  • Sarlavha vazni - Ierarxiya uchun qalin

  • Kod shrifti - Kod bloklari uchun monospace

Qorong'u rejim

Barcha mavzular qorong'u rejim variantlarini o'z ichiga oladi:

  • Tizim afzalliklariga qarab avtomatik aniqlash

  • O'quvchilar uchun qo'lda almashtirish imkoniyati

  • Har bir rejim uchun optimallashtirilgan ranglar

Brending opsiyalari

Logotip

Hujjatlar sarlavhasiga logotipingizni qo'shing:

  1. Loyiha sozlamalari > Brending bo'limiga o'ting

  2. Logotip rasmini yuklang

  3. Tavsiya etiladi: shaffoflikka ega 200x200px PNG

Logotipingiz quyidagi joylarda ko'rinadi:

  • Hujjatlar sarlavhasi

  • Brauzer tabi (favicon sifatida)

  • Ijtimoiy tarmoqlardagi prevyu

Favicon

Brauzer tabidagi belgini moslashtiring:

  1. Favicon rasmini yuklang

  2. Qo'llab-quvvatlanadigan formatlar: ICO, PNG

  3. Tavsiya etiladi: 32x32px

Loyiha ranglari

Brendingiz uchun mavzu ranglarini o'zgartiring:

  1. Maxsus ranglar (Custom Colors) ni tanlang

  2. Asosiy brend rangingizni o'rnating

  3. Ikkinchi darajali ranglar avtomatik ravishda yaratiladi

Yorug' va qorong'u rejim

Bu qanday ishlaydi

O'quvchilar o'zlariga ma'qul rejimni tanlashlari mumkin:

  • Tizim (System) - Operatsion tizim sozlamalariga amal qiladi

  • Yorug' (Light) - Har doim yorug' mavzu

  • Qorong'u (Dark) - Har doim qorong'u mavzu

Ikkala rejim uchun loyihalash

Ikkala rejimda ham yaxshi ko'rinadigan kontent uchun maslahatlar:

  1. Sof qora/oq rangdan qoching - To'q kulrang va ochiq oq ranglardan foydalaning

  2. Rasmlarni tekshiring - Ularning ikkala rejimda ham ko'rinishiga ishonch hosil qiling

  3. Mavzu ranglaridan foydalaning - Ular avtomatik ravishda moslashadi

Kod bloki mavzulari

Kod sintaksisini yoritish rejimga qarab moslashadi:

  • Yorug' rejim: Yorug' fon, to'q sintaksis

  • Qorong'u rejim: To'q fon, yorqin sintaksis

Maxsus CSS (Murakkab)

Chuqurroq moslashtirish uchun siz maxsus CSS qo'shishingiz mumkin:

      
css
/* Hujjatlaringiz uchun maxsus uslublar */ .prose h2 { border-bottom: 2px solid var(--primary); } .prose code { background: var(--muted); padding: 0.2em 0.4em; border-radius: 4px; }

Mavjud CSS o'zgaruvchilari

      
css
:root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; }

Eng yaxshi amaliyotlar

Barqarorlik

  • Barcha versiyalarda bir xil mavzudan foydalaning

  • Hujjatlarni asosiy veb-saytingizga moslashtiring

  • Brend elementlarini barqaror saqlang

Kirish imkoniyati (Accessibility)

  • Ranglar kontrasti yetarli ekanligiga ishonch hosil qiling

  • Daltonizm simulyatorlari bilan tekshiring

  • Ma'noni faqat rang orqali yetkazishga tayanmang

Unumdorlik

  • Logotip rasmlarini optimallashtiring (PNG-ni siqing)

  • Iloji bo'lsa, logotiplar uchun SVG-dan foydalaning

  • Og'ir maxsus CSS-dan qoching

Muammolarni bartaraf etish

Mavzu qo'llanmayapti

  • Brauzer keshini tozalang

  • Maxsus CSS mavjud uslublarni bekor qilmayotganini tekshiring

  • Boshqa brauzerda urinib ko'ring

Logotip ko'rinmayapti

  • Rasm formatini tekshiring (PNG, JPG, SVG)

  • Fayl hajmini tekshiring (1MB dan kam)

  • URL-ga kirish imkoni borligini tekshiring

Qorong'u rejim muammolari

  • O'zgarishlardan keyin ikkala rejimni ham tekshiring

  • Kontentda qat'iy belgilangan (hardcoded) ranglarni tekshiring

  • Rasmlar ikkala rejimda ham ishlashini tasdiqlang