ligtmode

2021-06-04 12:23:32 -05:00 · 2021-06-04 12:23:32 -05:00 · 4918fddb80
parent b04e9ce805
commit 4918fddb80
25 changed files with 379 additions and 182 deletions
--- a/src/css/align_buttons.css
+++ b/src/css/align_buttons.css
@ -18,14 +18,12 @@
  width: var(--x13);
  line-height: var(--x16);
  text-align: center;
-  outline: solid var(--z1) 1px;
-  background-color: var(--z2);
  cursor: pointer;
  position: relative;
 }

 .align_button:hover {
-  background-color: var(--z3);
+  background-color: var(--z0);
  border-color: var(--z3);
 }

--- a/src/css/app.css
+++ b/src/css/app.css
@ -13,7 +13,7 @@
  display: block;
 }

- #workarea {
+#workarea {
  display: block;
  position:absolute;
  top: var(--x8);
@ -26,7 +26,12 @@
  justify-content: center;
  transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
  border-radius: var(--x2);
-  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
+  box-shadow: var(--shadow-bg);
+}
+
+.inverted #svgcanvas,
+.inverted #workarea {
+  background:  var(--z1);
 }

 #workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
@ -38,7 +43,7 @@
 }

 #workarea.eyedropper {
-  cursor: url(../images/eyedropper.png) 0 16, crosshair;
+  cursor: url(../images/eyedropper.svg) 0 16, crosshair;
 }

 #workarea.fhpath {
--- a/src/css/base.css
+++ b/src/css/base.css
@ -1,4 +1,4 @@
-:root {          /* red */        /* yellow */     /* green */
+:root, .inverted-undo {          /* red */        /* yellow */     /* green */
 --z0: #111827;   --a0: #291e2a;   --b0: #292329;   --c0: #16262f; 
 --z1: #1e2433;   --a1: #42242e;   --b1: #43322a;   --c1: #1b373a; 
 --z2: #2b313f;   --a2: #5b2a32;   --b2: #5d412b;   --c2: #1e4944; 
@ -33,7 +33,9 @@
 --d13: #c6cffa;  --e13: #cec5f9;  --f13: #d9c4fb;  --g13: #fbc3d9; 
 --d14: #d8defb;  --e14: #ddd8fa;  --f14: #e5d7fb;  --g14: #fbd6e5; 
 --d15: #eaedfb;  --e15: #edeafb;  --f15: #f0eafb;  --g15: #faeaf1;
-  -webkit-font-smoothing: antialiased;
+-webkit-font-smoothing: antialiased;
+--shadow-bg: 0 var(--x2) var(--x4) var(--z0);
+--shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4);
 }

 .inverted {
@ -71,7 +73,9 @@
 --d2:  #c6cffa;  --e2:  #cec5f9;  --f2:   #d9c4fb;  --g2:   #fbc3d9; 
 --d1:  #d8defb;  --e1:  #ddd8fa;  --f1:   #e5d7fb;  --g1:   #fbd6e5; 
 --d0:  #eaedfb;  --e0:  #edeafb;  --f0:   #f0eafb;  --g0:   #faeaf1;
-  -webkit-font-smoothing: auto;
+-webkit-font-smoothing: auto;
+--shadow-bg: 0 var(--x2) var(--x4) var(--z3);
+--shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.1);
 }

 :root {
@ -91,20 +95,9 @@
  --x14: 56px;
  --x15: 60px;
  --x16: 64px;
-
  --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  --transition-duration: 333ms;
-  --transition-fast: 200ms;
  --panel-width: calc(var(--x10)*2*2 + var(--x1));
-  --transition:  all var(--transition-fast) ease;
-  --transition-none:  none;
-}
-
-a, a:link, a:active, a:visited {
-  color: var(--d6);
-}
-
-a:hover {
-  color: var(--d8);
+  --transition-duration: 200ms;
+  --transition:  all var(--transition-duration) ease;
 }
--- a/src/css/color-tool.css
+++ b/src/css/color-tool.css
@ -103,8 +103,8 @@
 }

 #tool_canvas .color_block {
-  width: 100%;
-  height: 100%;
+  width: 58px;
+  height: 38px;
 }

 #tool_canvas .color_block svg {
--- a/src/css/darkmode.css
+++ b/src/css/darkmode.css
--- a/src/css/draginput.css
+++ b/src/css/draginput.css
@ -15,6 +15,7 @@
  margin: 0 var(--x2) var(--x2) 0;
  overflow: hidden;
  transition: var(--transition);
+  box-shadow:  none;
 }

 .dragging .draginput {
@ -23,11 +24,13 @@

 .dragging .draginput.active {
  pointer-events:  all;
+  box-shadow: none;
 }

 .draginput:hover {
  background-color: var(--z3);
  transition: none;
+  box-shadow:  var(--shadow-bg);
 }

 .draginput:hover span,
@ -296,3 +299,28 @@ body.dragging .draginput .angle {
 .draginput.font_style:hover {
  background-color: var(--z2);
 }
+
+.inverted .draginput {
+  background-color: var(--z1);
+}
+
+.inverted .draginput {
+  background-color: var(--z1);
+}
+
+
+.inverted .draginput:hover {
+  background-color: var(--z0);
+}
+
+.inverted .draginput .angle {
+  background-color: var(--z2);
+}
+
+.inverted .draginput span {
+  color: var(--z9);
+}
+
+body.inverted.dragging .draginput .angle {
+  background-color: var(--z1);
+}
--- a/src/css/jgraduate.css
+++ b/src/css/jgraduate.css
@ -10,25 +10,48 @@
 * Licensed under the Apache License Version 2
 */

+ #color_picker {
+  position: absolute;
+  display: none;
+  background: var(--z1);
+  width: calc(9 * var(--x15));
+  height: calc(6 * var(--x15));
+  border-radius: var(--x3);
+  z-index: 5;
+  box-shadow: var(--shadow);
+  padding: var(--x4);
+  color:  var(--z8);
+}
+
+ #color_picker input {
+ 	color:  var(--z14);
+ }
+
 h2.jGraduate_Title {
  display: none;
 }

