feat: automatic dark theme in supported browsers/OS

src/common/ui/code.vue

@@ -458,4 +458,126 @@ input[type=text].is-error {
   border: 1px solid #e85600;
   background: #e8560010;
 }
+
+@media (prefers-color-scheme: dark) {
+  // mostly copied from Monokai theme
+  .cm-s-eclipse {
+    &.CodeMirror {
+      color: var(--fg);
+      background: var(--bg);
+    }
+    .CodeMirror {
+      &-scrollbar-filler,
+      &-gutter-filler {
+        background: none;
+      }
+      &-gutters {
+        border-color: var(--fill-2);
+        background-color: var(--fill-0-5);
+      }
+      &-selected {
+        background: #49483e;
+      }
+      &-line::selection,
+      &-line::-moz-selection,
+      &-line > span::selection,
+      &-line > span::-moz-selection,
+      &&-line > span > span::selection,
+      &-line > span > span::-moz-selection {
+        background: rgba(73, 72, 62, .99);
+      }
+      &-guttermarker {
+        color: white;
+        &-subtle {
+          color: #d0d0d0;
+        }
+      }
+      &-linenumber {
+        color: #666;
+      }
+      &-cursor {
+        border-color: #f8f8f0;
+      }
+      &-activeline-background {
+        background: #1a1a1a;
+      }
+      &-matchingbracket {
+        outline: none;
+        background: #444;
+        color: yellow !important;
+      }
+    }
+    span {
+      &.cm-comment {
+        color: #75715e;
+      }
+      &.cm-atom {
+        color: #ae81ff;
+      }
+      &.cm-number {
+        color: #ae81ff;
+      }
+      &.cm-comment.cm-attribute {
+        color: #97b757;
+      }
+      &.cm-comment.cm-def {
+        color: #bc9262;
+      }
+      &.cm-comment.cm-tag {
+        color: #bc6283;
+      }
+      &.cm-comment.cm-type {
+        color: #5998a6;
+      }
+      &.cm-property,
+      &.cm-attribute {
+        color: #a6e22e;
+      }
+      &.cm-keyword {
+        color: #f92672;
+      }
+      &.cm-builtin {
+        color: #66d9ef;
+      }
+      &.cm-string {
+        color: #e6db74;
+      }
+      &.cm-string-2 {
+        color: #bcb149;
+      }
+      &.cm-variable {
+        color: #f8f8f2;
+      }
+      &.cm-variable-2 {
+        color: #9effff;
+      }
+      &.cm-variable-3,
+      &.cm-type {
+        color: #66d9ef;
+      }
+      &.cm-def {
+        color: #fd971f;
+      }
+      &.cm-bracket {
+        color: #f8f8f2;
+      }
+      &.cm-tag {
+        color: #f92672;
+      }
+      &.cm-header {
+        color: #ae81ff;
+      }
+      &.cm-link {
+        color: #ae81ff;
+      }
+      &.cm-error {
+        color: #f8f8f0;
+        background: #f92672;
+      }
+      &.cm-operator {
+        color: #999
+      }
+    }
+  }
+}
 </style>

src/common/ui/style/style.css

@@ -4,15 +4,53 @@
   box-sizing: border-box;
 }
 
