mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 19:38:23 +00:00 
			
		
		
		
	Add dark mode to API Docs (#24971)
Add a dark mode to Swagger UI via CSS `invert`. No toggle or anything, but I think it's better than nothing. Users can toggle via their OS. Also includes a few misc CSS cleanups on the page. <img width="1264" alt="Screenshot 2023-05-28 at 20 25 06" src="https://github.com/go-gitea/gitea/assets/115237/de761b85-ca0c-4220-bee4-73798a4360a0"> <img width="1260" alt="Screenshot 2023-05-28 at 20 02 54" src="https://github.com/go-gitea/gitea/assets/115237/29188ed2-c167-47f5-bf28-46193d1da22c">
This commit is contained in:
		| @@ -1,12 +1,7 @@ | ||||
| html { | ||||
|   box-sizing: border-box; | ||||
|   overflow-y: scroll; | ||||
| } | ||||
|  | ||||
| *, | ||||
| *::before, | ||||
| *::after { | ||||
|   box-sizing: inherit; | ||||
|   box-sizing: border-box; | ||||
| } | ||||
|  | ||||
| body { | ||||
| @@ -24,8 +19,24 @@ body { | ||||
|   align-items: center; | ||||
| } | ||||
|  | ||||
| .swagger-back-link:hover { | ||||
|   text-decoration: underline; | ||||
| } | ||||
|  | ||||
| .swagger-back-link svg { | ||||
|   color: inherit; | ||||
|   fill: currentcolor; | ||||
|   margin-right: 0.5rem; | ||||
| } | ||||
|  | ||||
| @media (prefers-color-scheme: dark) { | ||||
|   body { | ||||
|     background: #1e1e1e; | ||||
|   } | ||||
|   .swagger-ui, .swagger-back-link { | ||||
|       filter: invert(88%) hue-rotate(180deg); | ||||
|   } | ||||
|   .swagger-ui .microlight { | ||||
|       filter: invert(100%) hue-rotate(180deg); | ||||
|   } | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user