-.jGraduate_Picker {
-	position: absolute;
-	padding: 20px;
+.jGraduate_tabs {
+	padding:  var(--x4);
+	--neg:  calc(var(--x4) *-1);
+	margin: var(--neg) var(--neg) 0 var(--neg);
 }

 .jGraduate_tabs li {
 	display: inline-block;
-	padding: 5px 10px;
-	margin-right: 5px;
+	padding: var(--x4) var(--x4) var(--x4) var(--x4);
 	cursor: pointer;
+	color:  var(--z9);
 }

-li.jGraduate_tab_current {
-  background: #fff;
-  border-radius: 3px 3px 0 0;
+.jGraduate_tabs li:hover {
+	color:  var(--z12);
+}
+
+li.jGraduate_tab_current,
+li.jGraduate_tab_current:hover {
+  color:  var(--d7);
+  -webkit-text-stroke: 0.5px var(--d8);
 }

 .jGraduate_colPick {
@ -43,44 +66,41 @@ li.jGraduate_tab_current {

 .jGraduate_tabs {
 	position: relative;
-	background-color: #ddd;
-	padding: 10px 10px 0 10px;
-	margin: -20px -20px 20px -20px;
-	border-radius: 3px 3px 0 0;
+	padding: 0;
 }

 div.jGraduate_Swatch {
 	float: left;
-	margin: 0 15px 0 0;
+	margin: 0 var(--x4) 0 0;
 }
+
 div.jGraduate_GradContainer {
 	border: solid #000 1px;
 	background-image: url(../images/map-opacity.png); 
 	background-position: 0px 0px;
-	height: 256px;
-	width: 256px;
+	height: calc(var(--x16) * 4);
+	width: calc(var(--x16) * 4);
 	position: relative;
 }

 div.jGraduate_GradContainer div.grad_coord {
-  background: rgba(0,0,0,0.8);
-  border: 2px solid white;
-  border-radius: 15px;
-  -moz-border-radius: 5px;
-  width: 14px;
-  height: 14px;
+  background: var(--z0);
+  color: var(--z12);
+  box-shadow:  0 2px 4px rgba(0,0,0,0.3);
+  border-radius: var(--x4);
+  width: var(--x4);
+  height: var(--x4);
  position: absolute;
-  margin: -7px -7px;
+  margin: calc(var(--x2) * -1);
  top: 0;
  left: 0;
  text-align: center;
-  font-size: 8px;
+  font-size: 10px;
  line-height: 14px;
-  color: white;
  text-decoration: none;
-  cursor: pointer;
-  -moz-user-select: none;
-  -webkit-user-select: none;
+  cursor: move;
+  user-select: none;
+  font-weight: bold;
 }

 .jGraduate_AlphaArrows {
@ -90,7 +110,7 @@ div.jGraduate_GradContainer div.grad_coord {
 }

 div.jGraduate_Opacity {
-	border: 2px inset #eee;
+	border: solid var(--z13) 1px;
 	margin-top: 14px;
 	background-color: black;
 	background-image: url(../images/Maps.png);
@ -103,9 +123,12 @@ div.jGraduate_StopSlider {
 	margin: -10px 0 0 -10px;
 	width: 276px;
 	overflow: visible;
-	background: white;
-	height: 45px;
-	cursor: pointer;
+	height: var(--x11);
+	cursor: copy;
+}
+
+div.jGraduate_StopSlider svg path {
+	cursor:  ew-resize;
 }

 div.jGraduate_StopSection {
@ -121,6 +144,14 @@ input.jGraduate_Ok, input.jGraduate_Cancel {
 	display: block;
 	width: 100px;
 }
+
+.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel, .jGraduate_Picker input.Cancel {
+	background-color:  var(--z5);
+}
+.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel:hover, .jGraduate_Picker input.Cancel:hover {
+	background-color:  var(--z6);
+}
+
 input.jGraduate_Ok {
 	margin: 0 0 5px 0;
 }
@ -140,33 +171,30 @@ input.jGraduate_Ok {
 }

 label.jGraduate_Form_Heading {
-
-  color: #333;
-	padding: 2px;
-	font-weight: bold;
-	font-size: 13px;
+  color: var(--z15);
+	font-size: 14px;
 }

 div.jGraduate_Form_Section {
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	padding: 15px 5px 5px 5px;
-	margin: 5px 2px;
+	padding: var(--x4) var(--x1) var(--x1) var(--x1);
 	width: 100px;
 	text-align: center;
-	overflow: auto;
-	background: #eee;
+	overflow: hidden;
+	background: var(--z2);
+	border-radius: var(--x1);
+	position: relative;
 }

 div.jGraduate_Form label {
-	padding: 0 2px;
-	color: #333;
+	color: var(--x12);
+	position: relative;
+	top: -6px;
+	padding:  0 var(--x2);
 }

 div.jGraduate_StopSection input[type=text],
 div.jGraduate_Slider input[type=text] {
 	width: 33px;
-	color: #333;
 }

 div.jGraduate_LightBox {
@ -183,14 +211,12 @@ div.jGraduate_LightBox {
 div.jGraduate_stopPicker {
  position: absolute;
  display: none;
-  background: 
-  white;
+  background: white;
  padding: 20px;
  border-radius: 3px;
  width: 530px;
  height: 300px;
-  box-shadow: 0 5px 25px 
-  black;
+  box-shadow: 0 5px 25px black;
 }


@ -206,13 +232,11 @@ div.jGraduate_stopPicker {
 	position: absolute;
 	right: 10px;
 	top: 0;
-	color: #999;
 	font-weight: bold;
 }

 .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
  margin: 0 3px 0 0;
-  color: #333;
 }

 .jGraduate_gradPick .jGraduate_Form {
@ -233,12 +257,6 @@ div.jGraduate_stopPicker {
  float: left;
 }

-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
-width: auto;
-float: left;
-font-size: 11px;
-}
-
 .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
  float: none;
 }
@ -247,6 +265,11 @@ font-size: 11px;
  clear: left;
 }

+.jGraduate_gradPick .jGraduate_Form label.match-center {
+  white-space: nowrap;
+  font-size:  11px;
+}
+
 .jGraduate_gradPick .jGraduate_Points {
 	position: static;
 	float: left;
@ -280,7 +303,6 @@ font-size: 11px;
 	float: left;
 	width: 100%;
  position: relative;
-  margin: 5px 0;
 }

 .jGraduate_Slider .jGraduate_Form_Section {
@ -292,16 +314,17 @@ font-size: 11px;


 .jGraduate_Slider label.prelabel {
-	width: 40px;
+	width: var(--x10);
 	text-align: left;
+	line-height: var(--x8);
 }

 .jGraduate_SliderBar {
-	width: 140px;
+	width: 120px;
 	float: left;
-	margin: 0 5px;
-	border:1px solid #BBB;
-	height:20px;
+	margin: 0 var(--x2);
+	border: 1px solid var(--z6);
+	height: var(--x4);
 	position: relative;
 }

@ -310,7 +333,7 @@ div.jGraduate_Slider input {
 }

 div.jGraduate_Slider img {
-	top: 0;
+	top: -2px;
 	left: 0;
 	position: absolute;
 	cursor:ew-resize;
@ -320,13 +343,13 @@ div.jGraduate_Slider img {
  -webkit-appearance: none;
 	margin: 0;
  position: absolute;
-  bottom: 5px;
-  right: 5px;
+  bottom: var(--x2);
+  right: var(--x2);
 }

 .jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
  margin: 0;
  position: absolute;
-	bottom: 5px;
-	left: 5px;
+	bottom: var(--x2);
+	left: var(--x2);
 }
--- a/src/css/jpicker.css
+++ b/src/css/jpicker.css
@ -1,9 +1,18 @@
+table.jPicker {
+    border-collapse: collapse;
+    margin-top: var(--x4);
+}
+
+table.jPicker td {
+    padding:  var(--x1);
+}
+
 .jPicker .Icon {
    display: inline-block;
-    height: 24px;
+    height: var(--x6);
    position: relative;
    text-align: left;
-    width: 25px;
+    width: var(--x6);
 }
 .jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
    background-position: 2px 2px;
@ -26,14 +35,9 @@
    z-index: 10;
 }

-table.jPicker {
-    width: 545px;
-     z-index: 20;
-}
-
 .jPicker .Move {
-    background-color: #ddd;
-    border-color: #fff #666 #666 #fff;
+    background-color: var(--z12);
+    border-color: var(--z15) var(--z6) var(--z6) var(--z15);
    border-style: solid;
    border-width: 1px;
    cursor: move;
@ -45,7 +49,7 @@ table.jPicker {
 }

 .jPicker .Map {
-  border:  solid #000 1px;
+  border:  solid var(--z1) 1px;
  height: 256px;
  width: 256px;
  cursor: crosshair;
@ -55,12 +59,11 @@ table.jPicker {
  position: relative;
 }

-
 .jPicker .Bar {
-    border:  solid #000 1px;
+    border:  solid var(--z1) 1px;
    cursor: n-resize;
    height: 260px;
-    margin: 0 15px;
+    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
@ -69,7 +72,6 @@ table.jPicker {
    width: 20px;
 }

-
 .jPicker .Map .Map1, 
 .jPicker .Map .Map2, 
 .jPicker .Map .Map3, 
@ -130,9 +132,8 @@ table.jPicker {
    width: 62px;
 }

-
 .jPicker .Preview div span {
-    border: 1px solid #000;
+    border: 1px solid var(--z0);
    display: block;
    height: 30px;
    margin: 0 auto;
@ -157,8 +158,9 @@ table.jPicker {

 .jPicker td.Radio {
    margin: 0;
-    padding: 0;
+    padding: 0 0 0 var(--x2);
    width: var(--x8);
+    white-space: nowrap;
 }
 .jPicker td.Radio input {
    margin: 0 var(--x1) 0 0;
@ -172,33 +174,51 @@ table.jPicker {
    padding: 0;
    text-align: left;
    width: 70px;
+    white-space: nowrap;
 }
 .jPicker tr.Hex td.Text {
    width: 100px;
-    color: #666;
+}
+
+.jPicker tr.Hex td.Text label {
+    margin-left: var(--x4);
 }

 .jPicker tr.Hex td.Text span {
    width: 100px;
    color: #333;
 }
+
 .jPicker td.Text input {
-    background-color: #fff;
-    height: 15px;
-    margin: 0 0 0 5px;
+    background-color: var(--z15);
+    height: var(--x4);
+    margin: 0 0 0 var(--x1);;
    text-align: left;
+    width: var(--x8);
+    color: var(--z15);
+}
+
+#color_picker input[type=text], #color_picker  input[type=number] {
+  -webkit-appearance:  none;
  width: 30px;
-    color: #333;
+  background: var(--z0);
+  border: none;
+  border-radius:  var(--x1);
+}
+
+#color_picker input[type=radio] {
+    position: relative;
+    top:  2px;
 }

 #color_picker .jPicker tr.Hex td.Text input.Hex {
-    width: 50px;
+    width: var(--x12);
    display: inline-block;
    float: none;
 }

 .jPicker tr.Hex td.Text input.AHex {
-    width: 20px;
+    width: var(--x5);
    display: none;
 }
 .jPicker .Grid {
@ -207,14 +227,22 @@ table.jPicker {
    width: 108px;
 }
 .jPicker .Grid span.QuickColor {
-    cursor: pointer;
+    cursor: url(../images/eyedropper.svg) 0 23, crosshair;
+    background-repeat:  no-repeat;
    display: inline-block;
-    height: 15px;
-    line-height: 15px;
+    height: var(--x4);
+    line-height: var(--x4);
    margin: 0;
    padding: 0;
-    width: 18px;
+    width: var(--x4);
 }
+
+.jPicker .Grid span.QuickColor:hover {
+    position: relative;
+    z-index: 10;
+    outline:  solid var(--z0) 1px;
+}
+
 .jPicker td  {
  vertical-align:  top;
 }
--- a/src/css/menu.css
+++ b/src/css/menu.css
@ -38,7 +38,6 @@
 }

 .menu_list {
-  display: none;
  position: absolute;
  left: 0;
  top: var(--x8);
@ -46,14 +45,20 @@
  background: var(--z15);
  padding: var(--x2) 0;
  border-radius: 0 var(--x2) var(--x2) var(--x2);
-  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4);
+  box-shadow:  var(--shadow);
 }

+
 #menu_bar.active .menu.open .menu_title {
  background: var(--z15);
  color: var(--z1);
 }

+.inverted #menu_bar.active .menu.open .menu_title {
+  background: var(--z0);
+  color: var(--z15);
+}
+
 .menu .menu_list {
  display: none;
  position: absolute;
@ -64,7 +69,7 @@
  overflow: hidden;
  line-height: var(--x6);
  padding: var(--x1) var(--x16) var(--x1) var(--x6);
-  cursor: default;
+  cursor: pointer;
  color: var(--z3);
 }

@ -127,3 +132,48 @@
 #modal_donate {
  display: none;
 }
+
+.menu-right {
+  margin-left: auto;
+}
+
+.menu-right button {
+  background: transparent;
+  line-height: var(--x5);
+}
+
+.menu-right button:hover {
+  background: transparent;
+}
+
+.menu-right button:active {
+  box-shadow: none;
+  outline: none;
+}
+
+.menu-right button:hover svg {
+  fill:  var(--z12);
+}
+
+.menu-right svg {
+  fill:  var(--z5);
+}
+
+#logo svg {
+  pointer-events: none;
+  margin-top: var(--x2);
+  fill: var(--z7);
+}
+
+#logo svg path:last-child {
+  fill:  var(--z13);
+}
+
+#logo:hover svg {
+  fill:  var(--z9);
+}
+
+#logo svg path:last-child {
+  fill:  var(--z15);
+}
+
--- a/src/css/method-draw.css
+++ b/src/css/method-draw.css
@ -13,6 +13,10 @@ body {
  padding: 0;
 }

+body.inverted {
+  background: var(--z2);
+}
+
 ::selection {background: #000; color: #fff; /* Safari */}
 ::-moz-selection {background: #000; color: #fff; /* Firefox */}

@ -41,7 +45,11 @@ html, body {
 }

 ::-webkit-scrollbar-corner {
-  background: var(--z1);
+  background: transparent;
+}
+
+.inverted ::-webkit-scrollbar-thumb {
+    background: var(--z3);
 }


@ -76,12 +84,6 @@ div#font-selector .font-item:hover {
  background-color: #eee;
 }

-#color_picker input[type=text], #color_picker  input[type=number] {
-  width: 30px;
-  background: #fff;
-  border: solid rgba(0,0,0,0.3) 1px;
-}
-
 .dropdown_set input[type=text],  .dropdown_set input[type=number] {
  width: 50px;
 }
@ -236,17 +238,6 @@ input[type=file] {
  opacity: 0;
 }

- #color_picker {
-  position: absolute;
-  display: none;
-  background: #fff;
-  height: 350px;
-  border-radius: 3px;
-  z-index: 5;
-  box-shadow: 0 5px 10px #000;
-  width: 530px;
-}
-
 #tools_bottom {
  position: absolute;
  left: var(--x12);
