Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Сделать переключатель темного режима #411

Merged
merged 5 commits into from
Jun 16, 2023

Conversation

YozhEzhi
Copy link
Contributor

@YozhEzhi YozhEzhi commented Apr 25, 2023

VuePress 2 умеет переключать режим из коробки. Но:

  1. Он пока в бета-версии
  2. Миграция может быть не гладкой

Предлагаю временно внедрить компонент-переключатель темного режима.

Demo: 411-tlroadmap-review.surge.sh

@YozhEzhi
Copy link
Contributor Author

@etolstoy @DevAlloy Привет. Правильно ли я понял, что демки для ПРов не подымаются?

@b0g3r
Copy link
Member

b0g3r commented Apr 25, 2023

Привет. Для этой ветки превьюшка собирается по этой ссылке: 411-tlroadmap-review.surge.sh

@DevAlloy
Copy link
Collaborator

DevAlloy commented May 5, 2023

@YozhEzhi, уоу, потыкал сборку, вообще все хорошо. Разве что майндмэп подкрасить в светлый image

@YozhEzhi
Copy link
Contributor Author

YozhEzhi commented May 5, 2023

Разве что майндмэп подкрасить в светлый

Хм, а это не так просто, ибо майндмэп вставляется как object, к которому на прямую нет доступа.

Я подумаю, что можно сделать. Но на сколько это критично?

(Ссылка на пример решения через JS)

@Armanio
Copy link

Armanio commented May 10, 2023

@YozhEzhi .svg-roadmap svg { background: white;} 🤔

@YozhEzhi
Copy link
Contributor Author

@b0g3r @DevAlloy Я нашел плагин для тёмной темы plantuml, но я не понял как генерируется сам svg.

Со Станиславом подумали, что можно было бы доработать генерацию двух svg, и при переключении тёмного режима на клиенте — скрывать svg для светлого режима и отображать svg для тёмного режима.

Дмитрий, будет ли у тебя время на помощь с генерацией двух svg?

Если это трудозатратно, то я бы предложил влить ПР в текущем состоянии (со светлым svg).

@b0g3r
Copy link
Member

b0g3r commented May 27, 2023

@YozhEzhi Прости за долгий ответ, был в отпуске. Добавил тёмную SVG в #415, https://415-tlroadmap-review.surge.sh/roadmap-ru-dark-theme.svg

@DevAlloy
Copy link
Collaborator

@YozhEzhi Прости за долгий ответ, был в отпуске. Добавил тёмную SVG в #415, https://415-tlroadmap-review.surge.sh/roadmap-ru-dark-theme.svg

А получится сделать фон SVG прозрачным? Для светлой темы фон схемы совпадает с фоном страницы, а в темной – черный фон выделяется на фоне темно-серой страницы.
photo_2023-06-15 23 27 40

@b0g3r
Copy link
Member

b0g3r commented Jun 15, 2023

Попробуйте к

          sed -i '2 i skinparam monochrome reverse' plantuml/roadmap-ru-dark-theme.puml

Добавить что-то вроде

          sed -i '3 i skinparam backgroundColor transparent' plantuml/roadmap-ru-dark-theme.puml

Это должно переопределить бекгрунд: https://plantuml.com/skinparam

@DevAlloy DevAlloy merged commit 44ebfb7 into tlbootcamp:master Jun 16, 2023
8 checks passed
@YozhEzhi YozhEzhi deleted the feature/dark-theme branch June 16, 2023 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants