diff --git a/packages/ui-default/theme/dark.styl b/packages/ui-default/theme/dark.styl
index b0165694..93f58cdf 100644
--- a/packages/ui-default/theme/dark.styl
+++ b/packages/ui-default/theme/dark.styl
@@ -1,35 +1,51 @@
+$content-color = #eee
+$content-second-color = #bdbdbd
+
+$accent-color = #55b6e2
+
+$main-background-color = #121212
+$second-background-color = #323334
+$hover-background-color = #424242
+
 .theme--dark
+  html
+    color-scheme: dark
+
+  body
+    color: $content-color
+    background-color: $main-background-color
+
   #panel
-    background-color: #1d2022
+    background-color: $main-background-color
 
   .nav
-    background-color: rgba(15, 15, 15, 98)
+    background-color: $second-background-color
 
   .nav .nav__item:hover
-    background-color: #171717
+    background-color: $hover-background-color
 
   .nav .nav__item
-    color: #aaa
+    color: $content-color
 
   .section
-    background-color: #1f1f1f
-    box-shadow: 0 0.2rem 0.5rem #3d3d3d
-
-  body
-    color: #d9dfe7
+    background-color: $second-background-color
+    box-shadow: none
 
   .footer
-    background-color: #1f1f1f
-    color: #aaa
+    background-color: $second-background-color
+    color: $content-color
 
   h1, h2, h3, h4, h5, h6
-    color: #c2c2c2
+    color: $content-color
 
   a, .link, a:visited, .link:visited, a:hover, .link:hover, a:active, .link:active
-    color: #aaa
+    color: $content-second-color
+
+  .typo a:not(.user-profile-name):not(.media-link), .typo .link:not(.user-profile-name):not(.media-link), .typo-a:not(.user-profile-name):not(.media-link), .typo a:visited:not(.user-profile-name):not(.media-link), .typo .link:visited:not(.user-profile-name):not(.media-link), .typo-a:visited:not(.user-profile-name):not(.media-link), .typo a:active:not(.user-profile-name):not(.media-link), .typo .link:active:not(.user-profile-name):not(.media-link), .typo-a:active:not(.user-profile-name):not(.media-link), .typo a:hover:not(.user-profile-name):not(.media-link), .typo .link:hover:not(.user-profile-name):not(.media-link), .typo-a:hover:not(.user-profile-name):not(.media-link)
+    color: $accent-color
 
   .section__title
-    color: #9b9b9b
+    color: $content-second-color
 
   .dropdown .menu
     box-shadow: 0 0.125rem 0.4375rem #3d3d3d
@@ -77,7 +93,7 @@
     box-shadow: 0 0.125rem 0.625rem rgba(255 255 255 20%)
 
   .section__table-header
-    background-color: rgba(15, 15, 15, 0.95)
+    background-color: transparent
     box-shadow: 0 0.1875rem 0.125rem rgba(255 255 255 3%)
 
   .data-table tr
@@ -180,7 +196,7 @@
     background-color: #171717
     color: #999
 
-  pre, code
+  pre:not(.vditor-sv), code
     background-color: #171717
 
   .scratchpad__toolbar