Создание темы или цветовой схемы

Этот гайд будет актуален после релиза Meridius 29. Но вы можете подготовиться уже сейчас.

Привет. Добро пожаловать в обучающий модуль по созданию тем или цветовых схем для Meridius. Если ты не знаешь что такое CSS, как объявлять переменные или как работать с инструментами разработчика, то для начала ознакомься с этой теоретической частью, а потом возвращайся сюда.

Итак, на самом деле создать кастомную тему для Meridius очень легко. Нет никакой магии, Meridius динамически подгружает ваш файл с темой, поэтому применимы любые CSS свойства, но не всё можно кастомизировать. Ниже приведён пример того, что можно, а что не получится кастомизировать.

Можно:

✅ Цвета приложения
✅ Шрифты
✅ Мелкие исправления

Скорее всего не получится:

❌ Макет приложения
❌ Иконки в приложении

Основные положения:

1. Ваша тема или ваш патч полностью под вашей ответственностью. Если собираетесь делиться своей темой с другими, то обязательно укажите ссылку на страницу VK или Telegram в манифесте, чтобы с вами можно было связаться.

2. Meridius проверяет актуальность темы. Все темы, кроме встроенных, считаются неактуальными каждый минорный патч.

3. Вы можете создать ветку на канале с темами со своей темой, чтобы поделиться ею с другими. Но следите за обновлениями приложения и изменяйте регулярно поле 'compatibility' в манифесте и саму тему, загружайте обновлённую версию своей темы в свою ветку на нашем Discord канале.

4. Ветки, владельцы которых не обновляют свои темы в течение 3 минорных патчей будут удалены.

5. Не нужно писать разработчку, чтобы он что-то подстроил (например, макет приложения) под вашу тему. Ваша тема - ваша забота.

Начинаем

1. Сделай форк этого репозитория (Необходим скилл работы с GitHub)
2. Перейди в папку с темами (ПапкаКонфигурации/themes), создай в ней папку будущей темы, чтобы она не содержала была похожа на ID, без пробелов и специальных символов, вроде иероглифов и знаков препинания (например, my-super-theme).
3. Скопируй файлы из репозитория в созданную папку.
4. Редактируй на своё усмотрение.

Структура

Два файла описанных ниже обязаны быть в папке с темой.

manifest.json - файл манифеста, который необходимо заполнить.

main.css - основной подключаемый файл стилей. Туда можно писать любые стили.

Манифест

Файл манифеста - это сердце темы. Он содержит информацию о версии темы и благодаря ему проверяется актуальность темы. Его необходимо заполнить перед тем, как начинать делать тему.

{
	"version": "1.0.0", // Версия темы
	"compatibility": "2.9.0", // Версия Meridius

	"id": "mytheme", // ID темы, должен совпадать с именем папки"
	"description": "Описание моей темы", // Опционально. Описание темы

    "repository": { // Необходимо заполнить, чтобы у пользователей, которые будут пользоваться вашей темой работало автоматическое обновление темы
        "username": "TopDesignerInTheWorld", // Имя владельца на GitHub
        "name": "mytheme", // Репозиторий на GitHub
        "branch": "main" // Ветка в репозитории
    },

	"modules": [], // Массив путей для модулей. Дополнительные файлы стилей, включаемые при инциализации. Рекомендуется включать модули именно здесь (для них будет работать Hot Reloading и обновления)

	"accent": { // Акценты
        "primary": "#141414", // Первичный цвет
        "secondary": "#E9003F" // Вторичный цвет
    },

    "variables": { // Кастомные переменные. Указав их здесь, вы даёте пользователям вашей темы редактировать их в редакторе цветовой схемы
        "my-variable": {
            "value": "#131313", // Значение переменной
            "name": { // Локализованное имя переменной в удобном для чтения формате. Принимаются только языки, которые есть в приложении. При отсутсвии локализации по умолчанию будет выбран вариант названия переменной на английском языке или имени не будет вовсе
                "ru": "Моя переменная",
                "en": "My variable"
            }
        }
    },

	"author": {
		"name": "Вася Пупкин, дизайнер Google", // Автор
		"contact": "https://vk.com/id0" // Ссылка на страницу VK или Telegram. Обязательно, если собираетесь делиться своей темой с другими, чтобы с вами могли связаться
	}
}

Цветовые схемы

Если вы собираетесь менять переменные в приложении, то это необходимо делать в теге html с классом ID темы с суффиксом mode.

Пример:

html.mytheme-mode {
    --primary: #000000;
    --secondary: #ffffff;
}

Отсутствующие переменные в созданном стиле будут дополняться из классической темы.

Для редактирования стилей с включённым Windows 11 Acrylic необходимо использовать класс .acryl. Глобальная переменная --alpha предназначена для Windows 11 Acrylic. С выключенным Acrylic она равна 1, а со включенным 0.4.

Пример:

html.mytheme-mode.acryl {
    --primary: transparent;
}

Полный список переменных цветов вы можете увидеть в инструментах разработчика или в редакторе цветовой схемы. Так как они периодически обновляются, сложно составить и обновлять какой-то единый список переменных.

Стилевые патчи

Стилевые патчи - это самые обычные CSS файлы, включаемые в приложение. Стилевые патчи не требуют манифеста и работают во всех темах, если они не кофликтуют между собой. Патчи также проверяются на валидность и отслеживаются в режиме Hot Reloading. Патчи как и темы должны храниться в специальной папке, созданной в директории конфигурации. При добавлении патча через "+", Meridius скопирует ваш файл в эту папку и будет оттуда отслеживать изменения, то есть изменения не будут отслеживаться из исходной директории, учтите это при редактировании патча.

Интересные факты

• Meridius автоматически перезагружает тему, если главный файл или любой файл, включённый в модули меняется изменяется.
• Meridius проверяет стили на валидность перед установкой и сбрасывает на классическую тему при проблемах.
• Вы можете поделиться своей темой и своими патчами с другими или скачать чью-нибудь на нашем Discord сервере.
• Некоторые свойства у некоторых селекторов имеют защиту от изменений - их изменить у вас не получится.
• Не брезгуйте использовать !important.