[Feature Request] Dark mode #5327

lonix1 · 2019-04-24T14:12:58Z

Would be nice to have a dark mode version of the UI.

luca0898 · 2020-09-25T17:06:10Z

I was going to open a issue right now on this subject hahaha

silverwind · 2020-12-10T08:48:42Z

Poor man's dark mode:

@media (prefers-color-scheme: dark) {
  .swagger-ui {
      filter: invert(88%) hue-rotate(180deg);
  }
  .swagger-ui .microlight {
      filter: invert(100%) hue-rotate(180deg);
  }
}

Edit (2023): Updated to new code box class

KaKi87 · 2020-12-10T11:25:11Z

Yes, but this is a feature request.

clementCharasson · 2021-02-08T20:25:00Z

For those who looking for dark mode in swagger, you can use custom CSS with a stylus plugin.
https://33kk.github.io/uso-archive/?search=swagger

KaKi87 · 2021-02-08T20:33:19Z

There's also Dark Reader, but this shouldn't prevent Swagger from having a native dark theme ^^

jeffersoneagley · 2021-02-16T23:31:08Z

Yea in my case I could build out an alternative, but swagger-ui-react sets sooooooo many default colors, I'm sure it will be brittle.

lonix1 · 2021-02-17T04:50:19Z

Agreed, it must be built-in.

But to get this going, maybe someone has dark mode styles to contribute? I see other apps simply use one of the popular themes floating around: "dracula", "nord dark", etc.

I assume if we make it easy for the devs to adopt, then we'll get this feature.

daniloab · 2021-03-01T22:05:16Z

Now that have the dark mode, can I disable it?

gleb-svechnikov · 2021-07-06T10:28:29Z

There was an attempt to solve it #5964 but for unknown reason PR was closed.

ghandic · 2021-10-12T09:28:26Z

Any news on this ?

Atulin · 2022-03-21T10:25:13Z

PR still closed, no other word about it. Dark mode must've killed one of the maintainers' hamster or something.

jeffersoneagley · 2022-04-27T16:21:01Z

Still a problem too.

Atulin · 2022-04-27T16:54:21Z

And most probably will continue being one: #5964 (comment)

mrmelon54 · 2022-09-08T13:45:21Z

at this point I might as well just make my own openapi compliant spec ui with dark mode supported by default
I don't understand how a developer can make a light mode UI it's literally torture

dretax · 2023-04-15T19:22:47Z

https://github.com/Amoenus/SwaggerDark/

OzBob · 2023-07-05T06:06:44Z

So reading the PR#5964 comments, the summary is:

[If you want DarkMode, use a custom plugin.]

Which I believe means use static .css file like this one: https://github.com/Amoenus/SwaggerDark/

Not sure why @tim-lai has left this feature request issue open when it is not going to be worked on.

gdibble · 2023-08-29T00:18:47Z

🙏 Should this ever get traction: How about it just respects the OS setting? Thanks! :)

landsman · 2023-09-20T13:57:53Z

This would be awesome. I have to see bright colors at night.

I think that by rewriting CSS to using CSS variables + this media query would make the effect:

:root {
  --background-body: white;
}

body {
  background: var(--background-body);
}

/* override variables for dark mode */
@media (prefers-color-scheme: dark) {
  --background-body: black;
}

landsman · 2023-09-20T13:58:32Z

cc @Amoenus
I saw you been doing a similar job there: https://github.com/Amoenus/SwaggerDark/

BenRacicot · 2023-10-24T11:56:28Z

Any updates here? I'd be willing to lend my development time if a maintainer confirms it will not be ignored.

landsman · 2023-10-30T10:40:49Z

Guys, let's add this

sergei-zachesov · 2023-11-02T07:40:29Z

Here is another example of a dark theme: https://bf5vj.csb.app/

fulldecent · 2023-11-18T03:48:04Z

I'm using poor dark mode with poor CSS hosting with default HTML template. This should be the starting point for anyone using Swagger.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tbone API</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui@5.10.0/dist/swagger-ui.css" integrity="sha256-IgNmYaATqY6z6AuD6hvz9XN0OyeAc94gsTa+lK8ka1Y=" crossorigin="anonymous">
    <style>
        /* Fast dark mode https://github.com/swagger-api/swagger-ui/issues/5327 */
@media (prefers-color-scheme: dark) {
    body {
        background: black;
    }
    .swagger-ui {
        filter: invert(88%) hue-rotate(180deg);
    }
    .swagger-ui .microlight {
        filter: invert(100%) hue-rotate(180deg);
    }
}
    </style>
