diff --git a/manage/manage.css b/manage/manage.css
index eb037482..ef1db06f 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -5,13 +5,28 @@
   --name-padding-right: 40px;
   --actions-width: 75px;
   --onoffswitch-width: 60px;
+  --manage-zebra-alpha-bg: hsla(0, 0%, 50%, .07);
+  --styles-hidden: hsla(180, 40%, 45%, .3);
+  --usercss-label: hsl(180, 100%, 20%);
+  --exit-filters: hsla(180, 50%, 27%, .5);
+  --exit-filters-hover: hsl(180, 50%, 27%);
+  --tooltip-default-border: hsl(52, 52%, 73%);
+  --tooltip-default-bg: hsl(54, 100%, 92%);
+  --tooltip-action-complete-border: hsl(179, 38%, 66%);
+  --tooltip-action-complete-bg: hsl(166, 100%, 88%);
+  --palered: hsl(0, 81%, 67%);
+  --lightred: hsl(0, 98%, 62%);
+  --red: hsl(0, 100%, 50%);
+  --stylename-manage-hover-text: hsl(180, 100%, 15%);
+  --stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
+  --stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
 }
 
 body {
   margin: 0;
   /* Firefox: fill the entire page for drag'n'drop to work */
   display: flex;
-  height: 100%;
+  min-height: 100%;
 }
 
 #header:lang(ja) h1 {
@@ -22,7 +37,7 @@ body.all-styles-hidden-by-filters:before,
 body.all-styles-hidden-by-filters:after {
   position: absolute;
   left: calc(3rem + var(--header-width));
-  color: hsla(180, 40%, 45%, .3);
+  color: var(--styles-hidden);
   animation: fadein 3s;
 }
 
@@ -38,25 +53,15 @@ body.all-styles-hidden-by-filters:after {
   top: 3rem;
 }
 
-a, .disabled a:hover {
-  color: #000;
-  transition: color .5s;
-  text-decoration-skip: ink;
-}
-
-a:hover {
-  color: #666;
-}
-
 #header {
   width: var(--header-width);
   height: 100vh;
   position: fixed;
   top: 0;
   padding: 1rem;
-  border-right: 1px dashed #AAA;
-  -webkit-box-shadow: 0 0 50px -18px black;
-  box-shadow: 0 0 50px -18px black;
+  border-right: 1px dashed var(--gray-lightness-66);
+  -webkit-box-shadow: 0 0 50px -18px var(--black);
+  box-shadow: 0 0 50px -18px var(--black);
   overflow: auto;
   box-sizing: border-box;
   z-index: 9;
@@ -71,11 +76,6 @@ a:hover {
   max-width: calc(100% - 30px);
 }
 
-#check-all-updates-force {
-  white-space: normal;
-  text-align: left;
-}
-
 #header h1 {
   margin-top: 0;
   margin-bottom: .3em;
@@ -103,7 +103,7 @@ a:hover {
 }
 
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
-  fill: #aaa;
+  fill: var(--gray-lightness-66);
 }
 
 #add-style-as-usercss-wrapper input {
