Тъмна тема в Kadence WordPress: Пълно ръководство стъпка по стъпка
Ако имаш WordPress сайт с темата Kadence и искаш да му направиш тъмен вид — това ръководство е за теб. Ще минем заедно през всяка настройка, точно като да седим до теб. Без технически жаргон, без предполагане, че знаеш неща.
💡 За кого е това ръководство? За хора, които използват WordPress с темата Kadence и искат тъмна тема. Не е нужно да знаеш програмиране — само следваш стъпките.
🌙 Защо тъмна тема?
Ако сайтът ти е насочен към техническа аудитория — хора, които работят с Linux, терминали, IDE-та — тъмната тема е почти очаквана. Тези хора прекарват по 8+ часа пред тъмни интерфейси и светъл сайт ги дразни.
Освен това тъмните теми изглеждат по-модерно и са по-приятни за четене при слаба светлина.
⚠️ Ако аудиторията ти е по-широка (баби, деца, обикновени потребители) — светлата тема е по-безопасен избор.
🎨 Стъпка 1: Глобална палитра (Global Palette)
Тук задаваш "речника" от цветове, който Kadence ще използва навсякъде. Представи си го като да избираш тубички боя преди да боядисаш стаята.
Как да стигнеш до настройката:
- WordPress Admin → Appearance → Customize
- General → Colors → Global Palette
- Горе вдясно ще видиш бутони: Palette 1, Palette 2, Palette 3
Има 4 секции: Accents, Contrast, Base и Notices. Ето какво означава всяка:
Accents — акцентни цветове (3 кръгчета)
Това са цветовете за бутони, линкове и интерактивни елементи. Palette 2 (средното кръгче) е ГЛАВНИЯТ акцент — той се използва за всички бутони по подразбиране.
| Кръгче | Hex код | За какво се използва |
|---|---|---|
| Palette 1 (ляво) | #1E3A5F | Hover на бутони |
| Palette 2 (средно) ⭐ | #2563EB | Основен акцент — бутони, линкове. НАЙ-ВАЖНОТО! |
| Palette 3 (дясно) | #2A2D35 | Граници, разделители |
💡 Кликни на всяко кръгче → отваря се color picker → въведи hex кода в полето долу (с #).
Contrast — цветове за текст (4 кръгчета)
Тези цветове се използват за текст върху различни фонове.
| Кръгче | Hex код | За какво се използва |
|---|---|---|
| Palette 1 | #E8EAF0 | Основен текст — заглавия, body текст |
| Palette 2 | #9FA2AB | Вторичен текст — дати, мета информация |
| Palette 3 | #2563EB | Текст на линкове в статии |
| Palette 4 | #7A7D86 | Приглушен текст — footer, бележки |
Base — фонови цветове (3 кръгчета)
Фоновете — от най-светлия елемент до тъмния фон на целия сайт.
| Кръгче | Hex код | За какво се използва |
|---|---|---|
| Palette 1 (ляво) | #1A1E2B | Карти, hero секции, sidebar |
| Palette 2 (средно) | #161A22 | Header, footer, card backgrounds |
| Palette 3 (дясно) ⭐ | #0F1117 | Body Background — фонът на целия сайт. НАЙ-ВАЖНОТО! |
Notices — статус цветове (5 кръгчета)
Използват се за success/error/warning съобщения и за тагове на категории.
| Кръгче | Hex код | За какво се използва |
|---|---|---|
| Palette 1 | #4ADE80 | Зелено — success, Linux тагове |
| Palette 2 | #1E3A5F | Тъмно синьо — info блокове |
| Palette 3 | #DC2626 | Червено — грешки |
| Palette 4 | #FB923C | Оранжево — предупреждения, Windows тагове |
| Palette 5 | #EAB308 | Жълто — важни бележки |
⚠️ След като въведеш всички цветове, натисни "Publish" горе вдясно. Без това промените не се запазват!
🧭 Стъпка 2: Цветове на навигацията
Честа грешка: Kadence взима акцентния цвят (синьото) и го слага навсякъде — включително в навигационното меню. Резултатът е ярко синьо меню, което "крещи".
Правилото е просто: синьото трябва да се появява САМО при активна страница или hover — не постоянно. Навигацията трябва да е сдържана, за да не се конкурира с реалното съдържание.
Как да стигнеш до настройката:
- Appearance → Customize → Header → Navigation
Цвят на навигацията (3 кръгчета):
| Кръгче | Hex код | Кога се използва |
|---|---|---|
| Кръгче 1 (нормален) | #C8CACD | Всеки линк — светло сиво, четимо но не крещящо |
| Кръгче 2 (hover) | #FFFFFF | При преминаване с мишката |
| Кръгче 3 (активен) | #5B9BF8 | Само за страницата, на която си в момента |
Фон на навигацията:
Остави и трите прозрачни (зачеркнати) — навигацията наследява фона на header-а автоматично.
Допълнително:
"Да направите ли родителски активния елемент от менюто?" → Включи го (toggle ON). Така когато четеш статия от категория "Линукс", тя ще свети в навигацията.
💡 Ако нещо изглежда странно след промяната — натисни Ctrl+Shift+Delete и изчисти кеша на браузъра.
📖
📂 Стъпка 3: Падащото меню (Dropdown)
Падащото меню се появява при hover на "Операционни системи", "Технологии" и т.н. Трябва да изглежда като продължение на тъмната тема — тъмен фон, светъл текст.
Как да стигнеш до настройката:
- Appearance → Customize → Header → Navigation → Dropdown
Цветове на падащото меню (3 кръгчета):
| Кръгче | Hex код | Кога се използва |
|---|---|---|
| Кръгче 1 (нормален текст) | #C8CACD | Нормален текст в dropdown |
| Кръгче 2 (hover текст) | #FFFFFF | При hover |
| Кръгче 3 (активен текст) | #5B9BF8 | Активен елемент |
Фон на падащото меню (3 кръгчета):
| Кръгче | Hex код | Кога се използва |
|---|---|---|
| Кръгче 1 (нормален фон) | #1A1E2B | Тъмен фон на dropdown-а |
| Кръгче 2 (hover фон) | #1E2330 | Незначително по-светъл при hover |
| Кръгче 3 (активен фон) | прозрачен | Остави зачеркнат |
Останали настройки в Dropdown:
- Разделител: цвят
#2A2D35, дебелина 1px - Радиус на рамката: 6px — за леко заоблени ъгли
- Шрифт: смени
600(bold) на400(normal) — dropdown текстът не трябва да е удебелен - Сянка: цвят #000000, opacity ~40%, Y: 2, Blur: 13 — тези стойности са добри
📋 Обобщение на всички цветове
Целият списък на едно място за бърза справка:
Глобална палитра:
Accents Palette 2: #2563EB ← главен акцент (бутони)
Accents Palette 1: #1E3A5F ← hover на бутони
Accents Palette 3: #2A2D35 ← граници
Contrast Palette 1: #E8EAF0 ← основен текст
Contrast Palette 2: #9FA2AB ← вторичен текст
Contrast Palette 3: #2563EB ← линкове в текст
Contrast Palette 4: #7A7D86 ← приглушен текст
Base Palette 1: #1A1E2B ← карти / hero фон
Base Palette 2: #161A22 ← header / footer фон
Base Palette 3: #0F1117 ← Body Background (целият сайт)
Notices Palette 1: #4ADE80 ← зелено (success)
Notices Palette 2: #1E3A5F ← синьо (info)
Notices Palette 3: #DC2626 ← червено (error)
Notices Palette 4: #FB923C ← оранжево (warning)
Notices Palette 5: #EAB308 ← жълто (notice)Навигация и Dropdown:
Текст нормален: #C8CACD
Текст hover: #FFFFFF
Текст активен: #5B9BF8
Dropdown фон: #1A1E2B
Dropdown hover фон: #1E2330🚫 Честите грешки
- Забравил си "Publish" → промените не се запазват. Винаги публикувай след промяна.
- Текстът е невидим → някой блок има хардкоднат цвят. Трябва да се намери и смени ръчно от Additional CSS или от блок настройките.
- Всичко е ярко синьо → Kadence е взел акцентния цвят навсякъде. Фиксира се от навигационните настройки (Стъпка 2).
- Dropdown изглежда странно → провери шрифта (трябва 400, не 600) и фона (трябва #1A1E2B).
- Промяната не се вижда → натисни Ctrl+Shift+Delete и изчисти кеша на браузъра.
Успех! 🚀 Ако нещо не се получи — питай в коментарите, ще помогна.
Намерихте материала за полезен?
Съдържанието на itpraktika.com е безплатно и ще остане такова.
Ако статията ти е помогнала — можеш да подкрепиш сайта с малка доброволна сума.
Всяко дарение помага за поддръжката и развитието на портала.