</head>
<body>
    <div id="swagger-ui"></div>
    <script src="https://cdn.jsdelivr.net/npm/swagger-ui@5.10.0/dist/swagger-ui-bundle.js" integrity="sha256-i050FsZ0MSwm3mVMv7IhpfCdK90RKaXPS/EmiWxv8vc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/swagger-ui@5.10.0/dist/swagger-ui-standalone-preset.js" integrity="sha256-IGoJVXW7MRyeZOsKceWVePAShfVpJhnYhDhOQp+Yi38=" crossorigin="anonymous"></script>    
    <script>
        // Initialize Swagger UI
        window.onload = function() {
            const ui = SwaggerUIBundle({
                url: "openapi.yaml",  // Provide the URL to your OpenAPI spec file
                dom_id: '#swagger-ui',
/*
                deepLinking: true,
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                layout: "BaseLayout"
*/                
            });
            window.ui = ui;
        };
    </script>
</body>
</html>

jcphlux · 2023-11-18T12:36:48Z

I just started a Swagger UI Themes project. It uses webkits and builds the theme css file the same way Swagger UI builds there default css. I only have a dark-modern theme so far but I just started the project last night. swagger-ui-themes
you can check out a demo page at Dark Modern Demo

I am looking into some way to host the css files on a cdn and will work on adding distribution downloads but for now you can grab the css from the dist folder

tteze · 2024-01-11T09:20:18Z

For whose who searching for a nelmio api doc dark mode i use this, it works well.

In templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig put :

{% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    <style>
        @media (prefers-color-scheme: dark) {
            body {
                background: #000000;
            }
            .swagger-ui * {
                filter: invert(100%);
            }
        }
    </style>
{% endblock %}

landsman · 2024-01-11T11:06:42Z

CSS variables would fix the whole issue without hacking by inverting colors.

JesseSinivuori · 2024-06-27T22:03:38Z

Just got started with swagger-ui ( and hono: @hono/swagger-ui) and couldn't find dark mode so i made a quick one... looks like this:
i used tailwind colors

here's the code:

app.get("/ui", (c) => {
  return c.html(`
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="Custom Swagger" />
        <title>Custom Swagger</title>
        <script>
        </script>
        <style>
            :root {
      --bg-color: #020617;
      --primary-color: #e2e8f0;
      --secondary-color: #94a3b8;
      --highlight-bg-color: transparent;
      --highlight-border-color: #1e293b;
      --button-bg-color: #0f172a;
      --button-text-color: #e2e8f0;
      --method-bg-color: transparent;
      --cancel-border-color: #b91c1c;
      --success-color: #4ade80;
      --select-bg-color: transparent
      --copy-button-bg-color: transparent
      --servers-bg-color: transparent
      --execute-button-bg-color: transparent
    }

    body {
      background-color: var(--bg-color);
      color-scheme: dark;
    }

    * {
      color: var(--primary-color);
    }

     .execute {
      color: var(--bg-color) !important;
      background-color: var(--primary-color) !important;
      border: transparent 1px solid !important;
    }

    .btn-clear, .btn-clear:hover {
      color: var(--primary-color) !important;
      border: transparent 1px solid !important;
    }

    .btn-clear:hover {
      border: transparent 1px solid !important;
    }
    
    .opblock-summary-method {
      background-color: var(--method-bg-color) !important;
      font-weight: 800 !important
    }

    .opblock-section-header {
      background-color: var(--highlight-bg-color) !important;
    }

    p, td, .tabitem {
      color: var(--secondary-color) !important;
    }

    h1, h2, h3, h4, h5, h6, h7 .active {
      color: var(--primary-color) !important;
    }

    pre .highlight-code, .microlight {
      background-color: var(--highlight-bg-color) !important;
      border: var(--highlight-border-color) solid 1px;
    }

    .try-out__btn {
      color: var(--button-bg-color) !important;
      background-color: var(--primary-color) !important;
      border: transparent 1px solid !important;
    }

    .cancel {
      color: var(--primary-color) !important;
      background-color: var(--highlight-bg-color) !important;
      border-color: var(--secondary-color) !important;
    }

    .download-contents {
      background-color: var(--button-bg-color) !important;
      color: var(--primary-color);
    }

    .copy-to-clipboard {
      background-color: var(--copy-button-bg-color) !important;
      color: var(--button-text-color);
    }

    .highlight-code .copy-to-clipboard {
      background-color: var(--button-bg-color) !important;
      color: var(--button-text-color);
    }

    .servers {
      background-color: var(--servers-bg-color) !important;
    }

    .response-control-media-type__accept-message {
      color: var(--success-color) !important;
    }

    .title small {
      background-color: var(--bg-color) !important;
    }

    .arrow {
      fill: var(--primary-color) !important;
    }

    select {
      background-color: var(--select-bg-color) !important;
      color: var(--primary-color) !important;
      border-color: var(--highlight-border-color) !important;
    }

    .opblock-summary-control {
      outline: none !important;
    }

    .model-box .json-schema-2020-12__title, .json-schema-2020-12-expand-deep-button {
      color: var(--secondary-color) !important;
    }
    .json-schema-2020-12__attribute--primary {
      color: var(--primary-color) !important;
    }
        </style>
      </head>
      ${SwaggerUI({ url: "/api/v1/doc" })}
    </html>
  `);
});

its not perfect but its something for a starting point i guess 🙂

matiasvallejosdev · 2024-10-08T13:30:41Z

I used this https://github.com/Amoenus/SwaggerDark but please must we add a new feature for dark mode.

mrahhal mentioned this issue Apr 12, 2020

Implement a dark theme #5964

Closed

17 tasks

mathis-m mentioned this issue Oct 4, 2020

Adding dark theme #6448

Closed

ponelat added cat: configuration cat: user experience needs: UX/design input labels Sep 15, 2021

ak1394 mentioned this issue Dec 23, 2021

Add a "dark mode" to go with the VS code theme 42Crunch/vscode-openapi#144

Open

Tschakki mentioned this issue Mar 14, 2022

Add a dark theme for the swagger UI LiskArchive/lisk-legacy-docs#1426

Closed

kamilmysliwiec mentioned this issue Aug 24, 2023

Dark Mode nestjs/swagger#2584

Closed

1 task

szczys mentioned this issue Nov 26, 2023

Fix swagger css golioth/docs#306

Merged

fernandomg mentioned this issue Feb 7, 2024

Embed swagger UI sourcifyeth/docs#20

Merged

AllanOcelot mentioned this issue Nov 15, 2024

Feature - New - Dark Mode Toggle #10216

Open

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Request] Dark mode #5327

