adjust styles and use tokens when possible

docs/assets/plugins/code-block/code-block.css

@@ -1,17 +1,21 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background: var(--sl-color-gray-50);
+  background-color: var(--sl-color-gray-50);
   margin-bottom: 1.5rem;
 }
 
+.sl-theme-dark .code-block {
+  background-color: var(--sl-color-gray-100);
+}
+
 .code-block__preview {
   position: relative;
   border: solid 1px var(--sl-color-gray-200);
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: white;
+  background-color: var(--sl-color-white);
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -40,7 +44,7 @@
   width: 1.75rem;
   font-size: 20px;
   color: var(--sl-color-gray-500);
-  background-color: white;
+  background-color: var(--sl-color-white);
   border-left: solid 1px var(--sl-color-gray-200);
   border-top-right-radius: 3px;
   cursor: ew-resize;
@@ -126,42 +130,3 @@
 .code-block--expanded .code-block__toggle svg {
   transform: rotate(180deg);
 }
-
-/* Dark theme */
-.sl-theme-dark .code-block {
-  background-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__preview {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__source {
-  border-color: var(--sl-color-gray-800);
-}
-
-.sl-theme-dark .code-block__resizer {
-  border-left-color: var(--sl-color-gray-800);
-  background-color: var(--sl-color-gray-900);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle:hover,
-.sl-theme-dark .code-block__toggle:active {
-  background-color: var(--sl-color-gray-900);
-  border-color: var(--sl-color-gray-800);
-  color: var(--sl-color-gray-400);
-}
-
-.sl-theme-dark .code-block__toggle:focus {
-  border-color: var(--sl-color-primary-500);
-  background-color: var(--sl-color-primary-900);
-  color: var(--sl-color-primary-500);
-}

docs/assets/plugins/theme/theme.js

@@ -6,6 +6,7 @@
   window.$docsify.plugins.push((hook, vm) => {
     hook.mounted(function () {
       let isDark = localStorage.getItem('theme') === 'sl-theme-dark';
+      const documentElement = document.documentElement;
       const sidebarToggle = document.querySelector('.sidebar-toggle');
       const noTransitions = Object.assign(document.createElement('style'), {
         textContent: '* { transition: none !important; }'
@@ -18,7 +19,7 @@
 
       // Set initial theme
       if (isDark) {
-        document.body.classList.add('sl-theme-dark');
+        documentElement.classList.add('sl-theme-dark');
       }
 
       // Toggle theme
@@ -30,7 +31,7 @@
         // Disable transitions as the theme changes
         document.body.appendChild(noTransitions);
         requestAnimationFrame(() => {
-          document.body.classList.toggle('sl-theme-dark', isDark);
+          documentElement.classList.toggle('sl-theme-dark', isDark);
           requestAnimationFrame(() => document.body.removeChild(noTransitions));
         });
       });