From 5492a0e6439f900f5e9fe0c2c3c0607827e3d200 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 21 Sep 2021 21:44:03 +0300
Subject: [PATCH] editable theme color

---
 index.css             |  96 +++++---
 index.html            |  32 ++-
 libs/jquery-ui.css    | 530 +++++++++++++++++++++---------------------
 modules/ui/options.js |  68 ++++--
 4 files changed, 393 insertions(+), 333 deletions(-)

diff --git a/index.css b/index.css
index b7d51336..c8570c8d 100644
--- a/index.css
+++ b/index.css
@@ -228,11 +228,6 @@ t,
   cursor: pointer;
 }
 
-#options .pressed {
-  background-color: #896c77 !important;
-  font-style: italic;
-}
-
 i.icon-lock {
   cursor: pointer;
 }
@@ -328,10 +323,21 @@ text.drag {
   text-shadow: 0 0 1px red;
 }
 
+#dialogs {
+  background-color: var(--bg-dialogs);
+}
+
 .draggable {
   cursor: move;
 }
 
+.ui-widget-header {
+  border-bottom: 1px solid var(--dark-solid);
+  background: var(--header);
+  color: #ffffff;
+  font-weight: bold;
+}
+
 .ui-dialog,
 #optionsContainer {
   user-select: none;
@@ -343,6 +349,7 @@ text.drag {
   border: solid 1px #5e4fa2;
   margin: 10px;
   padding-bottom: 0.3em;
+  background: var(--bg-light);
 }
 
 #options input,
@@ -361,7 +368,7 @@ text.drag {
 }
 
 .tab {
-  border-bottom: 1px solid #5d4651;
+  border-bottom: 1px solid var(--dark-solid);
   height: 2.2em;
   display: flex;
   justify-content: space-between;
@@ -375,19 +382,19 @@ div.tab > button#optionsHide {
 
 button.options {
   width: 100%;
-  background-color: #997b89;
+  background-color: var(--bg-main);
   font-weight: bold;
   border: none;
   transition: 0.2s;
 }
 
-button.options:hover {
-  background-color: #806070 !important;
-  color: white !important;
+button.active {
+  background-color: var(--header);
+  color: white;
 }
 
-button.active {
-  background-color: #916e7f;
+button.options:hover {
+  background-color: var(--header-active);
   color: white;
 }
 
@@ -417,7 +424,7 @@ button.active {
 
 #options i {
   color: #31272c;
-  font-size: 0.8em;
+  font-size: 0.85em;
   cursor: pointer;
 }
 
@@ -466,11 +473,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   border-radius: 15%;
   width: 0.91em;
   height: 0.91em;
-  background: #a58394;
-  border: 1px solid #5d4651;
+  background: var(--light-solid);
+  border: 1px solid var(--dark-solid);
   cursor: pointer;
   margin-top: -0.4em;
-  box-shadow: 0.5px 0.5px 0px #5d4651;
+  box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
 #options input[type="range"]::-moz-range-thumb {
@@ -478,10 +485,10 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   border-radius: 15%;
   width: 0.73em;
   height: 0.73em;
-  background: #a58394;
-  border: 1px solid #5d4651;
+  background: var(--light-solid);
+  border: 1px solid var(--dark-solid);
   cursor: pointer;
-  box-shadow: 0.5px 0.5px 0px #5d4651;
+  box-shadow: 0.5px 0.5px 0px var(--dark-solid);
 }
 
 #options input[type="range"]::-webkit-slider-runnable-track {
@@ -525,7 +532,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 }
 
 #optionsContent input[type="number"]:hover {
-  outline: 1px solid #5d4651;
+  outline: 1px solid var(--dark-solid);
 }
 
 #optionsContent input.paired {
@@ -553,6 +560,11 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-weight: bold;
 }
 
+#options input[type="color"] {
+  width: 2em;
+  padding: 1px;
+}
+
 .tabcontent button.sideButton {
   border-radius: 15%;
   font-size: 0.8em;
@@ -606,7 +618,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 
 #exitCustomization > div {
   width: 12em;
-  background: #5d4651;
+  background: var(--dark-solid);
   cursor: move;
 }
 
@@ -642,7 +654,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 }
 
 .tabcontent button {
-  background-color: #916e7f;
+  background-color: var(--bg-lighter);
   border: none;
   padding: 0.45em 0.75em;
   margin: 0.35em 0;
@@ -650,8 +662,13 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: 1em;
 }
 