@ -279,11 +270,6 @@ input[type=file] {
    clear:both;
 }

-#logo svg {
-  pointer-events: none;
-  margin-top: var(--x2);
-}
-
 input[readonly=readonly]:focus {
  box-shadow: none;
 }
--- a/src/css/rulers.css
+++ b/src/css/rulers.css
@ -6,6 +6,10 @@
  -webkit-font-smoothing: none;
 }

+.inverted #rulers > div {
+  background: var(--z1);
+}
+
 #rulers #ruler_corner {
  top: var(--x8);
  left: var(--x12);
--- a/src/css/shapelib.css
+++ b/src/css/shapelib.css
@ -57,8 +57,7 @@
  border-left-color: var(--z3);
 }

-
- .tools_flyout {
+.tools_flyout {
  position: absolute;
  display: none;
  cursor: pointer;
@ -69,7 +68,7 @@
  height: 324px;
  background: var(--z15);
  border-radius: 5px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow);
 }

 .tools_flyout .tool_button {
--- a/src/css/tools.css
+++ b/src/css/tools.css
@ -1,4 +1,4 @@
- #tools_left {
+#tools_left {
  position: absolute;
  border-right: none;
  width: var(--x12);
@ -14,6 +14,23 @@
  cursor: pointer;
  line-height: 60px;
  text-align: center;
+  transform: scale(0.8);
+}
+
+.inverted .tool_button svg {
+  fill: var(--z13);
+}
+
+.tool_button:hover {
+  transform: scale(1);
+}
+
+.tool_button:hover svg {
+  fill: var(--z13);
+}
+
+.tool_button.current {
+  transform: scale(1.4);
 }

 .tool_button svg {
@ -21,21 +38,30 @@
  fill: var(--z5);
 }

