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

Add dark mode support to the HTML versions of the OpenAPI specs #3866

Open
mikekistler opened this issue May 30, 2024 · 8 comments · May be fixed by #4268
Open

Add dark mode support to the HTML versions of the OpenAPI specs #3866

mikekistler opened this issue May 30, 2024 · 8 comments · May be fixed by #4268
Assignees
Labels
Housekeeping script Pull requests that update Bash or JavaScript code

Comments

@mikekistler
Copy link
Contributor

mikekistler commented May 30, 2024

Update the rendering process for the HTML versions of the OpenAPI specs (using ReSpec) to generate pages that support dark mode.

ReSpec has added dark mode support: speced/respec#2651

Related: #3576

@handrews handrews added Housekeeping script Pull requests that update Bash or JavaScript code labels May 30, 2024
@handrews
Copy link
Member

Paging @Bellangelo (we're working on making it so that we can assign issues to you, but haven't quite sorted that out yet).

@Bellangelo
Copy link
Member

Unfortunately, this seems not to be so easy. Our js/respec-oai.js file loads this css file https://www.w3.org/StyleSheets/TR/2016/base.css which overrides most styles. There is a https://www.w3.org.org/StyleSheets/TR/2026/dark.css but even if we add it, it still gets overridden by the base.css.
It looks like we need to give more effort in this issue #3845 which will help us have more control over the respec-oai.js

@ralfhandl
Copy link
Contributor

ReSpec documentation of dark mode says

Note: This is supported for W3C specs only, and makes use of official dark.css in tr-design.

We can enable the switch, and it has no effect 😞

image

@ralfhandl
Copy link
Contributor

ralfhandl commented Jul 25, 2024

@mikekistler Don't know what changed in the last two weeks, now dark mode seems to work (at least if your system theme is set to dark mode):

Quite some fine-tuning needed for dark mode to really work:

  • different OAS logos for light/dark mode
  • table and code-block background color depending on light/dark mode
  • ...

I'll gladly leave this to someone fluent in CSS 😁

@pavelkornev
Copy link
Contributor

pavelkornev commented Sep 3, 2024

I have started on this, please assign to my name.

Intermediate results can be seen here: https://pavelkornev.github.io/OpenAPI-Specification/oas/latest.html

@Bellangelo
Copy link
Member

Hi @pavelkornev, I used some of your CSS in this PR to continue on this work. If you have already a PR that I missed then I can close mine and use yours instead.

@pavelkornev
Copy link
Contributor

Hi @pavelkornev, I used some of your CSS in this PR to continue on this work. If you have already a PR that I missed then I can close mine and use yours instead.

The approach i tried won't work because then switcher between Dark/Light mode doesn't work properly. Try both scenarious:

  1. System settings set to Light mode: try switch between Dark/Light using switcher
  2. System settings set to Dark mode: try switch between Dark/Light using switcher

@Bellangelo
Copy link
Member

Hi @pavelkornev, I used some of your CSS in this PR to continue on this work. If you have already a PR that I missed then I can close mine and use yours instead.

The approach i tried won't work because then switcher between Dark/Light mode doesn't work properly. Try both scenarious:

  1. System settings set to Light mode: try switch between Dark/Light using switcher
  2. System settings set to Dark mode: try switch between Dark/Light using switcher

Thanks a lot @pavelkornev for your feedback ❤ . I had encapsulated the styling under the preferred-color-scheme. It should be fixed now. See 973999a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Housekeeping script Pull requests that update Bash or JavaScript code
Projects
Status: In Progress
Development

Successfully merging a pull request may close this issue.

5 participants