+.tabcontent button.pressed {
+  background-color: var(--header);
+  font-style: italic;
+}
+
 .tabcontent button:hover {
-  background-color: #a8879d !important;
+  background-color: var(--header-active);
 }
 
 #toolsContent div {
@@ -684,12 +701,12 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 }
 
 fieldset {
-  border: 1px solid #5d4651;
+  border: 1px solid var(--dark-solid);
 }
 
 .tabcontent li {
   list-style-type: none;
-  background-color: #997b89;
+  background-color: var(--bg-main);
   cursor: pointer;
   padding: 0.35em;
   margin: 0.2em 0.3em;
@@ -698,14 +715,17 @@ fieldset {
   text-align: center;
 }
 
-#options .buttonoff {
-  background-color: #b6b4b440 !important;
-  color: #666;
+.tabcontent .buttonoff {
+  background-color: var(--bg-disabled);
+  color: #444444aa;
+}
+
+.tabcontent li:hover {
+  box-shadow: 0 0 2px 2px var(--dark-solid) 17;
 }
 
-.tabcontent li:hover,
 .tabcontent button:hover {
-  box-shadow: 0 0 2px 2px #5d465117;
+  background-color: var(--header);
 }
 
 #optionsContainer span {
@@ -804,7 +824,7 @@ fieldset {
 
 table.matrix-table th,
 table.matrix-table td {
-  border: 1px solid #5d4651;
+  border: 1px solid var(--dark-solid);
   height: 2em;
   padding: 0.2em;
   position: relative;
@@ -820,7 +840,7 @@ table.matrix-table tr:hover th {
 }
 
 table.matrix-table td:hover {
-  outline: 2px solid #5d4651;
+  outline: 2px solid var(--dark-solid);
   outline-offset: -1px;
   z-index: 1;
 }
@@ -1147,7 +1167,7 @@ i.resetButton {
 }
 
 i.resetButton:active {
-  color: #5d4651;
+  color: var(--dark-solid);
 }
 
 .ui-dialog button.pressed {
@@ -1680,8 +1700,8 @@ div.editorLine {
 }
 
 #pickerHeader {
-  fill: #916e7f;
-  stroke: #5d4651;
+  fill: var(--header);
+  stroke: var(--dark-solid);
   cursor: move;
 }
 
@@ -1695,7 +1715,7 @@ div.editorLine {
 
 #pickerCloseRect {
   cursor: pointer;
-  fill: #916e7f;
+  fill: var(--header);
   stroke: #f8ffff;
 }
 
@@ -2198,14 +2218,14 @@ svg.button {
   color: #920303;
   background-color: #dabdbd91;
   padding: 2px;
-  border: 1px solid #916e7f;
+  border: 1px solid var(--header);
 }
 
 .announcement {
   background-color: #a18888;
   color: white;
   padding: 0.4em 0.5em;
-  border: dashed 1px #5d4651;
+  border: dashed 1px var(--dark-solid);
 }
 
 .speaker {
diff --git a/index.html b/index.html
index d96ed70a..85327a57 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
   <link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/">
 
   <style type="text/css">
-    body {margin: 0; font-size: 11px; overflow: hidden;}
+    body {margin: 0; font-size: 10px; overflow: hidden;}
     #map {position: absolute;}
     #initial {fill: none; stroke: black; pointer-events: none;}
     #init-rose {animation: 20s infinite spin; opacity: .7; transform-origin: center;}
@@ -31,6 +31,7 @@
     #loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;}
     #loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
     @keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
+
   </style>
   <link rel="stylesheet" href="index.css">
   <link rel="stylesheet" href="icons.css">
@@ -1145,10 +1146,10 @@
             <td></td>
             <td>Interface size</td>
             <td>
-              <input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1 value=1>
+              <input id="uiSizeInput" data-stored="uiSize" type="range" min=.6 max=3 step=.1>
             </td>
             <td>
-              <input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1 value=1>
+              <input id="uiSizeOutput" data-stored="uiSize" type="number" min=.6 max=3 step=.1>
             </td>
           </tr>
 
@@ -1163,14 +1164,27 @@
             </td>
           </tr>
 
+          <tr data-tip="Set theme hue for dialogs and tool windows">
+            <td>
+              <i data-tip="Restore default theme color: pale magenta" id="themeColorRestore" class="icon-ccw"></i>
+            </td>
+            <td>Theme color</td>
+            <td>
+              <input id="themeHueInput" type="range" min=0 max=359 >
+            </td>
+            <td>
+              <input id="themeColorInput" data-stored="themeColor" type="color" >
+            </td>
+          </tr>
+
           <tr data-tip="Set dialog and tool windows transparency">
             <td></td>
             <td>Transparency</td>
             <td>
-              <input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 value=15>
+              <input id="transparencyInput" data-stored="transparency" type="range" min=0 max=100 >
             </td>
             <td>
-              <input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 value=15>
+              <input id="transparencyOutput" data-stored="transparency" type="number" min=0 max=100 >
             </td>
           </tr>
 
@@ -1263,7 +1277,9 @@
           </tr>
 
           <tr data-tip="Set minimum and maximum possible zoom level">
-            <td></td>
+            <td>
+              <i data-tip="Restore default zoom extent: [1, 20]" id="zoomExtentDefault" class="icon-ccw"></i>
+            </td>
             <td>Zoom extent</td>
             <td>
               <span data-tip="Mimimal possible zoom level (should be > 0)">min</span>
@@ -1272,7 +1288,6 @@
               <input data-tip="Maximal possible zoom level (should be > 1)" id="zoomExtentMax" class="paired" type="number" min=1 max=50 value=20>
             </td>
             <td>
-              <i data-tip="Restore default zoom extent (1, 20)" id="zoomExtentDefault" class="icon-ccw"></i>
               <i data-tip="Allow to drag map beyond canvas borders" id="translateExtent" data-on=0 class="icon-hand-paper-o"></i>
             </td>
           </tr>
@@ -1454,8 +1469,7 @@
     </div>
   </div>
 
-  <div id="dialogs" style="background-color: #ffffff">
-
+  <div id="dialogs">
     <div id="worldConfigurator" class="dialog stable" style="display: none">
 
       <div id="worldControls">
diff --git a/libs/jquery-ui.css b/libs/jquery-ui.css
index 8d1b6fcc..a7589d45 100644
--- a/libs/jquery-ui.css
+++ b/libs/jquery-ui.css
@@ -3,81 +3,79 @@
 * Copyright jQuery Foundation and other contributors; Licensed MIT */
 
 .ui-draggable-handle {
-	-ms-touch-action: none;
-	touch-action: none;
+  -ms-touch-action: none;
+  touch-action: none;
 }
 
 .ui-helper-hidden {
-	display: none;
+  display: none;
 }
 .ui-helper-hidden-accessible {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 .ui-helper-reset {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	line-height: 1.3;
-	text-decoration: none;
-	font-size: 100%;
-	list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  line-height: 1.3;
+  text-decoration: none;
+  font-size: 100%;
+  list-style: none;
 }
 .ui-helper-clearfix:before,
 .ui-helper-clearfix:after {
-	content: "";
-	display: table;
-	border-collapse: collapse;
+  content: "";
+  display: table;
+  border-collapse: collapse;
 }
 .ui-helper-clearfix:after {
-	clear: both;
+  clear: both;
 }
 .ui-helper-zfix {
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	position: absolute;
-	opacity: 0;
-	filter:Alpha(Opacity=0); /* support: IE8 */
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  opacity: 0;
+  filter: Alpha(Opacity=0); /* support: IE8 */
 }
 
 .ui-front {
-	z-index: 100;
+  z-index: 100;
 }
 
-
 /* Interaction Cues
 ----------------------------------*/
 .ui-state-disabled {
-	cursor: default !important;
-	pointer-events: none;
+  cursor: default !important;
+  pointer-events: none;
 }
 
-
 /* Icons
 ----------------------------------*/
 .ui-icon {
-	display: inline-block;
-	vertical-align: middle;
-	margin-top: -.25em;
-	position: relative;
-	text-indent: -99999px;
-	overflow: hidden;
-	background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -0.25em;
+  position: relative;
+  text-indent: -99999px;
+  overflow: hidden;
+  background-repeat: no-repeat;
 }
 
 .ui-widget-icon-block {
-	left: 50%;
-	margin-left: -8px;
-	display: block;
+  left: 50%;
+  margin-left: -8px;
+  display: block;
 }
 
 /* Misc visuals
@@ -85,102 +83,102 @@
 
 /* Overlays */
 .ui-widget-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 .ui-resizable {
-	position: relative;
+  position: relative;
 }
 .ui-resizable-handle {
-	position: absolute;
-	font-size: 0.1px;
-	display: block;
-	-ms-touch-action: none;
-	touch-action: none;
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
 }
 .ui-resizable-disabled .ui-resizable-handle,
 .ui-resizable-autohide .ui-resizable-handle {
-	display: none;
+  display: none;
 }
 .ui-resizable-n {
-	cursor: n-resize;
-	height: 7px;
-	width: 100%;
-	top: -5px;
-	left: 0;
+  cursor: n-resize;
+  height: 7px;
+  width: 100%;
+  top: -5px;
+  left: 0;
 }
 .ui-resizable-s {
-	cursor: s-resize;
-	height: 7px;
-	width: 100%;
-	bottom: -5px;
-	left: 0;
+  cursor: s-resize;
+  height: 7px;
+  width: 100%;
+  bottom: -5px;
+  left: 0;
 }
 .ui-resizable-e {
-	cursor: e-resize;
-	width: 7px;
-	right: -5px;
-	top: 0;
-	height: 100%;
+  cursor: e-resize;
+  width: 7px;
+  right: -5px;
+  top: 0;
+  height: 100%;
 }
 .ui-resizable-w {
-	cursor: w-resize;
-	width: 7px;
-	left: -5px;
-	top: 0;
-	height: 100%;
+  cursor: w-resize;
+  width: 7px;
+  left: -5px;
+  top: 0;
+  height: 100%;
 }
 .ui-resizable-se {
-	cursor: se-resize;
-	width: 12px;
-	height: 12px;
-	right: 1px;
-	bottom: 1px;
+  cursor: se-resize;
+  width: 12px;
+  height: 12px;
+  right: 1px;
+  bottom: 1px;
 }
 .ui-resizable-sw {
-	cursor: sw-resize;
-	width: 9px;
-	height: 9px;
-	left: -5px;
-	bottom: -5px;
+  cursor: sw-resize;
+  width: 9px;
+  height: 9px;
+  left: -5px;
+  bottom: -5px;
 }
 .ui-resizable-nw {
-	cursor: nw-resize;
-	width: 9px;
-	height: 9px;
-	left: -5px;
-	top: -5px;
+  cursor: nw-resize;
+  width: 9px;
+  height: 9px;
+  left: -5px;
+  top: -5px;
 }
 .ui-resizable-ne {
-	cursor: ne-resize;
-	width: 9px;
-	height: 9px;
-	right: -5px;
-	top: -5px;
+  cursor: ne-resize;
+  width: 9px;
+  height: 9px;
+  right: -5px;
+  top: -5px;
 }
 .ui-sortable-handle {
-	-ms-touch-action: none;
-	touch-action: none;
+  -ms-touch-action: none;
+  touch-action: none;
 }
 .ui-button {
-	padding: .4em 1em;
-	display: inline-block;
-	position: relative;
-	line-height: normal;
-	margin-right: .1em;
-	cursor: pointer;
-	vertical-align: middle;
-	text-align: center;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+  padding: 0.4em 1em;
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  margin-right: 0.1em;
+  cursor: pointer;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 
-	/* Support: IE <= 11 */
-	overflow: visible;
+  /* Support: IE <= 11 */
+  overflow: visible;
 }
 
 .ui-button,
@@ -188,128 +186,126 @@
 .ui-button:visited,
 .ui-button:hover,
 .ui-button:active {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 /* to make room for the icon, a width needs to be set here */
 .ui-button-icon-only {
-	width: 2em;
-	box-sizing: border-box;
-	white-space: nowrap;
+  width: 2em;
+  box-sizing: border-box;
+  white-space: nowrap;
 }
 
 /* button icon element(s) */
 .ui-button-icon-only .ui-icon {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin-top: -8px;
-	margin-left: -8px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -8px;
 }
 
 .ui-button.ui-icon-notext .ui-icon {
-	padding: 0;
-	width: 2.1em;
-	height: 2.1em;
-	text-indent: -9999px;
-	white-space: nowrap;
-
+  padding: 0;
+  width: 2.1em;
+  height: 2.1em;
+  text-indent: -9999px;
+  white-space: nowrap;
 }
 
 input.ui-button.ui-icon-notext .ui-icon {
-	width: auto;
-	height: auto;
-	text-indent: 0;
-	white-space: normal;
-	padding: .4em 1em;
+  width: auto;
+  height: auto;
+  text-indent: 0;
+  white-space: normal;
+  padding: 0.4em 1em;
 }
 
 /* workarounds */
 /* Support: Firefox 5 - 40 */
 input.ui-button::-moz-focus-inner,
 button.ui-button::-moz-focus-inner {
-	border: 0;
-	padding: 0;
+  border: 0;
+  padding: 0;
 }
 .ui-controlgroup {
-	vertical-align: middle;
-	display: inline-block;
+  vertical-align: middle;
+  display: inline-block;
 }
 .ui-controlgroup > .ui-controlgroup-item {
-	float: left;
-	margin-left: 0;
-	margin-right: 0;
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
 }
 .ui-controlgroup > .ui-controlgroup-item:focus,
 .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
-	z-index: 9999;
+  z-index: 9999;
 }
 .ui-controlgroup-vertical > .ui-controlgroup-item {
-	display: block;
-	float: none;
-	width: 100%;
-	margin-top: 0;
-	margin-bottom: 0;
-	text-align: left;
+  display: block;
+  float: none;
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  text-align: left;
 }
 .ui-controlgroup-vertical .ui-controlgroup-item {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 .ui-controlgroup .ui-controlgroup-label {
-	padding: .4em 1em;
+  padding: 0.4em 1em;
 }
 .ui-controlgroup .ui-controlgroup-label span {
-	font-size: 80%;
+  font-size: 80%;
 }
 .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
-	border-left: none;
+  border-left: none;
 }
 .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
-	border-top: none;
+  border-top: none;
 }
 .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
-	border-right: none;
+  border-right: none;
 }
 .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
-	border-bottom: none;
+  border-bottom: none;
 }
 
 /* Spinner specific style fixes */
 .ui-controlgroup-vertical .ui-spinner-input {
-
-	/* Support: IE8 only, Android < 4.4 only */
-	width: 75%;
-	width: calc( 100% - 2.4em );
+  /* Support: IE8 only, Android < 4.4 only */
+  width: 75%;
+  width: calc(100% - 2.4em);
 }
 .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
-	border-top-style: solid;
+  border-top-style: solid;
 }
 
 .ui-checkboxradio-label .ui-icon-background {
-	box-shadow: inset 1px 1px 1px #ccc;
-	border-radius: .12em;
-	border: none;
+  box-shadow: inset 1px 1px 1px #ccc;
+  border-radius: 0.12em;
+  border: none;
 }
 .ui-checkboxradio-radio-label .ui-icon-background {
-	width: 16px;
-	height: 16px;
-	border-radius: 1em;
-	overflow: visible;
-	border: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 1em;
+  overflow: visible;
+  border: none;
 }
 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
 .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
-	background-image: none;
-	width: 8px;
-	height: 8px;
-	border-width: 4px;
-	border-style: solid;
+  background-image: none;
+  width: 8px;
+  height: 8px;
+  border-width: 4px;
+  border-style: solid;
 }
 .ui-checkboxradio-disabled {
-	pointer-events: none;
+  pointer-events: none;
 }
 body .ui-dialog {
-	position: absolute;
+  position: absolute;
   top: 0;
   left: 0;
   outline: 0;
@@ -317,30 +313,30 @@ body .ui-dialog {
   background-color: inherit;
 }
 .ui-dialog .ui-dialog-titlebar {
-	padding: .4em 1em;
-	position: relative;
-	font-size: 1.2em;
+  padding: 0.4em 1em;
+  position: relative;
+  font-size: 1.2em;
   min-width: 150px;
 }
 .ui-dialog .ui-dialog-title {
-	float: left;
-	margin: .1em 0;
-	white-space: nowrap;
-	width: 90%;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  float: left;
+  margin: 0.1em 0;
+  white-space: nowrap;
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.ui-dialog  .ui-dialog-titlebar button {
-	position: absolute;
-  right: .5em;
+.ui-dialog .ui-dialog-titlebar button {
+  position: absolute;
+  right: 0.5em;
   top: 53%;
   padding: 0;
   width: 1.8em;
   height: 1.8em;
   color: #ffffff;
   background: none;
-  font-size: .75em;
+  font-size: 0.75em;
   border: 1px solid #c5c5c5;
 }
 
@@ -349,113 +345,107 @@ body .ui-dialog {
 }
 
 .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close {
-	margin: -1em 0 0;
+  margin: -1em 0 0;
 }
 
-.ui-dialog  .ui-dialog-titlebar button:active {
+.ui-dialog .ui-dialog-titlebar button:active {
   border: 1px solid #5d4651;
   color: #5d4651;
 }
 
 .ui-dialog .ui-dialog-content {
-	position: relative;
-	border: 0;
-	padding: .5em 1em;
-	background: none;
-	overflow-y: auto;
-	overflow-x: hidden;
+  position: relative;
+  border: 0;
+  padding: 0.5em 1em;
+  background: none;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .ui-dialog .ui-dialog-buttonpane {
-	text-align: left;
-	border-width: 1px 0 0 0;
-	background-image: none;
-	margin-top: .5em;
-	padding: .3em 1em .5em .4em;
+  text-align: left;
+  border-width: 1px 0 0 0;
+  background-image: none;
+  margin-top: 0.5em;
+  padding: 0.3em 1em 0.5em 0.4em;
 }
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-	float: right;
+  float: right;
 }
 .ui-dialog .ui-dialog-buttonpane button {
-	margin: .5em .4em .5em 0;
-	cursor: pointer;
+  margin: 0.5em 0.4em 0.5em 0;
+  cursor: pointer;
 }
 .ui-dialog .ui-resizable-n {
-	height: 2px;
-	top: 0;
+  height: 2px;
+  top: 0;
 }
 .ui-dialog .ui-resizable-e {
-	width: 2px;
-	right: 0;
+  width: 2px;
+  right: 0;
 }
 .ui-dialog .ui-resizable-s {
-	height: 2px;
-	bottom: 0;
+  height: 2px;
+  bottom: 0;
 }
 .ui-dialog .ui-resizable-w {
-	width: 2px;
-	left: 0;
+  width: 2px;
+  left: 0;
 }
 .ui-dialog .ui-resizable-se,
 .ui-dialog .ui-resizable-sw,
 .ui-dialog .ui-resizable-ne,
 .ui-dialog .ui-resizable-nw {
-	width: 7px;
-	height: 7px;
+  width: 7px;
+  height: 7px;
 }
 .ui-dialog .ui-resizable-se {
-	right: 0;
-	bottom: 0;
+  right: 0;
+  bottom: 0;
 }
 .ui-dialog .ui-resizable-sw {
-	left: 0;
-	bottom: 0;
+  left: 0;
+  bottom: 0;
 }
 .ui-dialog .ui-resizable-ne {
-	right: 0;
-	top: 0;
+  right: 0;
+  top: 0;
 }
 .ui-dialog .ui-resizable-nw {
-	left: 0;
-	top: 0;
+  left: 0;
+  top: 0;
 }
 .ui-draggable .ui-dialog-titlebar {
-	cursor: move;
+  cursor: move;
 }
 
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-	font-family: Arial,Helvetica,sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
 .ui-widget input,
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-	font-family: Arial,Helvetica,sans-serif;
-	font-size: 1em;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
 }
 .ui-widget button[class^="icon-"] {
-	padding: 1px 6px;
+  padding: 1px 6px;
 }
 .ui-widget.ui-widget-content {
-	border: 1px solid #5e4fa2;
+  border: 1px solid #5e4fa2;
   color: #333333;
 }
 .ui-widget-content {
-	border: 1px solid #dddddd;
-	color: #333333;
+  border: 1px solid #dddddd;
+  color: #333333;
 }
 .ui-widget-content a {
-	color: #333333;
-}
-.ui-widget-header {
-	border-bottom: 1px solid #5d4651;
-	background: #916e7f;
-	color: #ffffff;
-	font-weight: bold;
+  color: #333333;
 }
 .ui-widget-header a {
-	color: #333333;
+  color: #333333;
 }
 
 /* Interaction states
@@ -469,10 +459,10 @@ body .ui-dialog {
 works properly when clicked or hovered */
 html .ui-button.ui-state-disabled:hover,
 html .ui-button.ui-state-disabled:active {
-	border: 1px solid #c5c5c5;
-	background: #f6f6f6;
-	font-weight: normal;
-	color: #454545;
+  border: 1px solid #c5c5c5;
+  background: #f6f6f6;
+  font-weight: normal;
+  color: #454545;
 }
 .ui-state-default a,
 .ui-state-default a:link,
@@ -481,10 +471,10 @@ a.ui-button,
 a:link.ui-button,
 a:visited.ui-button,
 .ui-button {
-	color: #454545;
+  color: #454545;
 }
 .ui-button:active {
-	color: #5d4651;
+  color: #5d4651;
   border-color: #5d4651;
 }
 .ui-state-hover a,
@@ -497,12 +487,12 @@ a:visited.ui-button,
 .ui-state-focus a:visited,
 a.ui-button:hover,
 a.ui-button:focus {
-	color: #2b2b2b;
-	text-decoration: none;
+  color: #2b2b2b;
+  text-decoration: none;
 }
 
 .ui-visual-focus {
-	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
+  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
 }
 
 /* Interaction Cues
@@ -510,68 +500,68 @@ a.ui-button:focus {
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
-	border: 1px solid #dad55e;
-	background: #fffa90;
-	color: #777620;
+  border: 1px solid #dad55e;
+  background: #fffa90;
+  color: #777620;
 }
 .ui-state-checked {
-	border: 1px solid #dad55e;
-	background: #fffa90;
+  border: 1px solid #dad55e;
+  background: #fffa90;
 }
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
-	color: #777620;
+  color: #777620;
 }
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
-	border: 1px solid #f1a899;
-	background: #fddfdf;
-	color: #5f3f3f;
+  border: 1px solid #f1a899;
+  background: #fddfdf;
+  color: #5f3f3f;
 }
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
-	color: #5f3f3f;
+  color: #5f3f3f;
 }
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
-	color: #5f3f3f;
+  color: #5f3f3f;
 }
 .ui-priority-primary,
 .ui-widget-content .ui-priority-primary,
 .ui-widget-header .ui-priority-primary {
-	font-weight: bold;
+  font-weight: bold;
 }
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary,
 .ui-widget-header .ui-priority-secondary {
-	opacity: .7;
-	filter:Alpha(Opacity=70); /* support: IE8 */
-	font-weight: normal;
+  opacity: 0.7;
+  filter: Alpha(Opacity=70); /* support: IE8 */
+  font-weight: normal;
 }
 .ui-state-disabled,
 .ui-widget-content .ui-state-disabled,
 .ui-widget-header .ui-state-disabled {
-	opacity: .35;
-	filter:Alpha(Opacity=35); /* support: IE8 */
-	background-image: none;
+  opacity: 0.35;
+  filter: Alpha(Opacity=35); /* support: IE8 */
+  background-image: none;
 }
 .ui-state-disabled .ui-icon {
-	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
+  filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */
 }
 
 /* Misc visuals
 ----------------------------------*/
 /* Overlays */
 .ui-widget-overlay {
-	background: #aaaaaa;
-	opacity: .3;
-	filter: Alpha(Opacity=30); /* support: IE8 */
+  background: #aaaaaa;
+  opacity: 0.3;
+  filter: Alpha(Opacity=30); /* support: IE8 */
 }
 .ui-widget-shadow {
-	-webkit-box-shadow: 0px 0px 5px #666666;
-	box-shadow: 0px 0px 5px #666666;
+  -webkit-box-shadow: 0px 0px 5px #666666;
+  box-shadow: 0px 0px 5px #666666;
 }
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 2930e111..a62f1851 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -150,7 +150,9 @@ optionsContent.addEventListener("input", function (event) {
   else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
   else if (id === "emblemShape") changeEmblemShape(value);
   else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
-  else if (id === "transparencyInput") changeDialogsTransparency(value);
+  else if (id === "themeHueInput") changeThemeHue(value);
+  else if (id === "themeColorInput") changeDialogsTheme(themeColorInput.value, transparencyInput.value);
+  else if (id === "transparencyInput") changeDialogsTheme(themeColorInput.value, value);
 });
 
 optionsContent.addEventListener("change", function (event) {
@@ -175,6 +177,7 @@ optionsContent.addEventListener("click", function (event) {
   else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
   else if (id === "translateExtent") toggleTranslateExtent(event.target);
   else if (id === "speakerTest") testSpeaker();
+  else if (id === "themeColorRestore") restoreDefaultThemeColor();
 });
 
 function mapSizeInputChange() {
@@ -417,7 +420,7 @@ function changeUIsize(value) {
   if (+value > max) value = max;
 
   uiSizeInput.value = uiSizeOutput.value = value;
-  document.getElementsByTagName("body")[0].style.fontSize = value * 11 + "px";
+  document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
   document.getElementById("options").style.width = value * 300 + "px";
 }
 
@@ -429,19 +432,49 @@ function changeTooltipSize(value) {
   tooltip.style.fontSize = `calc(${value}px + 0.5vw)`;
 }
 
-// change transparency for modal windows
-function changeDialogsTransparency(value) {
-  transparencyInput.value = transparencyOutput.value = value;
-  const alpha = (100 - +value) / 100;
-  const optionsColor = "rgba(164, 139, 149, " + alpha + ")";
-  const dialogsColor = "rgba(255, 255, 255, " + alpha + ")";
-  const optionButtonsColor = "rgba(145, 110, 127, " + Math.min(alpha + 0.3, 1) + ")";
-  const optionLiColor = "rgba(153, 123, 137, " + Math.min(alpha + 0.3, 1) + ")";
-  document.getElementById("options").style.backgroundColor = optionsColor;
-  document.getElementById("dialogs").style.backgroundColor = dialogsColor;
-  document.querySelectorAll(".tabcontent button").forEach(el => (el.style.backgroundColor = optionButtonsColor));
-  document.querySelectorAll(".tabcontent li").forEach(el => (el.style.backgroundColor = optionLiColor));
-  document.querySelectorAll("button.options").forEach(el => (el.style.backgroundColor = optionLiColor));
+const THEME_COLOR = "#997787";
+function restoreDefaultThemeColor() {
+  localStorage.removeItem("themeColor");
+  changeDialogsTheme(THEME_COLOR, transparencyInput.value);
+}
+
+function changeThemeHue(hue) {
+  const {s, l} = d3.hsl(themeColorInput.value);
+  const newColor = d3.hsl(+hue, s, l).hex();
+  changeDialogsTheme(newColor, transparencyInput.value);
+}
+
+// change color and transparency for modal windows
+function changeDialogsTheme(themeColor, transparency) {
+  transparencyInput.value = transparencyOutput.value = transparency;
+  const alpha = (100 - +transparency) / 100;
+  const alphaReduced = Math.min(alpha + 0.3, 1);
+
+  const {h, s, l} = d3.hsl(themeColor || THEME_COLOR);
+  themeColorInput.value = themeColor || THEME_COLOR;
+  themeHueInput.value = h;
+
+  const getRGBA = (hue, saturation, lightness, alpha) => {
+    const color = d3.hsl(hue, saturation, lightness, alpha);
+    return color.toString();
+  };
+
+  const theme = [
+    {name: "--bg-main", h, s, l, alpha},
+    {name: "--bg-lighter", h, s, l: l + 0.02, alpha},
+    {name: "--bg-light", h, s: s - 0.02, l: l + 0.06, alpha},
+    {name: "--light-solid", h, s: s + 0.01, l: l + 0.05, alpha: 1},
+    {name: "--dark-solid", h, s, l: l - 0.2, alpha: 1},
+    {name: "--header", h, s: s, l: l - 0.03, alpha: alphaReduced},
+    {name: "--header-active", h, s: s, l: l - 0.09, alpha: alphaReduced},
+    {name: "--bg-disabled", h, s: s - 0.04, l: l + 0.09, alphaReduced},
+    {name: "--bg-dialogs", h: 0, s: 0, l: 0.98, alpha}
+  ];
+
+  const sx = document.documentElement.style;
+  theme.forEach(({name, h, s, l, alpha}) => {
+    sx.setProperty(name, getRGBA(h, s, l, alpha));
+  });
 }
 
 function changeZoomExtent(value) {
@@ -484,7 +517,6 @@ function applyStoredOptions() {
       .map(w => +w);
   if (localStorage.getItem("military")) options.military = JSON.parse(localStorage.getItem("military"));
 
-  changeDialogsTransparency(localStorage.getItem("transparency") || 5);
   if (localStorage.getItem("tooltipSize")) changeTooltipSize(localStorage.getItem("tooltipSize"));
   if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
 
@@ -499,6 +531,10 @@ function applyStoredOptions() {
   if (width) mapWidthInput.value = width;
   if (height) mapHeightInput.value = height;
 
+  const transparency = localStorage.getItem("transparency") || 5;
+  const themeColor = localStorage.getItem("themeColor");
+  changeDialogsTheme(themeColor, transparency);
+
   // set shape rendering
   viewbox.attr("shape-rendering", shapeRendering.value);
 }