Turn Swagger Theme to the Dark Mode
Why I do what I do: I envision the world where technology and automation have given us freedom from tedious tasks and everyone can focus on what really matters most to them. My personal goal is to remove obstacles so that together we can move the world forward.
How I do it: I focus on automating tedious and repetitive tasks Identify the best tools for the job and creating integrations between the tools Make solutions to the problems reusable and standardized. Approach problems modularly and find the best tool to solve each smaller problem. Never stop learning to be aware of all the tools and best approaches to apply in the future.
What I do: I write software, implement build/deploy and test automation pipelines Facilitate the knowledge and tools sharing among stakeholders by setting up wikis, demos and user groups. Create UI Mockups to better visualise the end products and gather valuable feedback early on. Attend and present in developer forums to gain and spread the knowledge amongst peers.
So you have Swagger integrated into your .NET Core Web API application. Maybe even using my previous guide . And now you want to customize it a bit.
I prefer my UI’s dark. So, when I am presented with a predominantly white screen from the Swagger default theme, I immediately want to change it. Luckily SwaggerUI supports CSS injection.
Here are the tweaks that we need to make:
Changes for Startup.cs
Enable support for static files in a Configure() method
app.UseStaticFiles();
Add folder structure with custom CSS
wwwroot/
└──swagger-ui/
└── SwaggerDark.css
Inject custom CSS
Now we can inject the custom CSS with InjectStylesheet()
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");
c.InjectStylesheet("/swagger-ui/SwaggerDark.css");
});
You’ve read till the end, so as a thank you here’s the link to the dark theme I just mentioned. It even comes with a dark scroll bar and custom drop-down arrows. https://github.com/Amoenus/SwaggerDark/
Thank you for reading. Consider subscribing and leaving a comment.