-.tool_button:hover svg {
-  fill: var(--z10);
-}
-
-.tool_button.current {
-  background-color: var(--z0);
+.tool_button.current svg {
+  fill: var(--d8);
 }

 .tool_button.current svg {
-  fill: var(--d15);
+  fill: var(--d7);
 }

+
 .tool_button.disabled svg {
  background-color: #aaa;
  cursor: not-allowed;
  fill: var(--z3);
  pointer-events: none;
 }
+
+#tool_rect svg {
+  position: relative;
+  top: -1px;
+  left:  1px;
+}
+
+#tool_ellipse svg {
+  position: relative;
+  top: 2px;
+  left: 1px;
+}
--- a/src/css/zoom-dropdown.css
+++ b/src/css/zoom-dropdown.css
@ -7,8 +7,8 @@
  width:  100px;
 }

-#zoom_panel {
-  opacity:  0.5;
+#zoom_label:after {
+  content: '';
 }

 #zoom_select {
--- a/src/images/NoColor.svg
+++ b/src/images/NoColor.svg
@ -1,7 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
  <g stroke="#F00000" fill="none" fill-rule="evenodd">
-    <path d="M.5.5h16v14H.5z"/>
-    <path d="M1 1l15 13" stroke-linecap="square"/>
-    <path d="M1 14L16 1" stroke-linecap="square"/>
+    <path d="M .5 .5 h 16 v 16 H .5 z"/>
+    <path d="M1 1  l 15 15" stroke-linecap="square"/>
+    <path d="M1 15 L 16 1" stroke-linecap="square"/>
  </g>
 </svg>
