Dark mode (#2081)

5 files changed, 105 insertions, 109 deletions

diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg
index 0d8eb3b4..c0388dee 100755
--- a/plugins/base/src/main/resources/dokka/images/arrow_down.svg
+++ b/plugins/base/src/main/resources/dokka/images/arrow_down.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11 9l-6 5.25V3.75z" fill="black"/>
+    <path d="M11 9l-6 5.25V3.75z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
deleted file mode 100644
index 41bda9bf..00000000
--- a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11 9l-6 5.25V3.75z" fill="#fff"/>
-</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
new file mode 100644
index 00000000..2a8d750e
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <path fill="white" fill-rule="evenodd" clip-rule="evenodd"
+          d="M0 9a9 9 0 1018 0A9 9 0 000 9zm16 0a7 7 0 01-7 7V2a7 7 0 017 7z" transform="translate(3, 3)"></path>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
index 05ec7377..ae838d6f 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
@@ -20,8 +20,21 @@ window.addEventListener('load', () => {
     handleAnchor()
     initHidingLeftNavigation()
     topNavbarOffset = document.getElementById('navigation-wrapper')
+    darkModeSwitch()
 })
 
+const darkModeSwitch = () => {
+    const localStorageKey = "dokka-dark-mode"
+    const storage = localStorage.getItem(localStorageKey)
+    const savedDarkMode = storage ? JSON.parse(storage) : false
+    const element = document.getElementById("theme-toggle-button")
+
+    element.addEventListener('click', () => {
+        document.getElementsByTagName("html")[0].classList.toggle("theme-dark")
+        localStorage.setItem(localStorageKey, JSON.stringify(!savedDarkMode))
+    })
+}
+
 const initHidingLeftNavigation = () => {
     document.getElementById("leftToggler").onclick = function(event) {
         //Events need to be prevented from bubbling since they will trigger next handler
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 8530b514..b9d22c3d 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -4,12 +4,19 @@
 
 :root {
     --default-gray: #f4f4f4;
+    --default-font-color: black;
+    --header-font-color: var(--default-font-color);
+
     --breadcrumb-font-color: #637282;
     --breadcrumb-margin: 24px;
     --hover-link-color: #5B5DEF;
+
     --footer-height: 64px;
     --footer-padding-top: 48px;
     --footer-background: var(--default-gray);
+    --footer-font-color: var(--average-color);
+    --footer-go-to-top-color: white;
+
     --horizontal-spacing-for-content: 16px;
     --mobile-horizontal-spacing-for-content: 8px;
     --bottom-spacing: 16px;
@@ -17,16 +24,38 @@
     --color-scrollbar-track: var(--default-gray);
     --default-white: #fff;
     --background-color: var(--default-white);
+    --dark-mode-and-search-icon-color: var(--default-white);
     --color-dark: #27282c;
     --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
-    --default-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+    --default-monospace-font-family: JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
     --default-font-size: 15px;
     --average-color: var(--color-dark);
+    --brief-color: var(--average-color);
     --secondary-text-color: rgba(39, 40, 44, .7);
     --code-background: rgba(39, 40, 44, .05);
     --border-color: rgba(39, 40, 44, .2);
-    --top-navigation-height: 67px;
+    --top-navigation-height: 73px;
     --max-width: 1160px;
+    --white-10: hsla(0,0%,100%,.1);
+
+    --active-tab-border-color: var(--hover-link-color);
+    --inactive-tab-border-color: #DADFE6;
+}
+
+:root.theme-dark {
+    --background-color: #27282c;
+    --color-dark: #3d3d41;
+    --default-font-color: hsla(0,0%,100%,0.8);
+    --border-color: hsla(0,0%,100%,0.2);
+    --code-background: hsla(0,0%,100%,0.05);
+    --breadcrumb-font-color: #8c8c8e;
+    --brief-color: hsla(0,0%,100%,0.4);
+
+    --active-tab-border-color: var(--default-font-color);
+    --inactive-tab-border-color: var(--border-color);
+    --footer-background: hsla(0,0%,100%,0.05);
+    --footer-font-color: hsla(0,0%,100%,0.6);
+    --footer-go-to-top-color: var(--footer-font-color);
 }
 
 html {
@@ -36,6 +65,7 @@ html {
     scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
+    color: var(--default-font-color);
 }
 
 html ::-webkit-scrollbar {
@@ -79,6 +109,7 @@ html ::-webkit-scrollbar-thumb {
     color: #fff;
     font-family: var(--default-font-family);
     letter-spacing: -0.1px;
+    align-items: center;
 
     /* Reset margin and use padding for border */
     margin-left: 0;
@@ -97,6 +128,11 @@ html ::-webkit-scrollbar-thumb {
 
 #searchBar {
     margin-left: 16px;
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
 }
 
 .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
@@ -113,7 +149,7 @@ html ::-webkit-scrollbar-thumb {
 .section-tab {
     border: 0;
     background-color: transparent;
-    border-bottom: 1px solid #DADFE6;
+    border-bottom: 1px solid var(--inactive-tab-border-color);
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -126,21 +162,15 @@ html ::-webkit-scrollbar-thumb {
     cursor: pointer;
     outline: none;
     font-size: var(--default-font-size);
-    color: var(--average-color);
+    color: inherit;
 }
 
 .section-tab:hover {
-    color: #282E34;
-    border-bottom: 2px solid var(--hover-link-color);
+    border-bottom: 2px solid var(--active-tab-border-color);
 }
 
 .section-tab[data-active=''] {
-    color: #282E34;
-    border-bottom: 2px solid var(--hover-link-color);
-}
-
-.tabs-section-body {
-    background-color: white;
+    border-bottom: 2px solid var(--active-tab-border-color);
 }
 
 .tabs-section-body > div {
@@ -382,14 +412,14 @@ code.paragraph {
 .sideMenuPart a {
     display: block;
     align-items: center;
-    color: var(--average-color);
+    color: var(--default-font-color);
     overflow: hidden;
 }
 
 
 .sideMenuPart a:hover {
     text-decoration: none;
-    color: var(--average-color);
+    color: var(--default-font-color);
 }
 
 .sideMenuPart > .overview:before {
@@ -421,18 +451,25 @@ code.paragraph {
 }
 
 .sideMenuPart > .overview .navButtonContent::before {
-    content: url("../images/arrow_down.svg");
+    content: '';
+
+    -webkit-mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
+    mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: var(--default-font-color);
+
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     transform: rotate(90deg);
-    width: 12px;
-    height: 12px;
+    width: 16px;
+    height: 16px;
 }
 
 .sideMenuPart[data-active] > .overview .navButtonContent::before {
-    content: url("../images/arrow_down_white.svg");;
+    background-color: var(--default-white);
 }
 
 .sideMenuPart.hidden > .navButton .navButtonContent::after {
@@ -460,7 +497,6 @@ body, table {
 table {
     width: 100%;
     border-collapse: collapse;
-    background-color: #ffffff;
     padding: 5px;
 }
 
@@ -472,34 +508,16 @@ td:first-child {
     width: 20vw;
 }
 
-.keyword {
-    color: black;
-    font-family: var(--default-monospace-font-family);
-    font-size: 12px;
-}
-
-.identifier {
-    color: darkblue;
-    font-size: 12px;
-    font-family: var(--default-monospace-font-family);
-}
-
 .brief {
     white-space: pre-wrap;
     overflow: hidden;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    color: #222;
-    font-weight: bold;
-}
-
 p, ul, ol, table, pre, dl {
     margin: 0;
 }
 
 h1 {
-    font-weight: bold;
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
@@ -516,7 +534,6 @@ h1.cover {
 }
 
 h2 {
-    color: #393939;
     font-size: 31px;
     line-height: 40px;
     letter-spacing: -0.5px;
@@ -528,14 +545,6 @@ h3 {
     letter-spacing: -0.2px;
 }
 
-h4 {
-    margin: 0;
-}
-
-h3, h4, h5, h6 {
-    color: #494949;
-}
-
 .UnderCoverText {
     font-size: 16px;
     line-height: 28px;
@@ -573,16 +582,10 @@ a {
 
 a small {
     font-size: 11px;
-    color: #555;
     margin-top: -0.6em;
     display: block;
 }
 
-.wrapper {
-    width: 860px;
-    margin: 0 auto;
-}
-
 blockquote {
     border-left: 1px solid #e5e5e5;
     margin: 0;
@@ -590,11 +593,6 @@ blockquote {
     font-style: italic;
 }
 
-code, pre {
-    color: #333;
-    font-size: var(--default-font-size);
-}
-
 pre {
     display: block;
     overflow-x: auto;
@@ -611,10 +609,6 @@ dt {
     font-weight: 700;
 }
 
-th {
-    color: #444;
-}
-
 p.paragraph img {
     display: block;
 }
@@ -623,11 +617,6 @@ img {
     max-width: 100%;
 }
 
-strong {
-    color: #222;
-    font-weight: 700;
-}
-
 small {
     font-size: 11px;
 }
@@ -691,9 +680,10 @@ small {
     display: flex;
     flex-direction: row;
     align-self: flex-end;
-    min-height: 30px;
+    min-height: 36px;
     z-index: 0;
     flex-wrap: wrap;
+    align-items: center;
 }
 
 .platform-selector:hover {
@@ -854,14 +844,12 @@ td.content {
 }
 
 .cover .with-platform-tabs {
-    background-color: white;
     font-size: var(--default-font-size);
 }
 
 .cover > .with-platform-tabs > .content {
-    background-color: var(--background-color);
     padding: 8px 16px;
-    border: 1px solid rgba(39, 40, 44, 0.20);
+    border: 1px solid var(--border-color);
 }
 
 .cover > .block {
@@ -877,7 +865,6 @@ td.content {
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
     padding: 8px;
-    background-color: var(--background-color);
 }
 
 .sideMenuPart[data-active] > .overview:before {
@@ -898,6 +885,7 @@ td.content {
     flex-direction: column;
     border-bottom: 1px solid var(--border-color);
     padding: 11px 0 12px 0;
+    background-color: var(--background-color);
 }
 
 .table-row:last-of-type {
@@ -905,7 +893,7 @@ td.content {
 }
 
 .table-row .brief-comment {
-    color: var(--average-color);
+    color: var(--brief-color);
 }
 
 .platform-dependent-row {
@@ -968,37 +956,6 @@ td.content {
     }
 }
 
-@media print, screen and (max-width: 720px) {
-    body {
-        word-wrap: break-word;
-    }
-
-    header {
-        padding: 0;
-    }
-
-    header ul, header p.view {
-        position: static;
-    }
-
-    pre, code {
-        word-wrap: normal;
-    }
-}
-
-@media print, screen and (max-width: 480px) {
-    header ul {
-        display: none;
-    }
-}
-
-@media print {
-    body {
-        padding: 0.4in;
-        font-size: 12pt;
-        color: #444;
-    }
-}
 
 .footer {
     clear: both;
@@ -1009,7 +966,7 @@ td.content {
     font-size: 12px;
     line-height: 16px;
     letter-spacing: 0.2px;
-    color: var(--average-color);
+    color: var(--footer-font-color);
     margin-top: auto;
     background-color: var(--footer-background);
 }
@@ -1017,7 +974,7 @@ td.content {
 .footer span.go-to-top-icon {
     border-radius: 2em;
     padding: 11px 10px !important;
-    background-color: white;
+    background-color: var(--footer-go-to-top-color);
 }
 
 .footer span.go-to-top-icon > a::before {
@@ -1079,6 +1036,27 @@ div.runnablesample {
     display: flex;
 }
 
+#theme-toggle {
+    content: url("../images/theme-toggle.svg");
+}
+
+#theme-toggle-button {
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 24px;
+    margin-left: 16px;
+    background-color: inherit;
+    border: none;
+    cursor: pointer;
+}
+
+#theme-toggle-button:hover {
+    background: var(--white-10);
+}
+
 @media screen and (max-width: 1119px) {
     h1.cover {
         font-size: 48px;
@@ -1155,4 +1133,8 @@ div.runnablesample {
         font-size: 32px;
         line-height: 32px;
     }
+
+    #theme-toggle-button {
+        display: none;
+    }
 }