Add a light mode to the site.
This commit is contained in:
		
							parent
							
								
									fdff5a667b
								
							
						
					
					
						commit
						d2ea6b6a0f
					
				| @ -5,6 +5,7 @@ | ||||
|   --header-divider-color: #6a687a; | ||||
| 
 | ||||
|   --stream-divider-color: #6ccff6; | ||||
|   --stream-post-background-color: #1f1f1f; | ||||
| 
 | ||||
|   --src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, | ||||
|     Consolas, "DejaVu Sans Mono", monospace; | ||||
| @ -21,6 +22,28 @@ | ||||
|   --table-even-background-color: #141414; | ||||
| } | ||||
| 
 | ||||
| @media (prefers-color-scheme: light) { | ||||
|   :root { | ||||
|     --site-background-color: #f5f5f5; | ||||
|     --site-text-color: #000003; | ||||
|     --header-divider-color: #959785; | ||||
| 
 | ||||
|     --stream-divider-color: #933009; | ||||
|     --stream-post-background-color: #e0e0e0; | ||||
| 
 | ||||
|     --src-block-background-color: #ebebeb; | ||||
|     --src-block-border-color: #7b7d70; | ||||
|     --src-block-language-color: #f5f5f5; | ||||
|     --src-block-language-background: #7b7d70; | ||||
| 
 | ||||
|     --quote-block-border-color: #7b7d70; | ||||
| 
 | ||||
|     --table-border-color: #959785; | ||||
|     --table-odd-background-color: #f5f5f5; | ||||
|     --table-even-background-color: #ebebeb; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| body { | ||||
|   color: var(--site-text-color); | ||||
|   background-color: var(--site-background-color); | ||||
| @ -76,7 +99,7 @@ body { | ||||
| 
 | ||||
|   /* A blog post in a blog stream (for example, the homepage). */ | ||||
|   .blog_stream_post { | ||||
|     background: #1f1f1f; | ||||
|     background: var(--stream-post-background-color); | ||||
|     padding: 1rem 0.2rem; | ||||
|   } | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Tom Alexander
						Tom Alexander