@@ -127,7 +127,7 @@ a:hover {
 .entry {
   margin: 0;
   padding: 1.25em 2em;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--gray-lightness-86);
 }
 
 .entry:first-child {
@@ -140,11 +140,11 @@ a:hover {
   transition: fill .5s;
   width: 20px;
   height: 20px;
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 .svg-icon:hover {
-  fill: #000;
+  fill: var(--black);
 }
 
 .svg-icon.info {
@@ -209,7 +209,7 @@ a:hover {
 }
 
 .applies-to .target:hover {
-  background-color: rgba(128, 128, 128, .15);
+  background-color: var(--truegray-alpha-15);
 }
 
 .applies-to-extra:not([open]) {
@@ -239,7 +239,7 @@ a:hover {
   font-weight: normal;
   font-size: 11px;
   text-transform: lowercase;
-  background: rgba(128, 128, 128, .2);
+  background: var(--truegray-alpha-2);
   padding: 2px 5px 3px;
   border-radius: 4px;
   margin-left: 1ex;
@@ -250,8 +250,8 @@ a:hover {
 
 .entry.usercss .style-name-link::after {
   content: "usercss";
-  background-color: hsla(180, 100%, 20%, 1);
-  color: white;
+  background-color: var(--usercss-label);
+  color: var(--white);
 }
 
 .disabled h2 .style-name-link,
@@ -292,8 +292,8 @@ a:hover {
   padding-top: .1rem;
 }
 
-#options-buttons button,
-#backup-buttons button {
+#options-buttons > *,
+#backup-buttons > * {
   margin: 0 .2rem .5rem 0;
 }
 
@@ -330,7 +330,7 @@ a:hover {
 }
 
 #header summary:hover h2 {
-  border-color: #bbb;
+  border-color: var(--gray-lightness-73);
 }
 
 /* compact layout */
@@ -352,7 +352,7 @@ a:hover {
 }
 
 .newUI .entry.odd {
-  background-color: rgba(128, 128, 128, 0.05);
+  background-color: var(--manage-zebra-alpha-bg);
 }
 
 .newUI .entry > * {
@@ -405,6 +405,8 @@ a:hover {
 }
 
 .filter-selection select {
+  background-image: none;
+  background-color: transparent;
   height: 18px;
   border: none;
   max-width: 100%;
@@ -412,6 +414,10 @@ a:hover {
   padding-right: 14px;
 }
 
+.filter-selection select option  {
+  background-color: var(--main-bg)
+}
+
 .filter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
@@ -434,7 +440,7 @@ a:hover {
 
 #filters label:hover,
 #filters .filter-selection:hover {
-  background-color: hsla(0, 0%, 50%, .2);
+  background-color: var(--truegray-alpha-2);
 }
 
 .checkmate {
@@ -463,7 +469,7 @@ a:hover {
 
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
-  fill: #000;
+  fill: var(--black);
 }
 
 .newUI .entry input[type="checkbox"]:not(.slider) {
@@ -479,19 +485,26 @@ a:hover {
   cursor: pointer;
 }
 
-.newUI .entry .style-name:hover::before {
+.newUI .entry .style-name::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
   pointer-events: none;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: opacity;
+}
+
+.newUI .entry .style-name:hover::before {
+  opacity: 1;
 }
 
 .newUI .entry.enabled .style-name:hover .style-name-link {
-  color: hsla(180, 100%, 15%, 1);
+  color: var(--stylename-manage-hover-text);
 }
 
 .newUI .style-name:after {
@@ -526,15 +539,15 @@ a:hover {
 }
 
 .newUI .entry .svg-icon {
-  fill: #999;
+  fill: var(--gray-lightness-60);
 }
 
 .newUI .entry:hover .svg-icon {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 .newUI .entry:hover .svg-icon:hover {
-  fill: #000;
+  fill: var(--black);
 }
 
 .newUI .checking-update .check-update {
@@ -570,17 +583,17 @@ a:hover {
 
 .newUI .can-update[data-details$="locally edited"] .update svg,
 .newUI .update-problem .check-update svg {
-  fill: #ef6969;
+  fill: var(--palered);
 }
 
 .newUI .can-update[data-details$="locally edited"]:hover .update svg,
 .newUI .entry.update-problem:hover .check-update svg {
-  fill: #fd4040;
+  fill: var(--lightred);
 }
 
 .newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
 .newUI .entry.update-problem:hover .check-update svg:hover {
-  fill: red;
+  fill: var(--red);
 }
 
 .newUI .actions {
@@ -593,19 +606,19 @@ a:hover {
   margin-top: 18px;
   margin-left: -36px;
   padding: 1ex 1.5ex;
-  border: 1px solid #ded597;
-  background-color: #fffbd6;
+  border: 1px solid var(--tooltip-default-border);
+  background-color: var(--tooltip-default-bg);
   border-radius: 4px;
-  box-shadow: 2px 3px 10px rgba(0,0,0,.25);
+  box-shadow: 2px 3px 10px var(--black-alpha-25);
   font-size: 90%;
   animation: fadeout 10s;
   animation-fill-mode: both;
 }
 
 .newUI .update-problem .check-update:after {
-  background-color: red;
-  border: 1px solid #d40000;
-  color: white;
+  background-color: var(--red);
+  border: 1px solid var(--darker-red);
+  color: var(--white);
   animation: none;
 }
 
@@ -614,8 +627,8 @@ a:hover {
 }
 
 .newUI .can-update:not([data-details$="locally edited"]) .update:after {
-  background-color: #c0fff0;
-  border: 1px solid #89cac9;
+  background-color: var(--tooltip-action-complete-bg);
+  border: 1px solid var(--tooltip-action-complete-border);
 }
 
 .newUI .applies-to {
@@ -721,8 +734,7 @@ a:hover {
   height: 14px;
   display: inline-block;
   vertical-align: middle;
-  position: relative;
-  top: -1px;
+  margin-left: 1px;
 }
 
 #newUIoptions [data-toggle-on-click] > svg {
@@ -815,15 +827,6 @@ input[id^="manage.newUI"] {
   margin-top: 1ex;
 }
 
-#update-all-no-updates[data-skipped-edited="true"] {
-  font-weight: bold;
-}
-
-#update-all-no-updates[data-skipped-edited="true"]::after {
-  font-weight: normal;
-  display: block;
-}
-
 /* highlight updated/added styles */
 .highlight {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);
@@ -834,7 +837,7 @@ input[id^="manage.newUI"] {
 
 @keyframes highlight {
   from {
-    background-color: rgba(128, 128, 128, .5);
+    background-color: var(--truegray-alpha-5);
   }
   to {
     background-color: none;
@@ -859,7 +862,7 @@ input[id^="manage.newUI"] {
 }
 
 #filters > label:hover {
-  background-color: hsla(0, 0%, 50%, .4);
+  background-color: var(--truegray-alpha-4);
 }
 
 #filters {
@@ -867,9 +870,9 @@ input[id^="manage.newUI"] {
 }
 
 .active #filters-stats {
-  background-color: darkcyan;
-  border-color: darkcyan;
-  color: white;
+  background-color: var(--darkcyan);
+  border-color: var(--darkcyan);
+  color: var(--white);
   font-size: 0.7rem;
   font-weight: normal;
   padding: 2px 5px;
@@ -891,8 +894,17 @@ input[id^="manage.newUI"] {
   margin-top: 4px
 }
 
+.favicon-label-wrapper {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+.favicon-label-wrapper a:hover .svg-icon {
+  fill: var(--black);
+}
+
 #reset-filters svg {
-  fill: hsla(180, 50%, 27%, .5);
+  fill: var(--exit-filters);
   width: 24px; /* widen the click area a bit */
   height: 20px;
   padding: 2px;
@@ -900,7 +912,7 @@ input[id^="manage.newUI"] {
 }
 
 #reset-filters:hover svg {
-  fill: hsla(180, 50%, 27%, 1);
+  fill: var(--exit-filters-hover);
 }
 
 #filters summary:not(.active) #reset-filters,
@@ -932,16 +944,20 @@ input[id^="manage.newUI"] {
 
 #search {
   max-width: calc(100% - 30px);
+  background-color: var(--gray-lightness-93);
+  border: 1px solid var(--gray-lightness-60);
+  transition: border-color .25s;
+}
+
+#search[data-focused-via-click]:focus {
+  border-color: var(--focus-outline);
 }
 
 #search, #manage\.newUI\.sort {
   flex-grow: 1;
-  background: #fff;
   height: 20px;
   box-sizing: border-box;
   padding: 3px 3px 3px 4px;
-  color: #000;
-  border: 1px solid hsl(0, 0%, 66%);
 }
 
 #manage\.newUI\.sort {
@@ -970,12 +986,12 @@ input[id^="manage.newUI"] {
 }
 
 .help-text mark {
-  background-color: rgba(128, 128, 128, .15);
+  background-color: var(--truegray-alpha-15);
   color: currentColor;
   padding: 2px 6px;
   font-weight: bold;
   font-family: Consolas, monospace;
-  border: 1px solid rgba(128, 128, 128, .25);
+  border: 1px solid var(--truegray-alpha-25);
   display: inline-block;
   margin: 2px;
 }
@@ -998,15 +1014,15 @@ input[id^="manage.newUI"] {
 }
 
 #import pre {
-  background: #eee;
+  background: var(--main-bg);
   overflow: auto;
   margin: 0 0 .5em 0;
 }
 
 /* drag-n-drop on import button */
 .dropzone:after {
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
+  background-color: var(--black-alpha-7);
+  color: var(--white);
   left: 0;
   top: 0;
   right: 0;
@@ -1015,7 +1031,7 @@ input[id^="manage.newUI"] {
   position: fixed;
   padding: calc(50vh - 3em) calc(50vw - 5em);
   content: attr(dragndrop-hint);
-  text-shadow: 1px 1px 10px black;
+  text-shadow: 1px 1px 10px var(--black);
   font-size: xx-large;
   text-align: center;
   animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
@@ -1029,7 +1045,7 @@ input[id^="manage.newUI"] {
 
 /* post-import report */
 #message-box details:not([data-id="invalid"]) div:hover {
-  background-color: rgba(128, 128, 128, .3);
+  background-color: var(--truegray-alpha-3);
 }
 
 #message-box details:not(:last-child) {
@@ -1141,7 +1157,7 @@ input[id^="manage.newUI"] {
     width: 100%;
     position: static;
     border-right: none;
-    border-bottom: 1px dashed #AAA;
+    border-bottom: 1px dashed var(--gray-lightness-66);
   }
 
   #manage-settings {