-html {
+:root {
   font: 14px menu;
+  --bg: var(--fill-0);
+  --fg: var(--fill-15);
+  --fill-0: #fff;
+  --fill-0-5: #f7f7f7;
+  --fill-1: #eee; // step = 0x11
+  --fill-2: #ddd;
+  --fill-3: #ccc;
+  --fill-4: #bbb;
+  --fill-5: #aaa;
+  --fill-6: #bbb;
+  --fill-7: #888;
+  --fill-8: #777;
+  --fill-9: #666;
+  --fill-10: #555;
+  --fill-11: #444;
+  --fill-12: #333;
+  --fill-13: #222;
+  --fill-14: #111;
+  --fill-15: #000;
+  @media (prefers-color-scheme: dark) {
+    --fill-0: #222222;
+    --fill-0-5: #272727;
+    --fill-1: #2c2c2c; // step = 0x0A
+    --fill-2: #363636;
+    --fill-3: #404040;
+    --fill-4: #4a4a4a;
+    --fill-5: #545454;
+    --fill-6: #5e5e5e;
+    --fill-7: #686868;
+    --fill-8: #727272;
+    --fill-9: #7c7c7c;
+    --fill-10: #868686;
+    --fill-11: #909090;
+    --fill-12: #9a9a9a;
+    --fill-13: #a4a4a4;
+    --fill-14: #aeaeae;
+    --fill-15: #b8b8b8;
+  }
 }
 
 body {
   overflow: hidden; // avoid flash of viewport caused by tooltip
   font-size: 1rem;
-  background: white;
-  color: black;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 // Form elements will not inherit
@@ -34,20 +72,23 @@ h1, h2 {
 }
 a {
   color: dodgerblue;
+  @media (prefers-color-scheme: dark) {
+    color: #7baaff;
+  }
 }
 hr {
   margin: .5rem;
   border: none;
-  border-top: 1px solid darkgray;
+  border-top: 1px solid var(--fill-7);
 }
 input[disabled] ~ * {
-  color: gray;
+  opacity: .5;
 }
 input[type=text],
 input[type=password] {
   line-height: 1.5rem;
   &[disabled] {
-    background: #eee;
+    background: var(--fill-1);
     cursor: not-allowed;
   }
 }
@@ -59,9 +100,9 @@ input[type=text],
 input[type=password],
 textarea {
   padding: 0 .5rem;
-  border: 1px solid #ccc;
+  border: 1px solid var(--fill-3);
   &:focus {
-    border-color: darkgray;
+    border-color: var(--fill-7);
   }
   &.has-error {
     border-color: #4004;
@@ -73,13 +114,16 @@ textarea {
 }
 code {
   padding: 0 .2em;
-  background: #f7e999;
+  background: hsla(50, 100%, 50%, .35);
+  @media (prefers-color-scheme: dark) {
+    background: hsla(40, 100%, 50%, .2);
+  }
 }
 
 fieldset {
   display: inline-block;
   padding: .5rem;
-  border: 1px solid #ccc;
+  border: 1px solid var(--fill-3);
 }
 
 :focus {
@@ -97,22 +141,23 @@ svg {
 }
 
 button {
-  border: 1px solid #afafaf;
-  background: #f4f4f4;
-  color: black;
-  &:hover {
-    background: #e4e4e4;
+  border: 1px solid var(--fill-5);
+  background: var(--fill-1);
+  @media (prefers-color-scheme: dark) {
+    background: var(--fill-2);
+  }
+  color: var(--fg);
+  &:not([disabled]):hover {
+    border-color: var(--fill-7);
   }
   &:active {
-    background: #bfbfbf;
+    background: var(--fill-5);
   }
   &:focus {
-    border-color: #000;
+    border-color: var(--fg);
   }
   &[disabled] {
-    color: #d0d0d0;
-    border-color: #d0d0d0;
-    background: #f0f0f0;
+    opacity: .5;
   }
   &:not([disabled]) {
     cursor: pointer;
@@ -133,23 +178,23 @@ button,
   border: 1px solid transparent;
   cursor: pointer;
   &:hover {
-    border-color: #bbb;
-    background: white;
+    border-color: var(--fill-5);
+    background: var(--bg);
   }
   > .icon {
     display: block;
     height: 2rem;
   }
   &.active {
-    background: #eee;
-    border-color: #aaa;
+    background: var(--fill-1);
+    border-color: var(--fill-4);
   }
 }
 
 .sep {
   &::after {
     content: '';
-    border-right: 1px solid #bbb;
+    border-right: 1px solid var(--fill-4);
   }
 }
 
@@ -247,7 +292,7 @@ button,
 }
 
 .frame {
-  background: #f0f0f0;
+  background: var(--fill-1);
   &-block {
     padding: .5rem;
   }
@@ -269,14 +314,83 @@ button,
 
 .vl-dropdown-menu {
   padding: .5rem;
-  border: 1px solid #bbb;
-  background: white;
+  border: 1px solid var(--fill-4);
+  background: var(--bg);
 }
 
 .modal-content {
   margin: 0 auto;
   padding: 1rem;
-  background: white;
+  background: var(--bg);
+  box-shadow: 0 0 40px #000;
+}
+
+@media (prefers-color-scheme: dark) {
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 1em;
+    height: 1em;
+    background: #111;
+    position: relative;
+    border: 1px solid #555;
+    &:checked::after {
+      content: "";
+      background: var(--fg);
+      border: 1px solid var(--bg);
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      position: absolute;
+    }
+  }
+  input[type="text"],
+  input[type="search"],
+  input[type="number"],
+  select,
+  textarea {
+    background: #111;
+    color: var(--fg);
+    border: 1px solid var(--fill-4);
+  }
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+    background: #1a1a1a;
+    &-button:single-button {
+      background: radial-gradient(circle at center, #333 40%, #1a1a1a 40%);
+      &:hover {
+        background: radial-gradient(circle at center, #444 40%, #1a1a1a 40%);
+      }
+      &:active {
+        background: radial-gradient(circle at center, #555 40%, #1a1a1a 40%);
+      }
+    }
+    &-track-piece {
+      background: #333;
+      border: 4px solid #1a1a1a;
+      border-radius: 8px;
+      &:hover {
+        background: #444;
+      }
+      &:active {
+        background: #555;
+      }
+    }
+    &-thumb {
+      border: 3px solid #1a1a1a;
+      border-radius: 8px;
+      background: #555;
+      &:hover {
+        background: #666;
+      }
+      &:active {
+        background: #777;
+      }
+    }
+  }
 }
 
 @media (min-width: 768px) {

src/common/ui/toggle-button.vue

@@ -22,12 +22,12 @@ export default {
   font-size: 12px;
   line-height: 24px;
   text-align: center;
-  color: #333;
-  background: #ddd;
+  color: var(--fill-12);
+  background: var(--fill-2);
   cursor: pointer;
   &.active {
-    color: white;
-    background: #666;
+    color: var(--bg);
+    background: var(--fill-9);
   }
   &:hover {
     filter: brightness(.8);

src/options/style.css

@@ -11,15 +11,21 @@ aside {
   height: 100%;
   padding: 4rem 1rem 0;
   text-align: right;
-  border-right: 1px solid darkgray;
-  background: #fafafa;
+  border-right: 1px solid var(--fill-5);
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--fill-3);
+  }
+  background: var(--fill-0-5);
   img {
     width: 5rem;
     height: 5rem;
   }
 }
 .aside-menu {
-  border-top: 1px solid #bbb;
+  border-top: 1px solid var(--fill-4);
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--fill-3);
+  }
   > a {
     display: block;
     padding-top: .6rem;
@@ -27,10 +33,10 @@ aside {
     font-size: 1rem;
     font-weight: 500;
     text-decoration: none;
-    color: gray;
+    color: var(--fill-8);
     &.active,
     &:hover {
-      color: black;
+      color: var(--fg);
     }
   }
 }
@@ -41,8 +47,8 @@ aside {
   top: 1rem;
   left: 0;
   line-height: 2rem;
-  background: #fafafa;
-  color: darkgray;
+  background: var(--fill-0-5);
+  color: var(--fill-5);
   border: 1px solid currentColor;
   border-left: 0;
   border-radius: 0 1rem 1rem 0;
@@ -74,9 +80,6 @@ aside {
 .text-red {
   color: red;
 }
-.text-green {
-  color: green;
-}
 .text-right {
   text-align: right;
 }
@@ -85,14 +88,17 @@ section {
   margin-top: 2rem;
   padding: 1.2rem .8rem .8rem;
   border: none;
-  border-top: 1px solid silver;
+  border-top: 1px solid var(--fill-4);
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--fill-3);
+  }
   > h3 {
     position: absolute;
     padding: 0 .2rem;
     top: -.6em;
     left: .8rem;
     line-height: 1;
-    background: white;
+    background: var(--bg);
   }
   > h4 {
     margin-bottom: .3rem;
@@ -105,7 +111,7 @@ section {
 .tab {
   position: relative;
   padding: 1.2rem;
-  background: white;
+  background: var(--bg);
 }
 
 input[type=checkbox] {

src/options/utils/dragging.css

@@ -9,8 +9,14 @@
     transition: none;
     pointer-events: none;
     background-color: hsl(34, 75%, 93%);
+    @media (prefers-color-scheme: dark) {
+      background: hsl(34, 15%, 15%);
+    }
     &.disabled {
       background-color: hsl(34, 30%, 88%);
+      @media (prefers-color-scheme: dark) {
+        background: hsl(34, 10%, 12%);
+      }
     }
   }
   &-noscroll {

src/options/views/edit/index.vue

@@ -262,19 +262,19 @@ export default {
   &-body {
     padding: .5rem 1rem;
     overflow: auto;
-    background: white;
+    background: var(--bg);
   }
   &-nav-item {
     display: inline-block;
     padding: 8px 16px;
     cursor: pointer;
     &.active {
-      background: white;
-      box-shadow: 0 -1px 1px #888;
+      background: var(--bg);
+      box-shadow: 0 -1px 1px var(--fill-7);
     }
     &:not(.active):hover {
-      background: #fff8;
-      box-shadow: 0 -1px 1px #bbb;
+      background: var(--fill-0-5);
+      box-shadow: 0 -1px 1px var(--fill-4);
     }
   }
 }

src/options/views/edit/values.vue

@@ -176,7 +176,7 @@ export default {
 <style>
 .edit-values {
   &-row {
-    border: 1px solid #ddd;
+    border: 1px solid var(--fill-2);
     &:not(:first-child) {
       border-top: 0;
     }
@@ -189,7 +189,7 @@ export default {
         max-width: 240px;
       }
       &:not(:first-child) {
-        border-left: 1px solid #ddd;
+        border-left: 1px solid var(--fill-2);
       }
     }
     :not(:hover) .edit-values-btn {
@@ -197,7 +197,7 @@ export default {
     }
   }
   &-empty {
-    color: #888;
+    color: var(--fill-7);
   }
   &-panel {
     position: absolute;
@@ -206,8 +206,8 @@ export default {
     width: 50%;
     height: 100%;
     padding: 8px;
-    box-shadow: -5px 0 5px #ddd;
-    background: white;
+    box-shadow: -5px 0 5px var(--fill-2);
+    background: var(--bg);
     z-index: 10;
     @media (max-width: 767px) {
       width: 100%;
@@ -226,8 +226,8 @@ export default {
     top: 0;
     right: 0;
     padding: 4px;
-    background: white;
-    box-shadow: -5px 0 5px white;
+    background: var(--bg);
+    box-shadow: -5px 0 5px var(--bg);
   }
 }
 </style>

src/options/views/script-item.vue

@@ -272,7 +272,7 @@ $removedItemHeight: calc(
   position: relative;
   margin: 8px;
   padding: $itemPadT 10px $itemPadB;
-  border: 1px solid #ccc;
+  border: 1px solid var(--fill-3);
   border-radius: .3rem;
   transition: transform .25s;
   // added in Chrome 41, FF64
@@ -286,23 +286,23 @@ $removedItemHeight: calc(
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-  background: white;
+  background: var(--bg);
   height: $itemHeight;
   &:hover {
-    border-color: darkgray;
+    border-color: var(--fill-5);
   }
   .secondary {
-    color: gray;
+    color: var(--fill-8);
     font-size: small;
   }
   &.disabled,
   &.removed {
-    background: #f0f0f0;
-    color: #999;
+    background: var(--fill-1);
+    color: var(--fill-6);
   }
   &.disabled {
     .secondary {
-      color: darkgray;
+      color: var(--fill-5);
     }
   }
   &.removed {
@@ -313,11 +313,14 @@ $removedItemHeight: calc(
     }
   }
   &.focused {
-    box-shadow: 1px 2px 9px gray;
+    box-shadow: 1px 2px 9px var(--fill-8);
   }
   &-buttons {
     line-height: 1;
-    color: #3e4651;
+    color: hsl(215, 13%, 28%);
+    @media (prefers-color-scheme: dark) {
+      color: hsl(215, 10%, 55%);
+    }
     > .flex {
       align-items: center;
     }
@@ -325,7 +328,7 @@ $removedItemHeight: calc(
       display: none;
     }
     .disabled {
-      color: gainsboro;
+      color: var(--fill-2);
     }
     .icon {
       display: block;
@@ -343,6 +346,9 @@ $removedItemHeight: calc(
     .disabled &,
     .removed & {
       filter: grayscale(.8);
+      @media (prefers-color-scheme: dark) {
+        opacity: .5;
+      }
     }
     .removed & {
       width: $iconSizeSmaller;
@@ -356,7 +362,7 @@ $removedItemHeight: calc(
     font-weight: 500;
     font-size: $nameFontSize;
     .disabled & {
-      color: gray;
+      color: var(--fill-8);
     }
   }
   &-author {

src/options/views/tab-about.vue

@@ -20,7 +20,7 @@
     </div>
     <div class="mb-1">
       <label v-text="i18n('labelCurrentLang')"></label>
-      <span class="text-green" v-text="language"></span> |
+      <span class="current" v-text="language"></span> |
       <a href="https://violentmonkey.github.io/localization/" target="_blank" rel="noopener noreferrer" v-text="i18n('labelHelpTranslate')"></a>
     </div>
   </div>
@@ -38,3 +38,12 @@ export default {
   },
 };
 </script>
+
+<style>
+  .current {
+    color: green;
+    @media (prefers-color-scheme: dark) {
+      color: greenyellow;
+    }
+  }
+</style>

src/options/views/tab-installed.vue

@@ -428,7 +428,7 @@ export default {
     align-items: center;
     padding: 0 1rem;
     line-height: 1;
-    border-bottom: 1px solid darkgray;
+    border-bottom: 1px solid var(--fill-5);
   }
   .vl-dropdown-menu {
     white-space: nowrap;
@@ -439,7 +439,7 @@ export default {
 }
 .backdrop {
   text-align: center;
-  color: gray;
+  color: var(--fill-8);
 }
 .scripts {
   overflow-y: auto;
@@ -464,11 +464,11 @@ export default {
   width: 100%;
   padding: .5rem;
   text-decoration: none;
-  color: #666;
+  color: var(--fill-9);
   cursor: pointer;
   &:hover {
     color: inherit;
-    background: #fbfbfb;
+    background: var(--fill-0-5);
   }
 }
 .filter-search {
@@ -501,7 +501,7 @@ export default {
 
 .trash-hint {
   line-height: 1.5;
-  color: #999;
+  color: var(--fill-6);
 }
 
 .trash-animate {

src/options/views/tab-settings/vm-editor.vue

@@ -81,6 +81,6 @@ export default {
 <style>
   .dim-hint {
     font-size: .85rem;
-    color: gray;
+    color: var(--fill-8);
   }
 </style>

src/popup/style.css

@@ -24,7 +24,7 @@ body {
   max-width: 100%;
   /* Latest Chrome renders an extra blank for a nonexistent scrollbar */
   overflow: hidden;
-  background: #f8f8f8;
+  background: var(--fill-0-5);
   @media (min-width: 360px) {
     width: 100%;
   }
@@ -41,11 +41,11 @@ footer {
   line-height: 40px;
   text-align: center;
   font-size: $fontSize;
-  color: #999;
+  color: var(--fill-6);
   > span {
     cursor: pointer;
     &:hover {
-      color: #666;
+      color: var(--fill-9);
     }
   }
 }
@@ -65,19 +65,19 @@ footer {
   cursor: pointer;
   &:hover {
     background: cornflowerblue;
-    color: white;
+    color: var(--bg);
   }
   .disabled > & {
-    color: gray;
+    color: var(--fill-8);
     &:hover {
-      color: silver;
+      color: var(--fill-4);
     }
   }
 }
 
 .ext-name {
   &.disabled {
-    color: gray;
+    color: var(--fill-8);
   }
 }
 
@@ -98,7 +98,7 @@ footer {
 .menu-buttons {
   align-items: center;
   padding: $padding $padding $padding 0;
-  background: white;
+  background: var(--bg);
   > .menu-area {
     padding: $padding;
   }
@@ -110,8 +110,8 @@ footer {
 }
 
 .menu {
-  background: white;
-  border-top: 1px solid silver;
+  background: var(--bg);
+  border-top: 1px solid var(--fill-4);
   &-item {
     position: relative;
     display: flex;
@@ -156,7 +156,7 @@ footer {
     }
   }
   &.expand {
-    background: #fbfbfb;
+    background: var(--fill-0-5);
     > .submenu {
       display: block;
     }
@@ -171,8 +171,8 @@ footer {
   min-height: 4rem;
   max-height: 30rem;
   overflow-y: auto;
-  background: white;
-  border-top: 1px dashed #ddd;
+  background: var(--bg);
+  border-top: 1px dashed var(--fill-2);
   > * {
     position: relative;
     &:not(:hover) > .submenu-buttons {
@@ -190,10 +190,10 @@ footer {
   }
   &-button {
     padding: .2rem;
-    background: white;
+    background: var(--bg);
     cursor: pointer;
     &:hover {
-      color: white;
+      color: var(--bg);
       background: cornflowerblue;
     }
     .icon {
@@ -202,7 +202,7 @@ footer {
   }
   &-commands {
     font-size: .8rem;
-    color: #333;
+    color: var(--fill-12);
     > .menu-item {
       padding-left: $leftPaneWidth;
       > .icon {
@@ -221,8 +221,8 @@ footer {
   word-wrap: break-word;
   font-size: $fontSize;
   line-height: 1;
-  background: #fdfdfd;
-  border: 1px solid #ddd;
+  background: var(--fill-0-5);
+  border: 1px solid var(--fill-2);
   > div {
     max-height: 2em;
     overflow: hidden;