Настройка CSS стилизации в Obsidian - задаем собственные стили интерфейсу

Создать файл стилей

Зайдите в папку хранилища Obsidian, и создайте новый .css файл в папке snippets — это папка по умолчанию для пользовательских файлов, где их будет искать Obsidian.

Проверить настройки

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

Зайдите в «Настройки -> Оформление -> Фрагменты CSS когда» и подключите созданный файл, переведя ползунок.

Зайти в DevTools

Поскольку Obsidian — это приложение на основе Chromium (грубо говоря, как браузер с убранным ненужным функционалом), мы имеем доступ и инструментам разработчика, так же как в обычном браузере. Нажмите Ctrl+Shift+I, чтобы открыть их.

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

Выбрать нужный элемент можно инструментом выбора элементов— он находится в левом верхнем углу панели инструментов разработчика.

Включите его и наведите мышкой на интересующий элемент на экране. Он отобразиться в структуре DOM в инструментах разработчика.

Скорее всего, у элемента будет какой-то class или id, который можно использовать при стилизации. Если такового нет — можно попробовать отталкиваться от родителей.

Есть определенный лайфхак с созданием временного файла стилей прямо во время просмотра страницы. Нажмите кнопку «Добавить новое правило стилей» — он введет селектор текущего элемента.

Проверить правильность селектора можно тут же — просто введите свой вариант, и посмотрите как он будет отображаться — черным (активный) или серым (неподходящий) цветом.

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

Кроме того, добавленные таким образом правила сохранятся во временный файл inspector-stylesheet. Можно выполнить всю стилизацию прямо в браузере, а затем открыть inspector-stylesheet, скопировать код и вставить в свой пользовательский CSS файл в хранилище Obsidian.

Просто щелкните на названии файла и он откроется во вкладе «Источники». Обратите внимание, что введенные ранее неактивные селекторы не будут показываться в окне стилей текущего элемента, но останутся в inspector-stylesheet — за этим нужно следить.

Поменять стили

Следуя инструкциям выше, вы можете стилизовать любой элемент страницы — как пользовательский контент, так и интерфейс приложения. Если правила не применяются, попробуйте использовать !important для них — возможно в исходных стилях используется более весомый селектор. 

Сохранить стили в файл

После стилизации сохраните получившийся набор правил в созданный на первом шаге CSS файл.

Перезагрузить приложение

Находясь в инструментах разработчика, нажмите «Ctrl+R» — это инициирует перезагрузку приложения. Также можно закрыть и открыть приложение, но мне кажется этот способ немного быстрее.

После перезагрузки новые стили должны примениться. Не забывайте про нюанс с !important. Если какие-то стили не работают — можно снова открыть инструменты разработчика, выбрать нужный элемент и посмотреть его CSS правила — возможно где-то ошибка в синтаксисе или приоритете.

Пример

Очень хотелось мне сделать определенные цвета для файлов в дереве заметок: xlsx - зеленым, docx - синим ну и так далее.

Вот пример CSS, как это можно сделать (аналогичным способом можно задать цвета для любых других расширений файлов):

.nav-file-title[data-path$=".xlsx"] .nav-file-tag,
.nav-file-title[data-path$=".xls"] .nav-file-tag,
.nav-file-title[data-path$=".xlsm"] .nav-file-tag,
.nav-file-title[data-path$=".csv"] .nav-file-tag {
  background-color: #1F7244;
  color: #fff;
}
.nav-file-title[data-path$=".xlsx"]:hover .nav-file-tag,
.nav-file-title[data-path$=".xls"]:hover .nav-file-tag,
.nav-file-title[data-path$=".xlsm"]:hover .nav-file-tag,
.nav-file-title[data-path$=".csv"]:hover .nav-file-tag {
  background-color: #1F7244;
  color: #fff;
  opacity: 0.8;
}

Или убрать автоматический перенос строк в примерах кода в режиме просмотра (чтобы занимали по вертикали меньше места и была горизонтальная полоса прокрутки):

.markdown-preview-view pre,
code[class*="language-"], pre[class*="language-"] {
  overflow: auto !important;
  white-space: pre !important;
}

Загрузить темы сообщества

Если вам надоело вносить изменения самостоятельно, то в обсидиан представлено много тем сообщества — некоторые вносят косметические изменения, а некоторые кардинально меняют все представление.

Чтобы выбрать тему, зайдите в «Настройки -> Оформление -> Темы» и нажмите «Настроить».

Будет представлен каталог доступных тем, каждую из которых можно посмотреть и прочитать описание от авторов.

Можно установить любую из тем, при этом ваши настройки будут также применяться, если не отключить их в меню — таким образом можно кастомизировать не только стандартный вид Obsidian, но и пользовательские темы.