DOC-261 dark theme

gulpfile.js

@@ -91,13 +91,19 @@ const packTask = createTask({
 
 const buildPreviewPagesTask = createTask({
   name: 'preview:build-pages',
-  call: task.buildPreviewPages(srcDir, previewSrcDir, previewDestDir, livereload),
+  call: task.buildPreviewPages(srcDir, previewSrcDir, previewDestDir),
 })
 
 const previewBuildTask = createTask({
   name: 'preview:build',
   desc: 'Process and stage the UI assets and generate pages for the preview',
-  call: parallel(buildTask, buildPreviewPagesTask),
+  call: livereload
+    ? series(parallel(buildTask, buildPreviewPagesTask), (done) => {
+      // still not working without a manual reload trigger
+      livereload()
+      done()
+    })
+    : parallel(buildTask, buildPreviewPagesTask),
 })
 
 const previewServeTask = createTask({

package.json

@@ -10,7 +10,7 @@
     "lint:style": "stylelint \"**/*.css\"",
     "serve": "serve docs",
     "expose": "ngrok http 3000",
-    "dev": "gulp preview"
+    "dev": "LIVERELOAD=true gulp preview"
   },
   "license": "MPL-2.0",
   "repository": {

preview-src/privacy.adoc

@@ -0,0 +1,4 @@
+= Privacy Policy
+:page-layout: privacy
+:!sectids:
+:!toc:

src/css/404.css

@@ -20,7 +20,7 @@
   position: relative;
   flex: 1 100%;
   margin-top: 10px;
-  border: 1px solid var(--neutral-light);
+  border: 1px solid var(--border-color);
   padding: 5%;
   border-radius: var(--border-radius);
 }

src/css/admonition.css

@@ -5,6 +5,7 @@
   border-left-style: solid;
   padding: 15px 10px 15px 20px;
   margin-top: 1rem;
+  color: var(--text-light);
 }
 
 /* to override CSS when admonition is inside a table */

src/css/base.css

@@ -1,7 +1,3 @@
-/* :root { */
-/*  color-scheme: light dark; */
-/* } */
-
 html,
 body {
   height: 100%;
@@ -45,10 +41,6 @@ a:hover {
   text-decoration: underline;
 }
 
-a:active {
-  background-color: transparent;
-}
-
 code,
 kbd,
 pre {

src/css/clipboard.css

@@ -4,7 +4,7 @@ pre.highlightjs {
 }
 
 pre.highlightjs:hover .copy-code-button {
-  background-color: var(--neutral-grey);
+  background-color: var(--code-background);
 }
 
 .copy-code-button {

src/css/doc.css

@@ -216,7 +216,7 @@ strong.beta {
 
 .doc .tableblock thead,
 .doc .tableblock tr:has(p>strong) {
-  background-color: var(--neutral-grey);
+  background-color: light-dark(var(--neutral-grey), var(--neutral-dark));
 }
 
 .doc a[href*="//"]:not([href*="docs.hazelcast.com"])::after,
@@ -228,6 +228,13 @@ strong.beta {
   margin-left: 2px;
 }
 
+head:has(meta[content="dark"]) ~ body .doc a[href*="//"]:not([href*="docs.hazelcast.com"])::after,
+head:has(meta[content="dark"]) ~ body .home .article a[href*="//"]:not([href*="docs.hazelcast.com"])::after,
+head:has(meta[content="dark"]) ~ body .home .additional-cards a[href*="//"]:not([href*="docs.hazelcast.com"])::after,
+head:has(meta[content="dark"]) ~ body .nav-item a[href*="//"]:not([href*="docs.hazelcast.com"])::after {
+  content: url("/_/img/external-link-white.svg");
+}
+
 .doc a[href*="cloud.hazelcast.com"] {
   background: var(--navbar-button-background);
   padding: 0 10px;
@@ -271,6 +278,10 @@ strong.beta {
   font-style: normal;
 }
 
+code {
+  scrollbar-color: var(--accent) transparent;
+}
+
 .doc p code,
 .doc thead code {
   color: var(--code-font-color);

src/css/feedback.css

@@ -9,7 +9,7 @@
 .feedback-prompt {
   width: var(--toc-width);
   font-family: var(--body-font-family);
-  color: var(--nav-muted-color);
+  color: var(--secondary-text);
   display: flex;
   flex-direction: column;
   position: sticky;
@@ -40,13 +40,15 @@
   padding: 0.5rem 0.7rem;
   font-family: var(--heading-font-family);
   font-size: 14px;
-  background-color: var(--info-light);
+  background-color: light-dark(var(--info-light), var(--action-item-background-dark));
+  border: 1px solid light-dark(var(--info-light), var(--neutral-dark));
   border-radius: 10px;
   cursor: pointer;
 }
 
 .feedback-button:hover {
-  background-color: var(--accent5-light);
+  background-color: light-dark(var(--accent5-light), var(--action-item-hover-dark));
+  color: light-dark(var(--text-light), var(--text-dark-accent));
 }
 
 a.feedback-button:hover {
@@ -83,10 +85,18 @@ a.feedback-button:hover {
   margin-top: 0;
 }
 
+.yes-button {
+  color: light-dark(var(--success), var(--neutral-white));
+}
+
 .yes-button:hover .like-img {
   transform: translateY(-3px);
 }
 
+.no-button {
+  color: light-dark(var(--error), var(--neutral-white));
+}
+
 .no-button:hover .like-img {
   transform: translateY(3px);
 }
@@ -101,19 +111,19 @@ a.feedback-button:hover {
   display: block;
   padding-right: 0.5rem;
   font-family: var(--body-font-family);
-  color: var(--nav-muted-color);
+  color: light-dark(var(--secondary-text-light), var(--neutral-white));
 }
 
 .additional-feedback a {
-  color: var(--primary-light);
+  color: var(--accent);
   font-size: calc(14 / var(--rem-base) * 1rem);
 }
 
 .edit-this-page {
   display: block;
   padding-right: 0.5rem;
   font-family: var(--body-font-family);
-  color: var(--nav-muted-color);
+  color: light-dark(var(--secondary-text-light), var(--neutral-white));
 }
 
 .edit-this-page a {
@@ -129,22 +139,42 @@ a.feedback-button:hover {
   background: transparent url("../img/github.svg") center left / contain no-repeat;
 }
 
+head:has(meta[content="dark"]) ~ body .git {
+  background: transparent url("../img/github-white.svg") center left / contain no-repeat;
+}
+
 .git-pull {
   background: transparent url("../img/edit.svg") center left / contain no-repeat;
 }
 
+head:has(meta[content="dark"]) ~ body .git-pull {
+  background: transparent url("../img/edit-white.svg") center left / contain no-repeat;
+}
+
 .command {
   background: transparent url("../img/command.svg") center left / contain no-repeat;
 }
 
+head:has(meta[content="dark"]) ~ body .command {
+  background: transparent url("../img/command-white.svg") center left / contain no-repeat;
+}
+
 .training {
-  background: transparent url("../img/training.png") center left / contain no-repeat;
+  background: transparent url("../img/training.svg") center left / contain no-repeat;
+}
+
+head:has(meta[content="dark"]) ~ body .training {
+  background: transparent url("../img/training-white.svg") center left / contain no-repeat;
 }
 
 .mail {
   background: transparent url("../img/mail.svg") center left / contain no-repeat;
 }
 
+head:has(meta[content="dark"]) ~ body .mail {
+  background: transparent url("../img/mail-white.svg") center left / contain no-repeat;
+}
+
 .feedback-form-submit-container {
   display: none;
 }
@@ -168,7 +198,7 @@ input[name="feedback"] {
   border-radius: 50%;
   width: 16px;
   height: 16px;
-  border: 1px solid var(--neutral-light);
+  border: 1px solid var(--border-color);
   transition: 0.2s border-width linear;
   margin: 0;
   position: relative;

src/css/footer.css

@@ -3,13 +3,13 @@
   justify-content: center;
   align-items: center;
   gap: 2rem;
-  background-color: var(--footer-color);
-  color: var(--footer-font-color);
+  background-color: var(--header-color);
+  color: var(--text-dark);
   font-size: calc(15 / var(--rem-base) * 1rem);
   height: 90px;
 }
 
 .footer a {
-  color: var(--footer-font-color);
+  color: var(--text-dark);
   padding-right: 8px;
 }

src/css/header.css

@@ -25,6 +25,10 @@ body {
   transition: height 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
+.article .header {
+  border-bottom: 1px solid var(--border-color);
+}
+
 .header.shrink {
   height: 60px;
 }
@@ -249,7 +253,7 @@ nav .button.header-button {
 }
 
 nav .button.try-product-button {
-  color: var(--text);
+  color: var(--text-light);
   background-color: var(--accent4);
 }
 
@@ -417,6 +421,8 @@ nav .button.ask-ai-button {
     display: inline;
   }
 
+  /* stylelint-enable selector-class-pattern */
+
   /* Hide desktop nav */
   #desktop-holder,
   nav .mega-menu,
@@ -441,4 +447,32 @@ nav .button.ask-ai-button {
   }
 }
 
-/* stylelint-enable selector-class-pattern */
+.color-theme-switcher {
+  position: relative;
+  height: 28px;
+  width: 36px;
+}
+
+.color-theme-btn {
+  position: absolute;
+  inset: 0;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--neutral-white);
+  transition: background 0.2s ease;
+}
+
+.color-theme-btn:hover {
+  background: var(--action-item-hover-dark);
+}
+
+head:has(meta[content="light"]) ~ body .light-mode-on-btn,
+head:has(meta[content="dark"]) ~ body .dark-mode-on-btn {
+  visibility: hidden;
+  z-index: -1;
+}

src/css/highlight.css

@@ -1,4 +1,3 @@
-/*! Adapted from the GitHub style by Vasily Polovnyov <[email protected]> */
 .hljs-comment,
 .hljs-quote {
   color: #998;
@@ -8,8 +7,8 @@
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
-  color: #333;
-  font-weight: var(--monospace-font-weight-bold);
+  color: light-dark(#333, #f1f1f1);
+  font-weight: var(--code-font-weight-bold);
 }
 
 .hljs-number,
@@ -29,7 +28,7 @@
 .hljs-section,
 .hljs-selector-id {
   color: #900;
-  font-weight: var(--monospace-font-weight-bold);
+  font-weight: var(--code-font-weight-bold);
 }
 
 .hljs-subst {
@@ -38,14 +37,14 @@
 
 .hljs-type,
 .hljs-class .hljs-title {
-  color: #458;
-  font-weight: var(--monospace-font-weight-bold);
+  color: light-dark(#458, #ba7);
+  font-weight: var(--code-font-weight-bold);
 }
 
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: light-dark(#000080, #ffff7f);
   font-weight: normal;
 }
 
@@ -67,7 +66,7 @@
 
 .hljs-meta {
   color: #999;
-  font-weight: var(--monospace-font-weight-bold);
+  font-weight: var(--code-font-weight-bold);
 }
 
 .hljs-deletion {
@@ -83,5 +82,5 @@
 }
 
 .hljs-strong {
-  font-weight: var(--monospace-font-weight-bold);
+  font-weight: var(--code-font-weight-bold);
 }