--- a/src/images/eyedropper.svg
+++ b/src/images/eyedropper.svg
@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+  <defs>
+    <filter x="-17.5%" y="-13.2%" width="135%" height="136.8%" filterUnits="objectBoundingBox" id="a">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <g filter="url(#a)" transform="translate(2 1)" fill="none" fill-rule="evenodd">
+    <path fill="#FFF" d="M1.46 17.53l1.11-4.01 8.72-8.65 3.03 3.26-8.48 7.92z"/>
+    <path d="M17.35 8.72l-2.13 2.13-1.41-1.42-7.71 7.71L1.5 19 0 17.5l1.86-4.6 7.71-7.71-1.42-1.41 2.13-2.13 7.07 7.07zM18.16 1a3 3 0 010 4.24l-2.92 2.92L11 3.92 13.92 1a3 3 0 014.24 0zM3.56 14.03L2.5 16.5l2.47-1.06L12.4 8 11 6.6l-7.44 7.43z" fill="#000" fill-rule="nonzero"/>
+  </g>
+</svg>
--- a/src/index.html
+++ b/src/index.html
@ -58,11 +58,11 @@
  <a class="menu">
    <div class="menu_title" id="logo">
      <svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M-.1 16.1L16 .04V16.1H-.1z" fill="var(--z12)"></path>
-        <path d="M0 16.1V.1l16 16H0z" fill="var(--z6)"></path>
+        <path d="M-.1 16.1L16 .04V16.1H-.1z"></path>
+        <path d="M0 16.1V.1l16 16H0z" fill="var(--z7)"></path>
      </svg>
    </div>
