ostranme / swagger-ui-themes Goto Github PK

View Code? Open in Web Editor NEW

600.0 22.0 223.0 5.58 MB

:boom: A collection of css themes to spice up your Swagger docs

Home Page: http://ostranme.github.io/swagger-ui-themes/

CSS 100.00%

swagger-ui theme swagger-docs css-themes css swagger

swagger-ui-themes's People

Contributors

Stargazers

Watchers

Forkers

liasica sumalla zfjoy520 pnegahdar simantovyousoufov openam arizkyana thinkaboutgithub simone-chiorazzo edwindvinas toppu adrianoaguiar codylawson xishenma duyluonglc byvilla jcleneveu-geny eastmacro rivannikov yuailong dwschreyer kerzman unlone ronnysuero wulakey richa1995 albydarned tschlegelcore10 lynorics kristineiq rohan-buechner raoulbillard moraneva tjxiter enterstudio enterstudios shasthojoy chrisob55 rizki-arya jacobnisnevich craniodev anubhav143 stephens01 yacineb bingjiegao dharmesh-dhakan ebarahona heldersepu yzhao583 vns140 aleksanderkrolasik doyazih zinosama jaredcowan ravangs 10000tb marcelchirtes santoshkumarsuru matrixdekoder chrisjmccrum wasseresser zoharsherman fallingsnow committeddev benotsoa misterschmitz datasuricata ngreen28 taranggodhari jared-jackson rsarten mnlttt buguangchao v152kuma clembl-git ogawa-yu gregorypellegrin jorgecoke fashionmgr lufli pavelermakov beber46 stevecho92 khodor19 sear-lin-avepoint khalidelsayed stephen-cornwell irobert84 crzyc0d3r axalian dvsingh9 rickeshjobanputra zula1994 cyberpirate92 yilmazyusuf skybsky aymanbenlahcen alexaugustobr ampmarketing cmcki39

swagger-ui-themes's Issues

Create flat theme using light/bright colors

Create a light version of Flattop theme

Make feeling blue just a little bit more blue

Hi,

here are some suggestions to make feeling blue just a little bit more blue. ;-)

.swagger-section #header {
	background-color: #0489bf;
}

.swagger-section .swagger-ui-wrap a {
	color: #00547f;
}

.swagger-section .swagger-ui-wrap pre {
	background-color: #f6f6fc;
}

.swagger-section .swagger-ui-wrap .model-signature pre:hover {
	background-color: #e6e6fc;
}

Swagger-UI 3.x not loading 3.x Themes

Preface: Apologies if this is a noobish question, Frontend development is not my domain of expertise. :(

I cannot get Swagger-UI 3.x to load any 3.x swagger-ui-theme CSS. Rather, the default CSS theme is always being loaded. Using my browser's debug tools I can see the JS console is error free, and the theme-xxx.css I specify (using your instructions) is in fact being served to the browser.

Below is a Dockerfile and a couple BASH commands to replicate the issue quickly (all work on Linux or Windows + Cygwin + Docker Toolbox).

Write the below lines into a file named Dockerfile:

FROM swaggerapi/swagger-ui:v3.0.2
# mount an index file with the `<link rel="stylesheet" href="path/to/theme.css" />` one-liner
COPY ./index-feeling-blue.html /usr/share/nginx/html/index.html
COPY ./theme-feeling-blue.css /usr/share/nginx/html/css/theme-feeling-blue.css
EXPOSE 8080

Use your favorite means to obtain your preferred 3.x theme CSS from this repo (in my case feeling-blue).
Obtain the swagger-ui index.html via this link (you may need to fix the paths to the swagger-ui js components) or from the docker image referenced in the first line:

docker pull swaggerapi/swagger-ui:v3.0.2
# use docker run to start a container using the swagger-ui image, and obtain its container id
$ docker run -d swaggerapi/swagger-ui:v3.0.2
<container_id>

# shell into the docker
$ docker exec -it <container_id> /bin/sh
/ # cat /usr/share/nginx/html/index.html

Put the theme CSS, Dockerfile, and custom index.html into a common directory, change into it, then run:

docker build -t <your_registry>/<your_image>:<your_tag> .
docker run -d -p 8080:8080 <your_registry>/<your_image>:<your_tag>

Goto http://localhost;8080 and observe that your desired theme is NOT loaded.

http://meostrander.com/swagger-ui-themes/ leads to some cheater site

subj

Fully dark mode

Would be amazing to have dark mode, my eye cries on white bg

Can we integrate this with Swagger UI for Spring Boot?

unable to load gif in version 2

When using the version 2 of the CSS, the loader gif is not found.

Changing line 883 from:
background-image: url('../images/throbber.gif');
To:
background-image: url('../images/throbber-gif');

solved the problem.

Theme not loading for Swagger 2 on httpd or gh-pages

I am attempting to try a theme on httpd on docker and on gh-pages. However, the css does not apply to the swagger.

Directory Structure:

Index.html:

<html>
    <head>
        <!-- Load the latest Swagger UI code from npm using unpkg.com -->
        <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>

        <!-- Load the theme -->
        <link rel="stylesheet" type="text/css" href="/themes/css/theme-feeling-blue.css"/>
        
        <title>My New API</title>
    </head>
    <body>
        <a href="/">Go Back to Documentation</a>
        <div id="swagger-ui"></div> <!-- Div to hold the UI component -->
        <script>
            window.onload = function () {
                // Begin Swagger UI call region
                const ui = SwaggerUIBundle({
                    url: "swagger2.json", //Location of Open API spec in the repo
                    dom_id: '#swagger-ui',
                    deepLinking: true,
                    presets: [
                        SwaggerUIBundle.presets.apis,
                        SwaggerUIBundle.SwaggerUIStandalonePreset
                    ],
                    plugins: [
                        SwaggerUIBundle.plugins.DownloadUrl
                    ],
                })
                window.ui = ui
            }
        </script>
    </body>
</html>

httpd conf mime types:

    AddType 'text/css; charset=UTF-8' css
    AddType text/javascript .js

[Theme] Type

Create a theme using different types/fonts. Bigger/smaller text.

Pick font
Mockup what the design should be

Add License

Hi @ostranme,
would you mind to release this Repository under a License?
Maybe MIT or Apache 2?

Create bower package

Remove yellow hover on model schema for Newspaper theme

Hover on model schema is yellow. Can't see attributes because they are white.

-Remove or change color.

Swagger UI as extension

If you can't insert the link in the source code, you can use the chrome extension : https://chrome.google.com/webstore/detail/swagger-ui-themes/mmbhchnmidfdfbecginjphmijieofngc

Compatibility with Swagger UI 4.x

Applying the themes for v 3.x seems to work ok but probably a few things getting missed out - most blatant the "models" section at the bottom isn't themed at all, so I'm assuming that's new as of v4.

Any plans to accommodate?

Thanks

define "swagger-ui html"

Hi,

the instruction says to place the desired stylesheet into the source of your swagger-ui html
When I'm in swagger editor: how do I obtain my swagger-ui html? There's Generate Client => html , Generate Client => html2, I can right click the right pane and Save as.

What is the right HTML page your CSS files style?

Best,
Bernhard Döbler

Create npm package

Flattop breaks syntax highlighning

Would be great to keep the JSON highlighting.

Looks like it's this block:

.swagger-ui .opblock-body pre span {
  color: #fff !important;
}