Шаги для настройки цветов
- Создайте файл CSS для кастомизации цветов: • Создайте файл theme-vars-override.css в директории assets/css/extended/ вашего проекта Hugo.
- Добавьте кастомные цвета: • В этот файл можно добавить CSS переменные для настройки различных элементов темы. Пример кода:
theme-vars-override.css
:root {
--theme: #ffffff; /* Основной фон */
--entry: #f0f0f0; /* Вторичный фон */
--primary: #007bff; /* Основной цвет */
--secondary: #6c757d; /* Дополнительный цвет */
--tertiary: #e9ecef; /* Третичный цвет */
--content: #212529; /* Цвет текста */
--hljs-bg: #1e1e1e; /* Фон для подсветки синтаксиса */
--code-bg: #f8f9fa; /* Фон для кода */
--border: #dee2e6; /* Цвет границ */
}
.dark {
--theme: #343a40; /* Темный фон */
--entry: #495057; /* Вторичный темный фон */
--primary: #adb5bd; /* Основной цвет для темной темы */
--secondary: #6c757d; /* Дополнительный цвет для темной темы */
--tertiary: #ced4da; /* Третичный цвет для темной темы */
--content: #f8f9fa; /* Цвет текста для темной темы */
--hljs-bg: #2e2e33; /* Фон для подсветки синтаксиса в темной теме */
--code-bg: #37383e; /* Фон для кода в темной теме */
--border: #495057; /* Цвет границ для темной темы */
}
Для создания гармоничных цветовых схем можно использовать онлайн-инструменты, такие как:
• Coolors: Coolors.co • Adobe Color: Adobe Color • Paletton: Paletton • Color Hunt: Color Hunt
theme-vars-override.css
.latte {
--color-bg: #eff1f5;
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-tertiary: #ccd0da;
--color-text: #4c4f69;
--color-hljs-bg: #e6e9ef;
--color-code-bg: #f5f5f5;
--color-border: #dee2e6;
/* Подсветка синтаксиса */
--color-syntax-bg: #ffffff;
--color-syntax-text: #4c4f69;
--color-syntax-keyword: #007bff;
--color-syntax-string: #a6d189;
--color-syntax-function: #1e66f5;
--color-syntax-comment: #7c7f93;
--color-syntax-variable: #ca9ee6;
}
.frappe {
--color-bg: #303446;
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-tertiary: #414559;
--color-text: #c6d0f5;
--color-hljs-bg: #292c3c;
--color-code-bg: #37383e;
--color-border: #495057;
/* Подсветка синтаксиса */
--color-syntax-bg: #303446;
--color-syntax-text: #c6d0f5;
--color-syntax-keyword: #8caaee;
--color-syntax-string: #a6d189;
--color-syntax-function: #85c1dc;
--color-syntax-comment: #737994;
--color-syntax-variable: #f5a97f;
}
.macchiato {
--color-bg: #303446;
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-tertiary: #414559;
--color-text: #c6d0f5;
--color-hljs-bg: #292c3c;
--color-code-bg: #37383e;
--color-border: #495057;
/* Подсветка синтаксиса */
--color-syntax-bg: #303446;
--color-syntax-text: #c6d0f5;
--color-syntax-keyword: #ca9ee6;
--color-syntax-string: #a6d189;
--color-syntax-function: #8caaee;
--color-syntax-comment: #737994;
--color-syntax-variable: #f5a97f;
}
.mocha {
--color-bg: #303446;
--color-primary: #007bff;
--color-secondary: #6c757d;
--color-tertiary: #414559;
--color-text: #c6d0f5;
--color-hljs-bg: #292c3c;
--color-code-bg: #37383e;
--color-border: #495057;
/* Подсветка синтаксиса */
--color-syntax-bg: #303446;
--color-syntax-text: #c6d0f5;
--color-syntax-keyword: #8caaee;
--color-syntax-string: #a6d189;
--color-syntax-function: #85c1dc;
--color-syntax-comment: #737994;
--color-syntax-variable: #f5a97f;
}
Для каждой палитры (Latte, Frappé, Macchiato, Mocha) адаптируем CSS с цветами для Hugo PaperMod. Вот пример:
[markup]
[markup.highlight]
noClasses = false
style = "monokai" # Здесь вы можете указать стиль подсветки, например, "monokai"
lineNoStart = 1
lineNos = true
lineNumbersInTable = true