[Feature Request] Dark mode

lonix1 commented 5 years ago

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

luca0898 commented 4 years ago

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

silverwind commented 3 years ago

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 commented 3 years ago

Yes, but this is a feature request.

clementCharasson commented 3 years ago

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 commented 3 years ago

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

jeffersoneagley commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

gleb-svechnikov commented 3 years ago

There was an attempt to solve it https://github.com/swagger-api/swagger-ui/pull/5964 but for unknown reason PR was closed.

ghandic commented 3 years ago

Any news on this ?

Atulin commented 2 years ago

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

jeffersoneagley commented 2 years ago

Still a problem too.

Atulin commented 2 years ago

And most probably will continue being one: https://github.com/swagger-api/swagger-ui/pull/5964#issuecomment-1074046454

mrmelon54 commented 2 years ago

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 commented 1 year ago

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

OzBob commented 1 year ago

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 commented 1 year ago

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

landsman commented 1 year ago

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 commented 1 year ago

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

BenRacicot commented 1 year ago

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

landsman commented 1 year ago

Guys, let's add this

sergei-zachesov commented 1 year ago

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

fulldecent commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

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 commented 10 months ago

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

JesseSinivuori commented 4 months ago

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: Screenshot 2024-06-28 at 00-58-09 Custom Swagger 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 commented 1 month ago

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

swagger-api / swagger-ui

[Feature Request] Dark mode #5327