-    <div class="menu_list">
+    <div class="menu_list inverted-undoB">
      <div id="modal_about" class="menu_item" data-action="about">About this app...</div>
      <div class="separator"></div>
      <div id="modal_preferences" class="menu_item" data-action="configure">Configure...</div>
@ -73,7 +73,7 @@

  <div class="menu">
    <div class="menu_title">File</div>
-    <div class="menu_list" id="file_menu"> 
+    <div class="menu_list inverted-undo" id="file_menu"> 
      <div data-action="clear" id="tool_clear" class="menu_item">New Document</div>
      
      <div id="tool_open" class="menu_item">
@ -90,7 +90,7 @@

  <div class="menu">
    <div class="menu_title">Edit</div>
-    <div class="menu_list" id="edit_menu">
+    <div class="menu_list inverted-undo" id="edit_menu">
      <div data-action="undo" class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
      <div data-action="redo" class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
      <div class="separator"></div>
@ -104,7 +104,7 @@
  
  <div class="menu">
    <div class="menu_title">Object</div>
-    <div class="menu_list"  id="object_menu">
+    <div class="menu_list inverted-undo" id="object_menu">
      <div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span class="shortcut">⌘⇧↑</span></div>
      <div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span class="shortcut">⌘↑</span></div>
      <div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span class="shortcut">⌘↓</span></div>
@ -120,7 +120,7 @@

  <div class="menu">
    <div class="menu_title">View</div>
-    <div class="menu_list" id="view_menu">
+    <div class="menu_list inverted-undo" id="view_menu">
        <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers <span class="shortcut">⇧R</span></div>
        <div class="menu_item" id="tool_wireframe">View Wireframe</div>
        <div class="separator"></div>
@ -128,7 +128,7 @@
    </div>
  </div>

-  <div class="sponsors" id="sponsors">
+  <div class="sponsors inverted-undo" id="sponsors">
    <div class="sponsor">
      <a href="https://deta.space/discovery/method-draw?ref=method.ac" class="deta">
        <span></span><span></span><span></span><span></span>
@ -143,8 +143,12 @@

      </div>
    </div>
-    
  </div>
+  <div class="menu-right">
+  <button class="menu-icon" id="darkmode-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"></path></svg>
+  </button>
+</div>
 </div>

 <div id="panels" class="tools_panel">
@ -754,7 +758,7 @@
  <li><a href="#move_back">Send to Back<span class="shortcut">⌘⇧↓</span></a></li>
 </ul>

-<div class="tools_flyout" id="tools_shapelib">
+<div class="tools_flyout inverted-undo" id="tools_shapelib">
  <div id="shape_buttons"></div>
 </div>
  <!-- build:js loading.js -->
@ -800,6 +804,7 @@
  <script type="text/javascript" src="js/Palette.js"></script>
  <script type="text/javascript" src="js/Zoom.js"></script>
  <script type="text/javascript" src="js/Modal.js"></script>
+  <script type="text/javascript" src="js/Darkmode.js"></script>
  <script type="text/javascript" src="js/ContextMenu.js"></script>
  <script type="text/javascript" src="js/Shapelib.js"></script>
  <script type="text/javascript" src="js/fonts.js"></script>
