Создание тем для FgSNotes
FgSNotes поддерживает кастомные темы, которые позволяют полностью изменить внешний вид редактора. Темы создаются с помощью CSS и используют систему CSS переменных для легкой настройки цветов и стилей.
💡 Совет: Перед созданием собственной темы изучите существующие темы в папке
themes/ для понимания структуры и возможностей.
Структура темы
Каждая тема представляет собой CSS файл с определенной структурой. Файл должен содержать:
- CSS переменные - для определения цветовой палитры
- Базовые стили - для основных элементов интерфейса
- Стили компонентов - для кнопок, панелей, редактора
- Стили Markdown - для отображения контента
Базовый шаблон темы
:root {
/* Основные цвета */
--bg-color: #ffffff;
--text-color: #333333;
--card-bg: #f8f9fa;
--border-color: #dee2e6;
/* Акцентные цвета */
--accent-color: #007bff;
--primary: #007bff;
/* Дополнительные цвета */
--hover-color: #e9ecef;
--sidebar-color: #f8f9fa;
--header-bg: #f8f9fa;
/* Цвета для Markdown */
--md-red: #dc3545;
--md-green: #28a745;
--md-blue: #007bff;
--md-yellow: #ffc107;
--md-purple: #6f42c1;
--md-cyan: #17a2b8;
}
/* Базовые стили */
body {
background: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
}
/* Стили компонентов */
.sidebar-toolbar {
background: var(--sidebar-color);
}
#markdown-editor {
background: var(--card-bg);
color: var(--text-color);
}
/* Стили Markdown */
.preview-content h1,
.preview-content h2,
.preview-content h3 {
color: var(--md-blue);
}
.preview-content code {
background: var(--card-bg);
color: var(--md-red);
}
CSS переменные
CSS переменные определяют цветовую палитру и основные параметры темы. Все переменные должны быть определены в блоке :root.
Основные переменные
--bg-color
#ffffff
Основной фон
--text-color
#333333
Основной текст
--card-bg
#f8f9fa
Фон карточек
--accent-color
#007bff
Акцентный цвет
Полный список переменных
:root {
/* Основные цвета */
--bg-color: #ffffff; /* Основной фон */
--text-color: #333333; /* Основной текст */
--card-bg: #f8f9fa; /* Фон карточек */
--border-color: #dee2e6; /* Цвет границ */
--hover-color: #e9ecef; /* Цвет при наведении */
/* Акцентные цвета */
--accent-color: #007bff; /* Основной акцент */
--primary: #007bff; /* Основной цвет */
--link-color: #007bff; /* Цвет ссылок */
/* Компоненты */
--sidebar-color: #f8f9fa; /* Фон боковой панели */
--header-bg: #f8f9fa; /* Фон заголовка */
--active-bg: #007bff; /* Активный элемент */
--code-bg: #f8f9fa; /* Фон кода */
/* Тени и эффекты */
--shadow-color: rgba(0, 0, 0, 0.1);
--text-muted: #6c757d; /* Приглушенный текст */
/* Цвета для Markdown */
--md-red: #dc3545; /* Красный */
--md-green: #28a745; /* Зеленый */
--md-blue: #007bff; /* Синий */
--md-yellow: #ffc107; /* Желтый */
--md-purple: #6f42c1; /* Фиолетовый */
--md-cyan: #17a2b8; /* Голубой */
}
Компоненты интерфейса
Каждый компонент интерфейса имеет свои CSS селекторы. Вот основные компоненты, которые можно стилизовать:
Основные селекторы
/* Боковая панель */
.sidebar-toolbar {
background: var(--sidebar-color);
}
/* Заголовок с вкладками */
.tab-bar,
.editor-label {
background: var(--header-bg);
border-bottom: 1px solid var(--border-color);
}
/* Активная вкладка */
.tab-item.active {
background: var(--card-bg);
border-color: var(--accent-color);
}
/* Редактор */
#markdown-editor,
.preview-content {
background: var(--card-bg);
color: var(--text-color);
}
/* Панель инструментов */
.editor-tools {
background: var(--card-bg);
border: 1px solid var(--border-color);
}
/* Группы инструментов */
.tool-group {
background: var(--bg-color);
border: 1px solid var(--border-color);
}
/* Кнопки */
.tool-button:hover,
.sidebar-button:hover,
.new-tab-button:hover,
.close-tab:hover {
background: var(--hover-color);
color: var(--accent-color);
}
/* Разделители панелей */
.panel-divider {
background: var(--border-color);
}
.panel-divider:hover,
.panel-divider.dragging {
background: var(--accent-color);
}
Стили Markdown
Стили для отображения Markdown контента определяют, как будет выглядеть предпросмотр документа.
Заголовки
.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content h4,
.preview-content h5,
.preview-content h6 {
color: var(--md-green);
font-weight: 600;
}
Код и блоки кода
.preview-content pre {
background: var(--code-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 15px;
overflow-x: auto;
}
.preview-content code {
background: var(--code-bg);
color: var(--md-red);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
Цитаты и ссылки
.preview-content blockquote {
border-left: 4px solid var(--md-yellow);
background: var(--card-bg);
color: var(--text-muted);
padding: 10px 15px;
margin: 15px 0;
}
.preview-content a {
color: var(--link-color);
text-decoration: none;
}
.preview-content a:hover {
text-decoration: underline;
}
Создание темы
Пошаговое руководство по созданию собственной темы:
Шаг 1: Создание файла
- Создайте новый CSS файл в папке
themes/ - Назовите файл по схеме:
your-theme-name.css - Используйте только латинские буквы, цифры и дефисы
Шаг 2: Определение переменных
Начните с определения CSS переменных в блоке :root:
:root {
/* Определите вашу цветовую палитру */
--bg-color: #your-background-color;
--text-color: #your-text-color;
--accent-color: #your-accent-color;
/* ... остальные переменные */
}
Шаг 3: Базовые стили
Добавьте базовые стили для body и основных элементов:
body {
background: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
}
Шаг 4: Стили компонентов
Добавьте стили для всех компонентов интерфейса, используя селекторы из раздела "Компоненты интерфейса".
Шаг 5: Стили Markdown
Добавьте стили для отображения Markdown контента, используя селекторы из раздела "Стили Markdown".
Тестирование темы
После создания темы важно протестировать её на различных типах контента:
- Заголовки - все уровни h1-h6
- Текст - обычный текст, жирный, курсив
- Списки - маркированные и нумерованные
- Код - inline код и блоки кода
- Ссылки - обычные и с якорями
- Изображения - с подписями и без
- Таблицы - простые и сложные
- Цитаты - вложенные цитаты
⚠️ Важно: Убедитесь, что ваша тема хорошо работает как в светлом, так и в темном режиме (если поддерживается).
Публикация темы
После создания и тестирования темы вы можете поделиться ею с сообществом:
Подготовка к публикации
- Убедитесь, что тема полностью протестирована
- Добавьте комментарии к CSS коду
- Создайте превью темы (скриншот)
- Подготовьте описание темы
Добавление в магазин тем
Чтобы добавить тему в магазин тем:
- Создайте запись в файле
themes-data.json - Добавьте метаданные темы (название, описание, автор)
- Создайте превью для карточки темы
- Укажите категорию и теги
💡 Совет: Изучите существующие записи в
themes-data.json для понимания структуры метаданных.
Примеры тем
Изучите существующие темы для вдохновения и понимания различных подходов:
Светлые темы
- Solar Light - чистая светлая тема с мягкими тенями
- Paper - тема в стиле бумаги с теплыми оттенками
- Zen - минималистичная тема для концентрации
Темные темы
- Midnight Pro - элегантная темная тема с синими акцентами
- Carbon - техническая тема в стиле углеродного волокна
- Ocean Deep - глубокая синяя тема, вдохновленная океаном
Градиентные темы
- Aurora - красочная тема с эффектом северного сияния
- Sunset Glow - теплая тема с закатными красками
Пример простой темы
Вот пример минималистичной темы:
:root {
--bg-color: #fafafa;
--text-color: #333333;
--card-bg: #ffffff;
--border-color: #e0e0e0;
--accent-color: #2196f3;
--sidebar-color: #f5f5f5;
--header-bg: #f5f5f5;
--hover-color: #f0f0f0;
--code-bg: #f8f9fa;
--text-muted: #666666;
--md-red: #f44336;
--md-green: #4caf50;
--md-blue: #2196f3;
--md-yellow: #ff9800;
--md-purple: #9c27b0;
--md-cyan: #00bcd4;
}
body {
background: var(--bg-color);
color: var(--text-color);
font-family: 'Inter', sans-serif;
}
.sidebar-toolbar {
background: var(--sidebar-color);
}
.tab-bar,
.editor-label {
background: var(--header-bg);
border-bottom: 1px solid var(--border-color);
}
.tab-item.active {
background: var(--card-bg);
border-color: var(--accent-color);
}
#markdown-editor,
.preview-content {
background: var(--card-bg);
color: var(--text-color);
}
.preview-content h1,
.preview-content h2,
.preview-content h3 {
color: var(--md-blue);
}
.preview-content code {
background: var(--code-bg);
color: var(--md-red);
}