Radiant — элегантная тема для Discourse

Эта тема стремится к минимализму и при этом обладает современной привлекательностью. Вся стилизация реализована через CSS, без использования изображений.

:rainbow: :dizzy: :rocket:

Главная страница:

Страница темы:

Поиск по всей странице:

Модальное окно:

Сообщите, как можно улучшить эту тему дальше. Приятного использования! :smiley:

:sunglasses: Предпросмотр Предпросмотр в конструкторе тем
:link: Репозиторий на Github discourse-radiant-theme
:hammer_and_wrench: Руководство по установке Как установить тему или компонент темы
31 лайк

Очень красивый дизайн!

Есть ли возможность настроить фоновые фигуры и цвета? Также было бы полезно иметь возможность настроить «свечение» основного тела на фоне.

3 лайка

Привет,

Удивительная работа :heart: Эта тема выглядит очень круто :heart_eyes:
У меня есть одно предложение: сделать одинаковые скруглённые углы и тени. Имею в виду всплывающие окна, меню, поля ввода и т. д. Это будет просто потрясающе с новым индикатором загрузки :heart_eyes:

2 лайка

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

При желании вы можете сделать форк темы и настроить её в соответствии со своими требованиями.

Отличная идея. Я добавлю это в свой список улучшений. :+1:

6 лайков

Я улучшил тему, чтобы поля ввода форм, меню заголовка и модальные окна соответствовали стилю темы. Обновил первый пост с последними скриншотами. :slight_smile:

5 лайков

Прекрасная тема. Возможно, я скоро воспользуюсь ею. Спасибо, отличная работа.

2 лайка

Привет, тема очень хорошая. Есть ли способ уменьшить это пространство сверху (см. стрелку)?

2 лайка

Я уменьшил значение по умолчанию для margin-top до 30px через:

Не стесняйтесь форкнуть тему и дополнительно настроить её в соответствии с вашими требованиями. :slight_smile:

3 лайка

Лично я считаю, что меньший отступ делает градиент слишком заметным. :confused:

Не могли бы вы подсказать, как правильно реализовать это в качестве фона? https://codepen.io/chris22smith/pen/RZogMa

1 лайк

Мне безумно нравится эта тема! Я бы даже порекомендовал её на форуме, где я состою, но сначала хотел бы задать вам несколько вопросов.

Я не администратор, использующий Discourse для создания форумов, а обычный пользователь, поэтому мои вопросы могут показаться вам странными или слишком очевидными, ведь я никогда не занимался созданием чего-либо на базе Discourse.

Планируется ли создание версии этой темы в тёмной теме? Лично я включил в Edge флаг «Принудительный тёмный режим для веб-контента». Это также доступно в Chrome. Обычно это помогает, вот какие результаты я получил:

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

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

4 лайка

Пока нет, но я изучу этот вопрос. Правда, придётся использовать другую цветовую схему.

Спасибо за предложения! Я их изучу и внесу изменения, если они не повлияют на версию по умолчанию (оригинальную светлую). :slight_smile:

5 лайков

Я только что настроил Discourse и уже не терпелось его кастомизировать. Очень рад, что нашёл вашу тему — она свежая, красочная и прекрасная. Спасибо!

— ben

6 лайков

Очень приятная тема, но в последнее время кажется, что она несовместима с Discourse. Боковая панель полностью сжалась.

`

3 лайка

Отлично подмечено! Теперь исправлено здесь:

3 лайка

Спасибо, выглядит круто, и проблема решена

2 лайка

Привет

После последнего обновления весь контент, кажется, «застрял» с обеих сторон. Как будто отступы или поля справа и слева исчезли.

Это намеренно? На превью-изображениях темы всё выглядит иначе. Как это исправить?

Большое спасибо

2 лайка

Это уже исправлено:

Спасибо, что сообщили об этой проблеме :+1:

3 лайка

Подтверждаю, что всё исправлено!

Это невероятно быстро, большое спасибо.

Кстати, отличная тема :slight_smile:

3 лайка

Можете помочь мне понять, как изменить цвет синей акцентной полосы в верхней части?

Я вижу в файле desktop.scss, что это определено так:

#main-outlet {
  border-top: 8px solid $tertiary;
}

Предполагаю, что переменная $tertiary берётся из переменных, определённых в ядре SCSS платформы Discourse, и должна подтягивать цвет из выбранной пользователем палитры.

В инструментах разработчика (devtools) я вижу, что полосе присвоен цвет #3977ff, который вы можете увидеть как синюю полосу на скриншоте ниже. Однако в моей цветовой палитре для параметра «tertiary» установлен жёлтый цвет, и нигде у меня не определён цвет #3977ff.

Что здесь происходит и как мне установить нужный цвет?

1 лайк

О! Я вижу, что tertiary определено в about.json:

  "color_schemes": {
    "radiant": {
      "primary": "000000",
      "tertiary": "3977FF",
      "header_primary": "4d4d4d"
    }
  },

Значит, я предполагаю, что именно отсюда берётся значение цвета. Но почему оно берётся отсюда, если у меня не выбрана цветовая схема “radiant”?