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).

1. 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

2. Use your favorite means to obtain your preferred 3.x theme CSS from this repo (in my case feeling-blue).

3. 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

4. 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>

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

[ostranme]

I'm not that proficient with editing docker images but after playing around with Swagger UI 3.x locally again it appears that even if you remove the swagger-ui.css link reference in the head section, the css gets loaded somehow through the javascript? I'll have to look into this more as Swagger UI 2.x allows you to just replace or override the screen.css link reference altogether.

Workaround:
Try modifying the index.html to load the theme.css absolutely last right before the closing body or html tag.

I know this isn't best practice to load the css last but seems to be a hierarchy issue on when things get loaded into the index.html.

Hope this helps!

That worked, thanks! Haha now I just need to figure out how to enforce horizontal scrollbars on schema models with long lines (i.e. no auto horizontal scrollbars like in Swagger 2.x). Any idea where to look to change scrollbar behavior (feel free to close this issue)?

[ostranme]

No problem, glad I could help. I've noticed the horizontal scroll issue as well, however I haven't spent enough time investigating how to implement. I might be worth checking with the swagger ui project and seeing if there are any open issues regarding that.

[todd-richmond]

would be helpful to include this in the front README as I spent quite a bit of time trying to debug before thinking to checked "closed" issues

[ostranme]

@todd-richmond Will include into README. Thanks for the suggestion.