diff --git a/templates/swagger/ui.tmpl b/templates/swagger/ui.tmpl
index eb30578aca7f..7ad39dd8e0c2 100644
--- a/templates/swagger/ui.tmpl
+++ b/templates/swagger/ui.tmpl
@@ -4,33 +4,6 @@
 		<meta charset="UTF-8">
 		<title>Gitea API</title>
 		<link href="{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}" rel="stylesheet">
-		<style>
-			html {
-				box-sizing: border-box;
-				overflow-y: scroll;
-			}
-			*, *:before, *:after {
-				box-sizing: inherit;
-			}
-			body {
-				margin: 0;
-				background: #fff;
-			}
-			.swagger-back-link {
-				color: #1f69c0;
-				text-decoration: none;
-				position: absolute;
-				top: 1rem;
-				right: 1.5rem;
-				display: flex;
-				align-items: center;
-			}
-			.swagger-back-link svg {
-				color: inherit;
-				fill: currentcolor;
-				margin-right: .5rem;
-			}
-		</style>
 	</head>
 	<body>
 		<a class="swagger-back-link" href="{{AppUrl}}">{{svg "octicon-reply" 16}}{{.i18n.Tr "return_to_gitea"}}</a>
diff --git a/web_src/less/standalone/swagger.less b/web_src/less/standalone/swagger.less
new file mode 100644
index 000000000000..c34469bede3f
--- /dev/null
+++ b/web_src/less/standalone/swagger.less
@@ -0,0 +1,31 @@
+html {
+  box-sizing: border-box;
+  overflow-y: scroll;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+  background: #fff;
+}
+
+.swagger-back-link {
+  color: #1f69c0;
+  text-decoration: none;
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.swagger-back-link svg {
+  color: inherit;
+  fill: currentColor;
+  margin-right: .5rem;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 9a69c550f202..b8c26daceec2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -50,6 +50,7 @@ module.exports = {
     ],
     swagger: [
       resolve(__dirname, 'web_src/js/standalone/swagger.js'),
+      resolve(__dirname, 'web_src/less/standalone/swagger.less'),
     ],
     serviceworker: [
       resolve(__dirname, 'web_src/js/serviceworker.js'),
