refactor: add theme container & lift the dark/light class scope to root & restore scrollbar style.

resources/css/common.css

@@ -4,7 +4,7 @@
   --ls-page-text-size: 1em;
   --ls-page-title-size: 36px;
   --ls-font-family: 'Inter';
-  --ls-main-content-max-with: 680px;
+  --ls-main-content-max-width: 680px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -13,92 +13,84 @@
   }
 }
 
-.dark-theme {
-    --ls-primary-background-color: #002b36;
-    --ls-secondary-background-color: #073642;
-    --ls-tertiary-background-color: #0f4552;
-    --ls-quaternary-background-color: #01313d;
-
-    --ls-block-properties-background-color: #02222a;
-    --ls-search-background-color: var(--ls-primary-background-color);
-    --ls-border-color: #0e5263;
-    --ls-menu-hover-color: var(--ls-secondary-background-color);
-
-    --ls-primary-text-color: #a4b5b6;
-    --ls-secondary-text-color: #dfdfdf;
-    --ls-title-text-color: #93a1a1;
-    --ls-link-text-color: #8abbbb;
-    --ls-link-text-hover-color: #d0e8e8;
-    --ls-link-ref-text-color: var(--ls-link-text-color);
-    --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-        --ls-tag-text-color: var(--ls-link-text-color);
-        --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
-
-    --ls-block-bullet-border-color: #0f4958;
-    --ls-block-bullet-color: #608e91;
-    --ls-block-highlight-color: #074758;
-    --ls-selection-background-color: #338FFF;
-    --ls-page-checkbox-color: #6093a0;
-    --ls-page-checkbox-border-color: var(--ls-primary-background-color);
-    --ls-page-blockquote-color: var(--ls-primary-text-color);
-    --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
-    --ls-page-blockquote-border-color: #2f4f4f;
-    --ls-page-inline-code-color: var(--ls-primary-text-color);
-    --ls-page-inline-code-bg-color: #01222a;
-
-    --ls-scrollbar-foreground-color: #001F27;
-    --ls-scrollbar-background-color: var(--ls-primary-background-color);
-    --ls-scrollbar-thumb-hover-color: #b4b4b466;
-
-    --ls-head-text-color: var(--ls-link-text-color);
-    --ls-icon-color: var(--ls-link-text-color);
-    --ls-search-icon-color: var(--ls-link-text-color);
-    --ls-a-chosen-bg: var(--ls-secondary-background-color);
-    --ls-right-sidebar-code-bg-color: #04303c;
-}
-
-.white-theme {
-    --ls-primary-background-color: white;
-    --ls-secondary-background-color: #D8E1E8;
-    --ls-tertiary-background-color: #f0f8ff;
-    --ls-quaternary-background-color: #f7f7f7;
-
-    --ls-block-properties-background-color: var(--ls-tertiary-background-color);
-    --ls-search-background-color: var(--ls-primary-background-color);
-    --ls-border-color: #ccc;
-    --ls-menu-hover-color: var(--ls-secondary-background-color);
-
-    --ls-primary-text-color: #24292e;
-    --ls-secondary-text-color: #161e2e;
-    --ls-title-text-color: #222;
-    --ls-link-text-color: #045591;
-    --ls-link-text-hover-color: #000;
-    --ls-link-ref-text-color: var(--ls-link-text-color);
-    --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
-        --ls-tag-text-color: var(--ls-link-text-color);
-        --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
-
-    --ls-block-bullet-border-color: #ced9e0;
-    --ls-block-bullet-color: #394b59;
-    --ls-block-highlight-color: #7cccff;
-    --ls-selection-background-color: #B1D7FF;
-    --ls-page-checkbox-color: none;
-    --ls-page-checkbox-border-color: #808080;
-    --ls-page-blockquote-color: var(--ls-primary-text-color);
-    --ls-page-blockquote-bg-color: #f8f8f8;
-    --ls-page-blockquote-border-color: #ccc;
-    --ls-page-inline-code-color: var(--ls-primary-text-color);
-    --ls-page-inline-code-bg-color: #eeeeee;
-
-    --ls-scrollbar-foreground-color: var(--ls-primary-text-color);
-    --ls-scrollbar-background-color: var(--ls-primary-background-color);
-    --ls-scrollbar-thumb-hover-color: var(--ls-secondary-text-color);
-
-    --ls-head-text-color: var(--ls-link-text-color);
-    --ls-icon-color: #6b7280;
-    --ls-search-icon-color: var(--ls-icon-color);
-    --ls-a-chosen-bg: #f4f5f7;
-    --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
+.dark-theme,
+html[data-theme=dark] {
+  --ls-primary-background-color: #002b36;
+  --ls-secondary-background-color: #073642;
+  --ls-tertiary-background-color: #0f4552;
+  --ls-quaternary-background-color: #01313d;
+  --ls-block-properties-background-color: #02222a;
+  --ls-search-background-color: var(--ls-primary-background-color);
+  --ls-border-color: #0e5263;
+  --ls-menu-hover-color: var(--ls-secondary-background-color);
+  --ls-primary-text-color: #a4b5b6;
+  --ls-secondary-text-color: #dfdfdf;
+  --ls-title-text-color: #93a1a1;
+  --ls-link-text-color: #8abbbb;
+  --ls-link-text-hover-color: #d0e8e8;
+  --ls-link-ref-text-color: var(--ls-link-text-color);
+  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-tag-text-color: var(--ls-link-text-color);
+  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-block-bullet-border-color: #0f4958;
+  --ls-block-bullet-color: #608e91;
+  --ls-block-highlight-color: #074758;
+  --ls-selection-background-color: #338fff;
+  --ls-page-checkbox-color: #6093a0;
+  --ls-page-checkbox-border-color: var(--ls-primary-background-color);
+  --ls-page-blockquote-color: var(--ls-primary-text-color);
+  --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
+  --ls-page-blockquote-border-color: #2f4f4f;
+  --ls-page-inline-code-color: var(--ls-primary-text-color);
+  --ls-page-inline-code-bg-color: #01222a;
+  --ls-scrollbar-foreground-color: #001f27;
+  --ls-scrollbar-background-color: var(--ls-primary-background-color);
+  --ls-scrollbar-thumb-hover-color: #b4b4b466;
+  --ls-head-text-color: var(--ls-link-text-color);
+  --ls-icon-color: var(--ls-link-text-color);
+  --ls-search-icon-color: var(--ls-link-text-color);
+  --ls-a-chosen-bg: var(--ls-secondary-background-color);
+  --ls-right-sidebar-code-bg-color: #04303c;
+}
+
+.white-theme,
+html[data-theme=light] {
+  --ls-primary-background-color: white;
+  --ls-secondary-background-color: #d8e1e8;
+  --ls-tertiary-background-color: #f0f8ff;
+  --ls-quaternary-background-color: #f7f7f7;
+  --ls-block-properties-background-color: var(--ls-tertiary-background-color);
+  --ls-search-background-color: var(--ls-primary-background-color);
+  --ls-border-color: #ccc;
+  --ls-menu-hover-color: var(--ls-secondary-background-color);
+  --ls-primary-text-color: #24292e;
+  --ls-secondary-text-color: #161e2e;
+  --ls-title-text-color: #222;
+  --ls-link-text-color: #045591;
+  --ls-link-text-hover-color: #000;
+  --ls-link-ref-text-color: var(--ls-link-text-color);
+  --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-tag-text-color: var(--ls-link-text-color);
+  --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
+  --ls-block-bullet-border-color: #ced9e0;
+  --ls-block-bullet-color: #394b59;
+  --ls-block-highlight-color: #7cccff;
+  --ls-selection-background-color: #b1d7ff;
+  --ls-page-checkbox-color: none;
+  --ls-page-checkbox-border-color: #808080;
+  --ls-page-blockquote-color: var(--ls-primary-text-color);
+  --ls-page-blockquote-bg-color: #f8f8f8;
+  --ls-page-blockquote-border-color: #ccc;
+  --ls-page-inline-code-color: var(--ls-primary-text-color);
+  --ls-page-inline-code-bg-color: #eee;
+  --ls-scrollbar-foreground-color: var(--ls-primary-text-color);
+  --ls-scrollbar-background-color: var(--ls-primary-background-color);
+  --ls-scrollbar-thumb-hover-color: var(--ls-secondary-text-color);
+  --ls-head-text-color: var(--ls-link-text-color);
+  --ls-icon-color: #6b7280;
+  --ls-search-icon-color: var(--ls-icon-color);
+  --ls-a-chosen-bg: #f4f5f7;
+  --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
 }
 
 html {
@@ -119,7 +111,10 @@ a svg {
   color: var(--ls-icon-color);
 }
 
-html, body, #root, #draw {
+html,
+body,
+#root,
+#draw {
   /* height: 100%; */
 }
 
@@ -131,9 +126,14 @@ body {
 }
 
 .form-checkbox {
+  color: var(--ls-page-checkbox-color, #137cbd);
+  background-color: var(--ls-page-checkbox-color, transparent);
+  border: 1px solid;
+  border-color: var(--ls-page-checkbox-border-color, #808080);
+
   -webkit-appearance: none;
   -moz-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
 .ls-center {
@@ -148,17 +148,18 @@ body {
 }
 
 textarea {
-    overflow: hidden;
-    padding: 8px;
-    border: 1px solid rgba(39,41,43,.15);
-    border-radius: 4px;
-    font-size: 1em;
-    line-height: 1.5;
-    width: 100%;
-    resize: none;
-    outline: none;
-    font-weight: inherit;
-    letter-spacing: inherit;
+  overflow: hidden;
+  padding: 8px;
+  border: 1px solid rgba(39, 41, 43, 0.15);
+  border-radius: 4px;
+  font-size: 1em;
+  line-height: 1.5;
+  width: 100%;
+  resize: none;
+  outline: none;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-size-adjust: 100%;
 }
 
 ul {
@@ -171,7 +172,8 @@ ol {
   margin-left: 1.2em;
 }
 
-.content p, .content div {
+.content p,
+.content div {
   word-break: break-word;
 }
 
@@ -203,11 +205,13 @@ p {
   color: var(--ls-primary-text-color)
 }
 
-li p:first-child, .block-body p:first-child {
+li p:first-child,
+.block-body p:first-child {
   margin-top: 0;
 }
 
-li p:last-child, .block-body p:last-child {
+li p:last-child,
+.block-body p:last-child {
   margin-bottom: 0;
 }
 
@@ -232,21 +236,19 @@ li {
 }
 
 pre {
-  background: #F6F8FA;
-  background: var(--ls-secondary-background-color);
+  background: var(--ls-secondary-background-color, #f6f8fa);
+  margin: 1rem 0;
+  line-height: 1.45em;
+  overflow: auto;
 }
 
-
 #journals textarea {
   word-break: break-word;
   overflow: hidden;
 }
 
-textarea {
-  text-size-adjust: 100%;
-}
-
-.cursor-pointer, .cursor {
+.cursor-pointer,
+.cursor {
   cursor: pointer;
 }
 
@@ -275,20 +277,27 @@ a:hover {
 }
 
 /* .content a[href^="http"]:after { */
+
 /*     content: '⤴'; */
+
 /* } */
 
 /* .content a:visited { */
+
 /*     color: #921b51; */
+
 /*     border-bottom: 1px solid #921b51; */
+
 /* } */
 
-.content a.initial-color, .content a.initial-color:hover {
+.content a.initial-color,
+.content a.initial-color:hover {
   color: initial;
   text-decoration: none;
 }
 
-a.block-control, a.block-control:hover {
+a.block-control,
+a.block-control:hover {
   text-decoration: none;
   cursor: pointer;
   font-size: 14px;
@@ -329,7 +338,8 @@ a.page-ref:hover {
   color: var(--ls-link-ref-text-hover-color)
 }
 
-.block-highlight, .content .selected {
+.block-highlight,
+.content .selected {
   background-color: #7cccff;
   background-color: var(--ls-block-highlight-color);
 }
@@ -370,22 +380,20 @@ svg {
   overflow-y: scroll
 }
 
-
 .lds-dual-ring {
   display: inline-block;
 }
 
-.lds-dual-ring:after {
+.lds-dual-ring::after {
   content: " ";
   display: block;
   width: 20px;
   height: 20px;
   margin: 3px;
   border-radius: 50%;
-  border: 2px solid;
-  border: 2px solid;
-  border-color: #24292E transparent;
-  border-color: var(--ls-primary-text-color) transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--ls-primary-text-color, #24292e);
   animation: lds-dual-ring 1.2s linear infinite;
 }
 
@@ -393,6 +401,7 @@ svg {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -422,7 +431,8 @@ svg {
   box-shadow: none;
 }
 
-a.nav-item:hover, a.star-page:hover {
+a.nav-item:hover,
+a.star-page:hover {
   background-color: #00242d;
 }
 
@@ -433,20 +443,20 @@ a.nav-item:hover, a.star-page:hover {
 
 /* block dropdown top, auto-complete, sync dropdown */
 .bg-base-3 {
-  background-color: #FFF;
+  background-color: #fff;
   background-color: var(--ls-primary-background-color);
 }
 
 /* primary bg */
 #app-container {
-  background-color: #FFF;
+  background-color: #fff;
   background-color: var(--ls-primary-background-color);
 
   position: relative;
 }
 
 #head {
-  background-color: #FFF;
+  background-color: #fff;
   background-color: var(--ls-primary-background-color);
 
   position: fixed;
@@ -456,7 +466,7 @@ a.nav-item:hover, a.star-page:hover {
 }
 
 #search_field {
-  background-color: #FFF;
+  background-color: #fff;
   background-color: var(--ls-search-background-color);
   color: #161e2e;
   color: var(--ls-secondary-text-color);
@@ -467,18 +477,19 @@ a.nav-item:hover, a.star-page:hover {
   background-color: var(--ls-secondary-background-color);
 }
 
-a.menu-link:hover, button.pull:hover, button.menu:focus {
-  background-color: #f4f5f7;
-  background-color: var(--ls-menu-hover-color);
+a.menu-link:hover,
+button.pull:hover,
+button.menu:focus {
+  background-color: var(--ls-menu-hover-color, #137cbd);
 }
 
 a.menu-link {
-  background-color: #ffffff;
-  background-color: var(--ls-primary-background-color);
+  background-color: var(--ls-primary-background-color, #fff);
+  color: var(--ls-link-text-color);
 }
 
 .white-theme #head a {
-    color: var(--ls-primary-text-color);
+  color: var(--ls-primary-text-color);
 }
 
 button.menu {
@@ -499,16 +510,6 @@ button.menu {
   font-size: 1em;
 }
 
-.form-checkbox {
-  color: #137cbd;
-  color: var(--ls-page-checkbox-color);
-  background-color: transparent;
-  background-color: var(--ls-page-checkbox-color);
-  border: 1px solid;
-  border-color: #808080;
-  border-color: var(--ls-page-checkbox-border-color)
-}
-
 input {
   color: var(--ls-primary-text-color);
   background: transparent;
@@ -520,7 +521,9 @@ input {
 }
 
 /* .form-input { */
+
 /*     background-color: #FDF6E3; */
+
 /* } */
 
 .form-select {
@@ -534,7 +537,8 @@ input {
   margin-bottom: 0;
 }
 
-#global-graph, #page-graph {
+#global-graph,
+#page-graph {
   min-height: 100% !important;
   height: 100%;
   width: 100%;
@@ -544,18 +548,18 @@ input {
 }
 
 .opacity-70 {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .opacity-80 {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 *:not(pre) > code {
   font-style: normal !important;
   letter-spacing: 0;
-  padding: .1em .4em;
-  word-spacing: -.15em;
+  padding: 0.1em 0.4em;
+  word-spacing: -0.15em;
   background-color: #eee;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -572,6 +576,7 @@ hr {
 #search-wrapper svg {
   color: #9fa6b2;
   color: var(--ls-search-icon-color);
+
   /* margin-left: 6px; */
 }
 
@@ -580,23 +585,21 @@ hr {
   color: var(--ls-link-text-hover-color);
 }
 
-.file textarea, .file pre {
+.file textarea,
+.file pre {
   margin: 0;
 }
 
 a.button {
   text-decoration: none;
-  color: #FFF;
+  color: #fff;
   display: inline;
 }
 
 /* ever used? */
-a.button:hover, .content a.button {
-  color: #FFF;
-}
-
-a.menu-link {
-  color: var(--ls-link-text-color);
+a.button:hover,
+.content a.button {
+  color: #fff;
 }
 
 .white-theme a.menu-link {
@@ -611,7 +614,8 @@ a.chosen {
   background: var(--ls-a-chosen-bg);
 }
 
-.done, .canceled {
+.done,
+.canceled {
   opacity: 0.7;
 }
 
@@ -624,20 +628,29 @@ code {
 }
 
 pre.code {
-  background: #282A36;
+  background: #282a36;
   background: var(--ls-secondary-background-color);
   color: #f8f8f2;
   color: var(--ls-primary-text-color);
 }
 
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  font-size: 14px;
+}
+
 :not(pre) > code {
   color: var(--ls-page-inline-code-color);
-  background: #eeeeee;
+  background: #eee;
   background: var(--ls-page-inline-code-bg-color);
 }
 
 mark {
-  background: #FEF3AC;
+  background: #fef3ac;
   color: #262626;
   padding: 0 1px;
 }
@@ -651,14 +664,9 @@ dt {
   font-weight: bold;
 }
 
-:root {
-  //scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
-  //scrollbar-width: thin !important;
-}
-
 blockquote {
   display: block;
-  text-indent: 0em;
+  text-indent: 0;
   padding: 10px 20px;
   border-left: 4px solid;
   border-left-color: #d3d3d3;
@@ -670,30 +678,14 @@ blockquote {
   color: var(--ls-page-blockquote-color);
 }
 
-//.dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece {
-//  background-color: var(--ls-scrollbar-background-color);
-//  border: 4px solid;
-//  border-color: var(--ls-scrollbar-background-color);
-//}
-//
-//.dark-theme ::-webkit-scrollbar-thumb {
-//  background-color: var(--ls-scrollbar-foreground-color);
-//  background-clip: padding-box;
-//  min-height: 28px;
-//}
-//
-//.dark-theme ::-webkit-scrollbar-thumb:hover {
-//  background-color: var(--ls-scrollbar-thumb-hover-color);
-//}
-
 .svg-shadow {
-  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .7));
-  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
+  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
+  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
 }
 
 .tip-shadow {
-  -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8));
-  filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8));
+  -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8));
+  filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, 0.8));
 }
 
 svg.note {
@@ -720,6 +712,7 @@ svg.note {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -729,6 +722,7 @@ svg.note {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -738,6 +732,7 @@ svg.note {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -745,11 +740,11 @@ svg.note {
 
 .fade-in {
   opacity: 0; /* make things invisible upon start */
-  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-  -moz-animation: fadeIn ease-in 1;
+  -webkit-animation: fadein ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
+  -moz-animation: fadein ease-in 1;
   animation: fadeIn ease-in 1;
 
-  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
 
@@ -822,7 +817,6 @@ iframe {
     width: 100%;
     border: 0;
   }
-
 }
 
 .aspect-ratio-square {
@@ -854,15 +848,11 @@ iframe {
   height: 100%;
   width: 100%;
   background-color: currentColor;
-  transition: transform .8s cubic-bezier(.26, .86, .44, .985);
+  transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transform-origin: 0 0;
   transform: scaleX(0);
 }
 
-pre {
-  margin: 1rem 0;
-}
-
 span.bullet-container {
   display: flex;
   height: 13px;
@@ -912,14 +902,15 @@ li:first-child {
   font-style: italic;
 }
 
-.abstract p:last-of-type:before {
+.abstract p:last-of-type::before {
   content: "    ";
   white-space: pre;
 }
 
-a.warning, span.warning {
-  background: #F56565;
-  padding: .1em .4em;
+a.warning,
+span.warning {
+  background: #f56565;
+  padding: 0.1em 0.4em;
   border-radius: 4px;
   color: #fff;
 }
@@ -966,14 +957,14 @@ button.context-menu-option {
 }
 
 .notification-area {
-  background-color: #FFF;
+  background-color: #fff;
   background-color: var(--ls-tertiary-background-color);
   color: var(--ls-primary-text-color);
 }
 
 .content img {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 a.login {
@@ -1025,16 +1016,12 @@ a.tooltip-priority::after {
   width: 80%;
 }
 
-pre {
-  line-height: 1.45em;
-  overflow: auto;
-}
-
 #intro p {
   margin: 15px 0;
 }
 
-#intro h1, #intro h2 {
+#intro h1,
+#intro h2 {
   margin: 2.5em 0 0.5em;
 }
 
@@ -1044,6 +1031,7 @@ pre {
 
 #intro img {
   margin: 5em 0;
+  max-width: 100%;
 }
 
 #intro h3 {
@@ -1056,22 +1044,13 @@ pre {
   margin: 1em 0 0.5em;
 }
 
-
-/* .page .content *, #intro .content *, .page .title { */
-/*     margin-left: auto; */
-/*     margin-right: auto; */
-/* } */
-
-/* .page .blocks-container .ls-block { */
-/*     align-self: center; */
-/* } */
-
 #intro .content {
   flex-direction: column;
   align-items: center;
 }
 
-#intro .content :not(img), .foldable-title {
+#intro .content :not(img),
+.foldable-title {
   max-width: 665px;
 }
 
@@ -1079,21 +1058,22 @@ pre {
   margin: 0 auto;
 }
 
-.center, .foldable-title {
+.center,
+.foldable-title {
   margin: 0 auto;
 }
 
-img, video {
+img,
+video {
   margin-left: auto;
   margin-right: auto;
 }
 
-#intro .intro-docs, img, video, .intro .ls-block {
-  max-width: 653px;
-}
-
-#intro img {
-  max-width: 100%;
+#intro .intro-docs,
+img,
+video,
+.intro .ls-block {
+  max-width: var(--ls-main-content-max-width, 100%)
 }
 
 .w10 {
@@ -1141,7 +1121,7 @@ summary {
 }
 
 .dropdown-wrapper {
-  background-color: #FFFFFF;
+  background-color: #fff;
   background-color: var(--ls-primary-background-color);
   min-width: 12rem;
 }
@@ -1242,12 +1222,13 @@ a.tag:hover {
   background-color: #702459;
 }
 
-.block-body blockquote:first-child, .block-body pre:first-child {
+.block-body blockquote:first-child,
+.block-body pre:first-child {
   margin-top: 8px;
   margin-bottom: 8px;
 }
 
-.extensions__code>.CodeMirror {
+.extensions__code > .CodeMirror {
   height: auto;
   margin: 6px 0 0 0;
   font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
@@ -1318,28 +1299,30 @@ a.tag:hover {
   align-items: center;
   z-index: 9999;
 
-  transition: top .3s;
+  transition: top 0.3s;
 }
 
 #mobile-editor-toolbar > button {
   padding: 5px;
 }
+
 /* endregion */
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .hide-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none !important;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none !important; /* Firefox */
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .hide-scrollbar::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .left {
-    float: left;
+  float: left;
 }
+
 .right {
-    float: right;
+  float: right;
 }

src/main/frontend/components/sidebar.cljs

@@ -1,6 +1,7 @@
 (ns frontend.components.sidebar
   (:require [rum.core :as rum]
             [frontend.ui :as ui]
+            [frontend.components.theme :as theme]
             [frontend.mixins :as mixins]
             [frontend.db-mixins :as db-mixins]
             [frontend.db :as db]
@@ -309,45 +310,49 @@
         home? (= :home route-name)
         default-home (get-default-home-if-valid)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div {:class (if white? "white-theme" "dark-theme")
-             :on-click editor-handler/unhighlight-block!}
-       (sidebar-mobile-sidebar {:open? open?
-                                :close-fn close-fn
-                                :route-match route-match})
+      (theme/container
+       {:theme theme
+        :on-click editor-handler/unhighlight-block!}
 
-       [:div.#app-container.cp__sidebar-layout
-        {:class (if sidebar-open? "is-right-sidebar-open")}
-        (header/header {:open-fn open-fn
-                        :white? white?
-                        :current-repo current-repo
-                        :logged? logged?
-                        :page? page?
-                        :route-match route-match
-                        :me me
-                        :default-home default-home
-                        :new-block-mode new-block-mode})
+       [:div.theme-inner
+        (sidebar-mobile-sidebar
+         {:open?       open?
+          :close-fn    close-fn
+          :route-match route-match})
+        [:div.#app-container.cp__sidebar-layout
+         {:class (if sidebar-open? "is-right-sidebar-open")}
+         (header/header {:open-fn        open-fn
+                         :white?         white?
+                         :current-repo   current-repo
+                         :logged?        logged?
+                         :page?          page?
+                         :route-match    route-match
+                         :me             me
+                         :default-home   default-home
+                         :new-block-mode new-block-mode})
 
-        (sidebar-main {:route-match route-match
-                       :global-graph-pages? global-graph-pages?
-                       :logged? logged?
-                       :home? home?
-                       :route-name route-name
-                       :indexeddb-support? indexeddb-support?
-                       :white? white?
-                       :db-restoring? db-restoring?
-                       :main-content main-content})]
+         (sidebar-main {:route-match         route-match
+                        :global-graph-pages? global-graph-pages?
+                        :logged?             logged?
+                        :home?               home?
+                        :route-name          route-name
+                        :indexeddb-support?  indexeddb-support?
+                        :white?              white?
+                        :db-restoring?       db-restoring?
+                        :main-content        main-content})]
 
-       (ui/notification)
-       (ui/modal)
-       (custom-context-menu)
-       [:a#download.hidden]
-       (when (and (not config/mobile?)
-                  (not config/publishing?))
-         (help-button)
+        (ui/notification)
+        (ui/modal)
+        (custom-context-menu)
+        [:a#download.hidden]
+        (when
+         (and (not config/mobile?)
+              (not config/publishing?))
+          (help-button)
          ;; [:div.font-bold.absolute.bottom-4.bg-base-2.rounded-full.h-8.w-8.flex.items-center.justify-center.font-bold.cursor.opacity-70.hover:opacity-100
          ;;  {:style {:left 24}
          ;;   :title "Click to show/hide sidebar"
          ;;   :on-click (fn []
          ;;               (state/set-left-sidebar-open! (not (state/get-left-sidebar-open?))))}
          ;;  (if (state/sub :ui/left-sidebar-open?) "<" ">")]
-)])))
+)]))))

src/main/frontend/components/sidebar.css

@@ -51,7 +51,7 @@
 
 .cp__sidebar-main-content {
   padding: 3rem 1.5rem;
-  max-width: var(--ls-main-content-max-with);
+  max-width: var(--ls-main-content-max-width);
   min-height: 100vh;
   flex: 1;
 }

src/main/frontend/components/theme.cljs

@@ -0,0 +1,12 @@
+(ns frontend.components.theme
+  (:require [rum.core :as rum]))
+
+(rum/defc container
+  [{:keys [theme on-click] :as props} child]
+  (rum/use-effect! #(-> js/document.documentElement
+                        (.setAttribute "data-theme" theme))
+                   [theme])
+  [:div
+   {:class (str theme "-theme")
+    :on-click on-click}
+   child])

src/main/frontend/components/theme.css

@@ -0,0 +1,23 @@
+:root {
+  scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
+  scrollbar-width: thin !important;
+}
+
+html:not(.is-mac)[data-theme=dark] {
+  &::-webkit-scrollbar,
+  html::-webkit-scrollbar-track-piece {
+    background-color: var(--ls-scrollbar-background-color);
+    border: 4px solid;
+    border-color: var(--ls-scrollbar-background-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--ls-scrollbar-foreground-color);
+    background-clip: padding-box;
+    min-height: 28px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--ls-scrollbar-thumb-hover-color);
+  }
+}

src/main/frontend/ui.cljs

@@ -226,6 +226,7 @@
 (defn inject-document-devices-envs!
   []
   (let [cl (.-classList js/document.documentElement)]
+    (if (util/mac?) (.add cl "is-mac"))
     (if (util/ios?) (.add cl "is-ios"))
     (if (util/safari?) (.add cl "is-safari"))))
 

src/main/frontend/util.cljs

@@ -25,6 +25,10 @@
     (-write writer (str "\"" (.toString sym) "\""))))
 
 ;; envs
+(defn mac?
+  []
+  (string/includes? js/navigator.appVersion "Mac"))
+
 (defn ios?
   []
   (not (nil? (re-find #"iPad|iPhone|iPod" js/navigator.userAgent))))