Improve styles for light/dark

Author: aarongustafson

demo/styles.css

@@ -5,11 +5,16 @@
 /* Base Layout
    ========================================================================== */
 
+:root {
+  color-scheme: light dark;
+}
+
 body {
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		Oxygen, Ubuntu, Cantarell, sans-serif;
 	line-height: 1.6;
-	color: #333;
+	color: CanvasText;
+	background: Canvas;
 	max-width: 1400px;
 	margin: 0 auto;
 	padding: 1rem;
@@ -37,7 +42,7 @@ h1 {
 h2 {
 	font-size: 1.5rem;
 	margin-block: 2rem 1rem;
-	border-bottom: 2px solid #e0e0e0;
+	border-bottom: 2px solid;
 	padding-bottom: 0.5rem;
 }
 
@@ -51,7 +56,7 @@ p {
 }
 
 code {
-	background: #f5f5f5;
+	background: ButtonFace;
 	padding: 0.125rem 0.25rem;
 	border-radius: 3px;
 	font-family: 'Courier New', Courier, monospace;
@@ -62,10 +67,18 @@ code {
    ========================================================================== */
 
 a {
-	color: #0066cc;
+	color: LinkText;
 	text-decoration-skip-ink: auto;
 }
 
+a:visited {
+	color: VisitedText;
+}
+
+a:active {
+	color: ActiveText;
+}
+
 a:hover {
 	text-decoration: underline;
 }
@@ -79,14 +92,13 @@ header {
 
 header p {
 	font-size: 1.1rem;
-	color: #666;
 }
 
 footer {
 	margin-block-start: 3rem;
 	padding-block-start: 2rem;
-	border-top: 2px solid #e0e0e0;
-	color: #666;
+	border-top: 2px solid ButtonBorder;
+	color: GrayText;
 	font-size: 0.9rem;
 }
 
@@ -96,13 +108,13 @@ footer {
 .demo-section {
 	margin-block: 2rem;
 	padding: 1.5rem;
-	background: #fafafa;
+	background: ButtonFace;
 	border-radius: 8px;
-	border: 1px solid #e0e0e0;
+	border: 1px solid ButtonBorder;
 }
 
 .demo-section > p {
-	color: #666;
+	color: CanvasText;
 	margin-block-end: 1rem;
 }
 
@@ -136,14 +148,14 @@ footer {
    ========================================================================== */
 
 pre {
-	background: #282c34;
-	color: #abb2bf;
+	background: Field;
+	color: FieldText;
 	padding: 1rem;
 	border-radius: 6px;
 	overflow-x: auto;
 	margin: 0;
 	font-size: 0.875rem;
-	line-height: 1.5;
+	line-height: 1.3;
 }
 
 pre code {
@@ -153,12 +165,9 @@ pre code {
 	font-size: inherit;
 }
 
-/* Syntax Highlighting for Component
-   ========================================================================== */
-
 pre code mark {
-	background: rgba(97, 175, 239, 0.2);
-	color: #6ac0ff;
+	background: Mark;
+	color: MarkText;
 	border-radius: 2px;
 	padding: 0.125rem 0.25rem;
 	font-weight: 600;
@@ -168,10 +177,10 @@ pre code mark {
    ========================================================================== */
 
 .demo {
-	background: white;
+	background: Canvas;
 	padding: 1rem;
 	border-radius: 6px;
-	border: 1px solid #ddd;
+	border: 1px solid ButtonBorder;
 }
 
 /* Form Elements
@@ -212,27 +221,27 @@ select,
 textarea {
 	display: block;
 	padding: 0.25rem 0.5rem;
-	border: 1px solid #ccc;
+	border: 1px solid ButtonBorder;
 	border-radius: 4px;
 	font-size: 1rem;
 	font-family: inherit;
 	width: 100%;
 	max-width: 400px;
+	background: Field;
+	color: FieldText;
 }
 
-input:focus,
-select:focus,
-textarea:focus {
-	outline: 2px solid #0066cc;
+:focus-visible {
+	outline: 2px solid AccentColor;
 	outline-offset: 2px;
-	border-color: #0066cc;
+	border-color: AccentColor;
 }
 
 button[type='submit'],
 button[type='reset'] {
-	background: #0066cc;
-	color: white;
-	border: none;
+	background: ButtonFace;
+	color: ButtonText;
+	border: 1px solid ButtonBorder;
 	padding: 0.75rem 1.5rem;
 	border-radius: 4px;
 	font-size: 1rem;
@@ -244,23 +253,15 @@ button[type='reset'] {
 
 button[type='submit']:hover,
 button[type='reset']:hover {
-	background: #0052a3;
-}
-
-button[type='reset'] {
-	background: #666;
-}
-
-button[type='reset']:hover {
-	background: #555;
+	opacity: 0.8;
 }
 
 small {
 	display: block;
 	font-style: italic;
 	font-weight: normal;
 	margin-block: 0.5rem 1rem;
-	color: #666;
+	color: GrayText;
 }
 
 /* Radio/Checkbox "Other" Pattern
@@ -290,8 +291,9 @@ small {
    ========================================================================== */
 
 .note {
-	background: #fff3cd;
-	border-left: 4px solid #ffc107;
+	background: Mark;
+	color: MarkText;
+	border-left: 4px solid AccentColor;
 	padding: 1rem;
 	margin-block: 1rem;
 	border-radius: 4px;
@@ -306,8 +308,9 @@ small {
    ========================================================================== */
 
 .api-reference {
-	background: #e3f2fd;
-	border-left: 4px solid #2196f3;
+	background: SelectedItem;
+	color: SelectedItemText;
+	border-left: 4px solid AccentColor;
 	padding: 1rem;
 	margin-block: 2rem;
 	border-radius: 4px;
@@ -316,3 +319,7 @@ small {
 .api-reference p {
 	margin: 0;
 }
+
+.api-reference a {
+  color: inherit;
+}