[FEATURE] Offer dark and white color schemes

mbonaker · May 1, 2022 · 7076910 · 7076910
1 parent c0be250
commit 7076910
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 17 deletions.
diff --git a/popup/color-picker.css b/popup/color-picker.css
@@ -17,10 +17,9 @@
  */
 
 body {
-	background: #1c1b22;
-	color: #eeeeee;
+	background: var(--main-background);
+	color: var(--main-text-color);
 	padding: 0;
-	color-scheme: dark;
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
@@ -30,8 +29,28 @@ body {
 	--main-spacing: 5px;
 }
 
+@media (prefers-color-scheme: light) {
+	body {
+		--main-background: #fefefe;
+		--main-background-highlight: #00000020;
+		--main-background-variant-1: #ddd;
+		--layer-shadow-color: white;
+		--main-text-color: black;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		--main-background: #050505;
+		--main-background-highlight: #ffffff20;
+		--main-background-variant-1: #202020;
+		--layer-shadow-color: black;
+		--main-text-color: white;
+	}
+}
+
 canvas {
-	background: #000;
+	background: var(--main-background);
 }
 
 .pickers {
@@ -52,8 +71,7 @@ canvas {
 }
 .color-list {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, 2em);
-	grid-template-rows: repeat(auto-fill, 2em);
+	grid-template-columns: repeat(18, 1fr);
 	gap: var(--main-spacing);
 	flex-grow: 1;
 	padding: var(--main-spacing);
@@ -73,13 +91,23 @@ canvas {
 	display: flex;
 	order: 10;
 }
+.color-list form button {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+.color-list form button:hover,
+.color-list form button:active {
+	background: var(--main-background-highlight);
+}
 .color-list > * {
 	--color: transparent;
 	background: var(--color);
 	aspect-ratio: 1 / 1;
 }
 .color-list .color.reference {
-	grid-area: 1 / 1 / 3 / 3;
+	grid-area: 1 / 1 / 2 / 4;
+	aspect-ratio: auto;
 }
 
 .color-list .color.bright {
@@ -112,7 +140,7 @@ canvas {
 	position: absolute;
 	display: flex;
 	z-index: 100;
-	background: black;
+	background: var(--main-background);
 	left: 0;
 	top: 0;
 	transform: translateY(-100%);
@@ -131,7 +159,7 @@ canvas {
 	top: 0;
 	right: 0;
 	bottom: 0;
-	background: #000;
+	background: var(--main-background);
 	overflow: auto;
 }
 
@@ -141,7 +169,7 @@ canvas {
 }
 
 .color-set-selector-item:hover {
-	background: #222;
+	background: var(--main-background-highlight);
 }
 
 form.new-selection {
@@ -150,7 +178,7 @@ form.new-selection {
 }
 
 .color-list .color .context-menu button {
-	background: black;
+	background: var(--main-background);
 	border: 1px solid #888;
 	padding: 5px 10px;
 	margin-right: -1px;
@@ -223,13 +251,22 @@ form.new-selection {
 	padding: 0 0 0 var(--main-spacing);
 }
 
+button {
+	color: var(--main-text-color);
+	background: none;
+}
+button:hover,
+button:active {
+	background: var(--main-background-highlight);
+}
+
 .status-line button {
 	background: none;
 	border: 0 none;
 }
 
 .status-line button:hover {
-	background: rgba(255, 255, 255, 0.2);
+	background: var(--main-background-highlight);
 }
 
 .status-line button, .status-line fieldset {
@@ -269,16 +306,16 @@ input.color-set-name {
 }
 
 .color-set-selector-item .actions-container button:hover {
-	background: rgba(255, 255, 255, 0.2);
+	background: var(--main-background-highlight);
 }
 
 .headline {
 	position: sticky;
 	top: 0;
-	background: #222;
+	background: var(--main-background-variant-1);
 	display: flex;
 	justify-content: space-between;
-	box-shadow: 0 0 7px 0px black;
+	box-shadow: 0 0 7px 0px var(--layer-shadow-color);
 	z-index: 10;
 }
 
@@ -297,7 +334,7 @@ input.color-set-name {
 }
 
 .color-set-selector .headline > button:hover {
-	background: rgba(255, 255, 255, 0.2);
+	background: var(--main-background-highlight);
 }
 
 .color-set-selector-item {

diff --git a/popup/color-picker.html b/popup/color-picker.html
@@ -23,6 +23,7 @@
 	<link rel="stylesheet" href="color-picker.css" />
 	<script src="../node_modules/chroma-js/chroma.js"></script>
 	<script src="color-picker.js" type="module"></script>
+	<meta name="color-scheme" content="light dar" />
 </head>
 <body>
 	<div class="pickers"></div>
@@ -60,7 +61,7 @@
 		<div class="color" tabindex="0">
 			<div class="context-menu">
 				<button class="context-menu-action" data-action="copy-hex">Copy "<span class="set-content" data-content="hex"></span>"</button>
-				<button class="context-menu-action" data-action="copy-lch">Copy "<span class="set-content" data-content="lch"></span>"</button>
+				<button class="context-menu-action" data-action="copy-lch">Copy as lch</button>
 				<button class="context-menu-action" data-action="remove">Remove</button>
 				<button class="context-menu-action" data-action="gradient-1">Set as Gradient Start</button>
 				<button class="context-menu-action" data-action="gradient-2">Set as Gradient End</button>