--- a/src/js/PaintBox.js
+++ b/src/js/PaintBox.js
@ -8,7 +8,12 @@ MD.PaintBox = function(container, type){
    
    var title = (picker === 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
    var was_none = false;
-    var pos = is_background ? {'right': 175, 'top': 50} : {'left': 50, 'bottom': 50}
+    var pos = is_background ? {'right': 175, 'top': 50} : {'left': 48, 'bottom': 36}
+
+    $(document).on("mousedown", function(e){
+      if (!e.target.closest("#color_picker"))
+        $("#color_picker").hide();
+    })
    
    $("#color_picker")
      .removeAttr("style")
--- a/src/js/Rulers.js
+++ b/src/js/Rulers.js
@ -55,7 +55,8 @@ MD.Rulers = function(){
  }

  function update(zoom) {
-    const gray = getComputedStyle(document.body).getPropertyValue('--z6') || "#999";
+    const isDark = state.get("darkmode");
+    const gray = getComputedStyle(document.body).getPropertyValue(isDark ? '--z5' : '--z6') || "#999";
    if(!zoom) zoom = svgCanvas.getZoom();
    var limit = 30000;
    var c_elem = svgCanvas.getContentElem();    
--- a/src/js/darkmode.js
+++ b/src/js/darkmode.js
@ -0,0 +1,26 @@
+MD.Darkmode = function(){
+
+  const button = document.querySelector("#darkmode-button");
+  const body = document.body;
+  if (!button) return false;
+
+  function set(isDark) {
+    button.setAttribute("title", isDark ? "Switch to lightmode" : "Switch to darkmode")
+    body.classList.toggle("inverted", !isDark);
+    body.classList.add("cancel-transitions");
+    setTimeout(function(){
+      body.classList.remove("cancel-transitions");
+    }, 0)
+    editor.rulers.update();
+  }
+
+  button.addEventListener("click", ()=>{
+    state.set("darkmode", !state.get("darkmode"));
+  });
+
+  const isDark = state.get("darkmode");
+  set(isDark);
+
+  this.set = set
+
+}
--- a/src/js/lib/jpicker.min.js
+++ b/src/js/lib/jpicker.min.js
@ -1671,7 +1671,7 @@
                var all = color.active.val('all');
                if (win.alphaPrecision < 0) win.alphaPrecision = 0;
                else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
-                var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview"><div class="prev_div">' + localization.text.newColor + '<div class="color_preview"><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input name="color_mode" type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;º</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input  name="color_mode" type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input  name="color_mode" type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input name="color_mode" type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input  name="color_mode" type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input  name="color_mode" type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input  name="color_mode" type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
+                var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview"><div class="prev_div">' + localization.text.newColor + '<div class="color_preview"><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input name="color_mode" type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;º</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input  name="color_mode" type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input  name="color_mode" type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>L</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input name="color_mode" type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input  name="color_mode" type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input  name="color_mode" type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input  name="color_mode" type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">Hex<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
                if (win.expandable)
                {
                  container.html(controlHtml);
@ -1786,7 +1786,6 @@
                    var quickHex = color.quickList[i].val('hex');
                    html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.svg)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
                  }
-                  setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
                  grid.html(html);
                  grid.find('.QuickColor').click(quickPickClicked);
                }
--- a/src/js/lib/jquery.jgraduate.js
+++ b/src/js/lib/jquery.jgraduate.js
@ -249,7 +249,7 @@ jQuery.fn.jGraduate =
          '<div class="jGraduate_StopSection">' +
            '<label class="jGraduate_Form_Heading">Focal Point</label>' +
            '<div class="jGraduate_Form_Section">' +
-              '<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
+              '<label class="match-center"><input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/> Match center</label><br/>' +
              '<label>x:</label>' +
              '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
              '<label> y:</label>' +
@ -287,7 +287,7 @@ jQuery.fn.jGraduate =
            '<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
              '<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.svg" width="9" height="20">' +
            '</div>' +
-            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>Âº&nbsp;</label>' + 
+            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</label>' + 
                '</div>' +
                '<div class="jGraduate_Slider jGraduate_OpacField">' +
            '<label class="prelabel">Opac:</label>' +
@ -311,7 +311,7 @@ jQuery.fn.jGraduate =
            
      var attr_input = {};
            
-            var SLIDERW = 145;
+            var SLIDERW = 120;
            $('.jGraduate_SliderBar').width(SLIDERW);
      
      var container = $('#' + id+'_jGraduate_GradContainer')[0];
--- a/src/js/loading.js
+++ b/src/js/loading.js
@ -1,5 +1,7 @@
 (function(){
  const canvasContent = localStorage.getItem("md-canvasContent");
+  const isDark = localStorage.getItem("md-darkmode");
+  document.body.classList.toggle("inverted", !isDark);
  if (!canvasContent) return;
  const parser = new DOMParser();
  const doc = parser.parseFromString(canvasContent, "image/svg+xml");
--- a/src/js/start.js
+++ b/src/js/start.js
@ -102,6 +102,7 @@ editor.pan = new MD.Pan();

 editor.import = new MD.Import();
 editor.contextMenu = new MD.ContextMenu();
+editor.darkmode = new MD.Darkmode();

 // bind the selected event to our function that handles updates to the UI
 svgCanvas.bind("selected", editor.selectedChanged);
--- a/src/js/state.js
+++ b/src/js/state.js
@ -31,6 +31,7 @@ function State(){
  this.canvasFill = (paint)  => { /* noop */ }
  this.canvasStroke = (paint)  => { /* noop */ }
  this.canvasBackground = (paint)  => { /* noop */ }
+  this.darkmode = (isDark)  => { editor.darkmode.set(isDark) }

  this.clean = (warn = true) => {
    if (warn) {