-
First Check
Commit to Help
Example Code# Proposed change in fastapi/openapi/docs.py
def get_swagger_ui_html(...,
swagger_css_url: Annotated[
union[str, list[str]],
Doc(
"""
The URL to use to load the Swagger UI CSS.
It is normally set to a CDN URL.
"""
),
] = "https://cdn.jsdelivr.net/npm/[email protected]/swagger-ui.css",
...)
and use this list in generating the html code.DescriptionTo have a better flexibility on swagger UI CSS configuration, I propose being able to use multiple CSS files in Use case: Operating SystemmacOS Operating System DetailsNo response FastAPI Version0.108.0 Pydantic Version2.5.3 Python Version3.12.1 Additional ContextNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
Did you try overriding this feature or do you have an example? |
Beta Was this translation helpful? Give feedback.
-
|
Example code of the implementation. |
Beta Was this translation helpful? Give feedback.
-
|
Sure. Below is the relevant code -
swagger_css_url: Annotated[
Union[str, list[str]],
Doc(
"""
The URL to use to load the Swagger UI CSS.
It is normally set to a CDN URL.
"""
),
] = "https://cdn.jsdelivr.net/npm/[email protected]/swagger-ui.css",if isinstance(swagger_css_url, list):
html+= "\n".join([f"""<link type="text/css" rel="stylesheet" href="{url}">""" for url in swagger_css_url])
else:
html+= f"""<link type="text/css" rel="stylesheet" href="{swagger_css_url}">"""Function call async def custom_swagger_ui(app: "FastAPI", prefix: str):
return get_swagger_ui_html(
openapi_url=f"{prefix}/openapi.json",
title=app.title + " - Swagger UI",
oauth2_redirect_url=app.swagger_ui_oauth2_redirect_url,
swagger_js_url="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.5/swagger-ui-bundle.js",
swagger_css_url=[
"https://cdn.jsdelivr.net/gh/ajatkj/swagger-ui-improved-theme/css/swagger-ui-improved.css",
"/static/dark-theme.css",
],
)
html {
background: rgb(39, 30, 86) !important;
}Generated html <!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ajatkj/swagger-ui-improved-theme/css/swagger-ui-improved.css">
<link type="text/css" rel="stylesheet" href="/static/dark-theme.css">
<link rel="shortcut icon" href="https://fastapi.tiangolo.com/img/favicon.png">
<title>The API - Swagger UI</title>
</head>
<body>
<div id="swagger-ui">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.5/swagger-ui-bundle.js"></script>
<!-- `SwaggerUIBundle` is now available on the page -->
<script>
const ui = SwaggerUIBundle({
url: '/user/openapi.json',
"dom_id": "#swagger-ui",
"layout": "BaseLayout",
"deepLinking": true,
"showExtensions": true,
"showCommonExtensions": true,
oauth2RedirectUrl: window.location.origin + '/docs/oauth2-redirect',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
})
</script>
</body>
</html>Generated doc- |
Beta Was this translation helpful? Give feedback.
-
|
It looks quite good 👏. Extra JS and Extra CSS seem cool. I upvoted the discussion. 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. Does this mean I can go ahead with the PR? |
Beta Was this translation helpful? Give feedback.
-
|
Oh, that's up to you. Who am I to tell you to go ahead or not? But I encourage you to give it a try. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! But I prefer to show people how to fully customize their docs UI any way they want as in here: https://fastapi.tiangolo.com/how-to/custom-docs-ui-assets/#self-hosting-javascript-and-css-for-docs If someone, for example you, wanted to have a more customized docs UI, it's possible to entirely override the whole HTML, which is more flexible than just the list of CSS and JS files to include. Given that, I'll pass on this request, but thanks for the interest! ☕ |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply. I understand your decision but let me try to explain my reason behind this (not trying to make you reconsider your decision😜)
Again, not trying to push you, just trying to make a case. I am big a advocate of this framework btw. |
Beta Was this translation helpful? Give feedback.
Thanks! But I prefer to show people how to fully customize their docs UI any way they want as in here: https://fastapi.tiangolo.com/how-to/custom-docs-ui-assets/#self-hosting-javascript-and-css-for-docs
If someone, for example you, wanted to have a more customized docs UI, it's possible to entirely override the whole HTML, which is more flexible than just the list of CSS and JS files to include.
Given that, I'll pass on this request, but thanks for the interest! ☕