Change color scheme.

Author: ChebanovDD

samples/Unity.Mvvm.Calc/Assets/UI Toolkit/PanelSettings.asset

@@ -1,5 +1,10 @@
-:root {
+* {
     -unity-font-definition: url('project://database/Assets/UI%20Toolkit/Fonts/Roboto/Roboto-Light%20SDF.asset?fileID=11400000&guid=4a813aec472149149bd5470cbf533316&type=2#Roboto-Light SDF');
+    --accent-color: rgb(255, 153, 1);
+    --accent-color--hover: rgb(242, 142, 2);
+    --button-color: rgb(58, 58, 58);
+    --button-color--hover: rgb(54, 54, 54);
+    --font-color: rgb(255, 255, 255);
 }
 
 .top-panel {
@@ -16,7 +21,7 @@
     justify-content: center;
     flex-wrap: nowrap;
     flex-direction: column;
-    border-top-color: rgb(39, 39, 39);
+    border-top-color: var(--button-color);
     border-top-width: 2px;
     margin-left: 56px;
     margin-right: 56px;
@@ -37,18 +42,18 @@
     padding-top: 4px;
     padding-bottom: 4px;
     font-size: 80px;
-    color: rgb(171, 198, 247);
-    background-color: rgb(23, 23, 23);
+    color: var(--font-color);
+    background-color: var(--button-color);
     transition-duration: 85ms;
-    border-left-color: rgb(1, 1, 1);
-    border-right-color: rgb(1, 1, 1);
-    border-top-color: rgb(1, 1, 1);
-    border-bottom-color: rgb(1, 1, 1);
+    border-left-color: rgba(0, 0, 0, 0);
+    border-right-color: rgba(0, 0, 0, 0);
+    border-top-color: rgba(0, 0, 0, 0);
+    border-bottom-color: rgba(0, 0, 0, 0);
 }
 
 .round-button:hover:enabled {
     font-size: 64px;
-    background-color: rgb(68, 68, 68);
+    background-color: var(--button-color--hover);
 }
 
 .round-button--wide {
@@ -63,33 +68,33 @@
 
 .round-button--highlighted {
     color: rgb(0, 0, 0);
-    background-color: rgb(184, 162, 208);
+    background-color: var(--accent-color);
 }
 
 .round-button--highlighted:hover:enabled {
-    background-color: rgb(196, 180, 217);
+    background-color: var(--accent-color--hover);
 }
 
 .round-button__clear-label {
-    color: rgb(225, 53, 44);
+    color: var(--accent-color);
 }
 
 .round-button__operation-label {
-    color: rgb(186, 164, 210);
+    color: var(--accent-color);
 }
 
 .expression-label {
     font-size: 112px;
     -unity-text-align: middle-right;
-    color: rgb(171, 198, 247);
+    color: var(--accent-color);
     overflow: hidden;
     flex-grow: 1;
 }
 
 .result-label {
     font-size: 72px;
     -unity-text-align: upper-right;
-    color: rgb(99, 99, 99);
+    color: var(--font-color);
     overflow: hidden;
 }