[Feature Request] Dark mode #5327

lonix1 commented Apr 24, 2019

luca0898 commented Sep 25, 2020

silverwind commented Dec 10, 2020 •

edited

Loading

KaKi87 commented Dec 10, 2020

clementCharasson commented Feb 8, 2021

KaKi87 commented Feb 8, 2021

jeffersoneagley commented Feb 16, 2021

lonix1 commented Feb 17, 2021 •

edited

Loading

daniloab commented Mar 1, 2021

gleb-svechnikov commented Jul 6, 2021

ghandic commented Oct 12, 2021

Atulin commented Mar 21, 2022

jeffersoneagley commented Apr 27, 2022

Atulin commented Apr 27, 2022

mrmelon54 commented Sep 8, 2022

dretax commented Apr 15, 2023

OzBob commented Jul 5, 2023

gdibble commented Aug 29, 2023

landsman commented Sep 20, 2023

landsman commented Sep 20, 2023

BenRacicot commented Oct 24, 2023

landsman commented Oct 30, 2023

sergei-zachesov commented Nov 2, 2023

fulldecent commented Nov 18, 2023

jcphlux commented Nov 18, 2023

tteze commented Jan 11, 2024 •

edited

Loading

landsman commented Jan 11, 2024

JesseSinivuori commented Jun 27, 2024

matiasvallejosdev commented Oct 8, 2024 •

edited

Loading

[Feature Request] Dark mode #5327

[Feature Request] Dark mode #5327

Comments

lonix1 commented Apr 24, 2019

luca0898 commented Sep 25, 2020

silverwind commented Dec 10, 2020 • edited Loading

KaKi87 commented Dec 10, 2020

clementCharasson commented Feb 8, 2021

KaKi87 commented Feb 8, 2021

jeffersoneagley commented Feb 16, 2021

lonix1 commented Feb 17, 2021 • edited Loading

daniloab commented Mar 1, 2021

gleb-svechnikov commented Jul 6, 2021

ghandic commented Oct 12, 2021

Atulin commented Mar 21, 2022

jeffersoneagley commented Apr 27, 2022

Atulin commented Apr 27, 2022

mrmelon54 commented Sep 8, 2022

dretax commented Apr 15, 2023

OzBob commented Jul 5, 2023

gdibble commented Aug 29, 2023

landsman commented Sep 20, 2023

landsman commented Sep 20, 2023

BenRacicot commented Oct 24, 2023

landsman commented Oct 30, 2023

sergei-zachesov commented Nov 2, 2023

fulldecent commented Nov 18, 2023

jcphlux commented Nov 18, 2023

tteze commented Jan 11, 2024 • edited Loading

landsman commented Jan 11, 2024

JesseSinivuori commented Jun 27, 2024

matiasvallejosdev commented Oct 8, 2024 • edited Loading

silverwind commented Dec 10, 2020 •

edited

Loading

lonix1 commented Feb 17, 2021 •

edited

Loading

tteze commented Jan 11, 2024 •

edited

Loading

matiasvallejosdev commented Oct 8, 2024 •

edited

Loading