Merge pull request #1954 from holly-cummins/reinstate-dark-mode-frame…

…work Reinstate dark mode framework (with dark mode disabled)
quarkusio · Apr 22, 2024 · 07aa4b3 · 07aa4b3
2 parents 0437c2c + 78c902e
commit 07aa4b3
Show file tree

Hide file tree

Showing 35 changed files with 820 additions and 66 deletions.
diff --git a/_includes/about.html b/_includes/about.html
@@ -9,22 +9,34 @@ <h2>Open Source Utterly and Absolutely</h2>
       <h2>What Makes Quarkus Different?</h2>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
+      <picture>
+        <source srcset="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg" media="(prefers-color-scheme:dark)">
+          <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
+      </picture>
       <h3>Developer Joy</h3>
       <p>Developers are critical to the success of almost every organization and they need the tools to build cloud-native applications quickly and efficiently. Quarkus provides a frictionless development experience through a combination of tools, libraries, extensions, and more. Quarkus makes developers more efficient with tools to improve the inner loop development cycle while in dev mode. <br><a href="/developer-joy/">Learn more about Developer Joy</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
+      <picture>
+        <source srcset="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg" media="(prefers-color-scheme:dark)">
+          <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
+      </picture>
       <h3>Kubernetes-native</h3>
       <p>Quarkus was built from the ground up for Kubernetes making it easy to deploy applications without having to understand all of the complexities of the platform. Quarkus allows developers to automatically generate Kubernetes resources including building and deploying container images without having to manually create YAML files. <br><a href="/kubernetes-native/">Learn more about Kubernetes-native</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
+      <picture>
+        <source srcset="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg" media="(prefers-color-scheme:dark)">
+          <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
+      </picture>
       <h3>Best of Breed Libraries and Standards</h3>
       <p>Quarkus provides a cohesive, fun to use, full-stack framework by leveraging a growing list of hundreds of best-of-breed libraries that you love and use. All wired on a standard backbone. <br><a href="/standards/">Learn more about Standards</a></p>
     </div>
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
+      <picture>
+        <source srcset="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg" media="(prefers-color-scheme:dark)">
+          <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
+      </picture>
       <h3>Imperative and reactive code</h3>
       <p>Quarkus is designed to seamlessly combine the familiar imperative style code and the non-blocking, reactive style when developing applications.</p>
       <p>This is helpful for both Java developers who are used to working with the imperative model and don’t want to switch things up, and those working with a cloud-native/reactive approach. The Quarkus development model can adapt itself to whatever app you’re developing. <br><a href="/continuum/">Learn more about Reactive</a></p>

diff --git a/_includes/container-first.html b/_includes/container-first.html
@@ -3,7 +3,10 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <img src="{{site.baseurl}}/assets/images/about/icon-containerfirst.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/about/icon-containerfirst-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/about/icon-containerfirst.svg">
+    </picture>
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">From the outset, Quarkus has been designed around a container-first philosophy. What this means in concrete terms is that Quarkus applications are optimised for low memory usage and fast startup times in the following ways:</p>

diff --git a/_includes/continuum.html b/_includes/continuum.html
@@ -1,7 +1,10 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/about/icon-reactive-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/about/icon-reactive.svg">
+    </picture>
     </div>
     <div class="width-9-12 width-12-12-m">
       <p  class="intropara">For years, the client-server architecture has been the de-facto standard to build applications. But a significant shift happened. The <em>one model rules them all</em> age is over. A new range of applications and architectural styles have emerged and transformed how code is written and how applications are deployed and executed. HTTP microservices, reactive applications, event-driven architecture, and serverless are now central players in modern systems.</p>

diff --git a/_includes/developer-joy.html b/_includes/developer-joy.html
@@ -1,7 +1,10 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
+    </picture>
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">Quarkus is not just about being great for writing Web Applications or Micro-Services. We’re focusing on more than the feature set: we make sure that every feature works well, simply, with little to no configuration, in the most intuitive way possible. It should be trivial to develop simple things, and easy to develop the more complex ones.</p>

diff --git a/_includes/get-started-guides-nextsteps.html b/_includes/get-started-guides-nextsteps.html
@@ -1,4 +1,4 @@
-<div class="full-width-bg white component-slim">
+<div class="full-width-bg component-slim">
   <div class="grid-wrapper click-cards">
     <div class="width-12-12 width-12-12-m">
       <h3 class="mt-0">{{ site.data.getstarted-nextsteps.headline }}</h3>

diff --git a/_includes/insights-band.html b/_includes/insights-band.html
@@ -1,4 +1,4 @@
-<div class="full-width-bg white component awards-band">
+<div class="full-width-bg component awards-band">
   <div class="grid-wrapper">
     <div class="width-12-12">
       <h3 class="mt-0">{{ site.data.insights-videos.sectiontitle }}</h3>

diff --git a/_includes/kubernetes-native.html b/_includes/kubernetes-native.html
@@ -1,7 +1,10 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-    <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/about/icon-kube-native-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/about/icon-kube-native.svg">
+    </picture>
     </div>
     <div class="width-9-12 width-12-12-m">
       <p class="intropara">The combination of Quarkus and Kubernetes provides an ideal environment for creating scalable, fast, and lightweight applications. Quarkus significantly increases developer productivity with tooling, pre-built integrations, application services, and more.

diff --git a/_includes/standards.html b/_includes/standards.html
@@ -1,7 +1,10 @@
 <div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-3-12 width-12-12-m">
-      <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/about/icon-standards-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/about/icon-standards.svg">
+    </picture>
     </div>
     <div class="width-9-12 width-12-12-m">
         <p class="intropara"> We don’t want you to spend hours learning new technologies. Instead, the Quarkus programming model builds on top of proven standards. Be it official standards such as Eclipse MicroProfile or leading frameworks in a specific domain such as Eclipse Vert.x.</p>
@@ -33,7 +36,12 @@ <h3>Quarkus implements the following Specifications:</h3>
 
   <div class="grid-wrapper center">
     <div class="width-3-12 width-12-12-m">
-      <a href="https://microprofile.io"><img src="{{site.baseurl}}/assets/images/about/microprofile.svg"></a>
+      <a href="https://microprofile.io">
+        <picture>
+          <source srcset="{{site.baseurl}}/assets/images/about/microprofile-dark.svg" media="(prefers-color-scheme:dark)">
+            <img src="{{site.baseurl}}/assets/images/about/microprofile.svg">
+          </picture>
+        </a>
     </div>
     <div class="width-9-12 width-12-12-m">
       <a href="https://github.com/eclipse/microprofile-config">MicroProfile Config 3.0</a>

diff --git a/_includes/support-help-band.html b/_includes/support-help-band.html
@@ -3,17 +3,26 @@
     <h3>Getting Help from the Community</h3>
   </div>
   <div class="width-3-12 width-12-12-m help-block">
-    <img src="{{site.baseurl}}/assets/images/support/icon-documentation.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/support/icon-documentation-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/support/icon-documentation.svg">
+    </picture>
     <h4>Documentation</h4>
-    <p>We have a lot of documentation. Be sure to check our <a href="{{site.baseurl}}/get-started/">Getting started page</a>, and all our <a href="{{site.baseurl}}/guides/">guides</a>. Also check out our <a href="{{site.baseurl}}/faq/">FAQ section</a> and <a href="https://www.youtube.com/playlist?list=PLsM3ZE5tGAVbMz1LJqc8L5LpnfxPPKloO">Quarkus Tips Playlist</a></p>.
+    <p>We have a lot of documentation. Be sure to check our <a href="{{site.baseurl}}/get-started/">Getting started page</a>, and all our <a href="{{site.baseurl}}/guides/">guides</a>. Also check out our <a href="{{site.baseurl}}/faq/">FAQ section</a> and <a href="https://www.youtube.com/playlist?list=PLsM3ZE5tGAVbMz1LJqc8L5LpnfxPPKloO">Quarkus Tips Playlist</a>.</p>
   </div>
   <div class="width-3-12 width-12-12-m help-block">
-    <img src="{{site.baseurl}}/assets/images/support/icon-stackoverflow.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/support/icon-stackoverflow-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/support/icon-stackoverflow.svg">
+    </picture>
     <h4>Stack Overflow</h4>
     <p>Ask your questions on <a href="https://stackoverflow.com/questions/tagged/quarkus">Stack Overflow</a>. After the documentation, it’s probably the best place to look for answers. We actively monitor the <a href="https://stackoverflow.com/questions/tagged/quarkus">Quarkus tag</a>.</p>
   </div>
   <div class="width-3-12 width-12-12-m help-block">
-    <img src="{{site.baseurl}}/assets/images/support/icon-discussion.svg">
+    <picture>
+      <source srcset="{{site.baseurl}}/assets/images/support/icon-discussion-dark.svg" media="(prefers-color-scheme:dark)">
+        <img src="{{site.baseurl}}/assets/images/support/icon-discussion.svg">
+    </picture>
     <h4>Discussions and Collaboration</h4>
     <p>Check out our <a href="https://github.com/quarkusio/quarkus/discussions">GitHub Discussions</a> collaboration area to interact with other Quarkus users and developers.</p>
   </div>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -53,7 +53,7 @@ <h1 class="post-title">{{ page.title }}</h1>
         data-mapping="og:title"
         data-reactions-enabled="1"
         data-emit-metadata="0"
-        data-theme="light"
+        data-theme="preferred_color_scheme"
         data-lang="en"
         crossorigin="anonymous"
         async>

diff --git a/_sass/colormode.scss b/_sass/colormode.scss
@@ -0,0 +1,54 @@
+
+html {
+	--link-color: #1259A5;
+	--link-color-hover: #CC0000;
+	--link-color-visited: #AA4494;
+	--main-background-color: #FFFFFF;
+	--main-text-color: #121212;
+	--main-code-color: #943000;
+	--sec-border-color: #aaa;
+	--sec-background-color: #EFEFEF;
+	--title-background-color: #0d1c2c;
+	--breadcrumb-background-color: #4695EB;
+
+	--card-outline: #AAAAAA;
+	--card-background-color: #FFFFFF;
+	--card-background-color-hover: #e4edf7;
+
+}
+
+/* @media (prefers-color-scheme: dark) { */
+@media screen and (max-width: 1px) {
+    html {
+    	--link-color: #9BCAFA;
+		--link-color-hover: #CC0000;
+		--link-color-visited: #AA4494;
+    	--main-background-color: #121212;
+    	--main-text-color: #B5B5B5;
+		--main-code-color: #F59B00;
+    	--sec-background-color: #333333;
+    	--title-background-color: #0e0e0e;
+		--breadcrumb-background-color: #0d1c2c;
+
+   		--card-outline: #555555;
+		--card-background-color: #0f0f0f;
+		--card-background-color-hover: #333333;
+    }
+
+    // code highlighting overrides //
+   .hljs-built_in, .hljs-selector-tag, .hljs-section, .hljs-link, .hljs-function, .hljs-params { color: #6a9fb5 !important;}
+   .hljs-title, .hljs-attr { color: #d28445 !important; }
+   .hljs-string, .hljs-meta, .hljs-name, .hljs-type, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { color: #90a959 !important; }
+   .hljs-comment, .hljs-quote, .hljs-deletion { color: #75b5aa !important; }
+   .hljs-literal, .hljs-number { color: #d28445 !important; }
+
+   // Table overrides //
+   table.tableblock tbody tr:nth-child(even) { background-color: transparent !important; }
+   table.tableblock thead th { background-color: #333333 !important;  }
+
+   // project footer //
+	.project-footer {
+    	background-image: none !important; 
+    	background-color: var(--title-background-color) !important; }
+
+}
diff --git a/_sass/includes/asciidoc-tabs.css b/_sass/includes/asciidoc-tabs.css
@@ -5,25 +5,23 @@
 .asciidoc-tabs-switch {
     border-width: 1px 0 0 1px;
     border-style: solid;
-    border-color: $grey-1;
+    border-color: var(--sec-background-color);
     margin-bottom: -1px;
     display: inline-block;
 }
 
 .asciidoc-tabs-switch--item {
     padding: .75rem 2.5rem;
-    background-color: $light-blue;
-    color: $dark-blue-alt;
+    background-color: var(--main-background-color);
     display: inline-block;
     cursor: pointer;
-    border-right: 1px solid $grey-1;
+    border-right: 1px solid var(--sec-background-color);
 }
 
 .asciidoc-tabs-switch--item.selected {
-    background-color: $white;
-    color: $dark-blue-alt;
+    background-color: var(--sec-background-color);
     font-weight: 600;
-    border-bottom:  1px solid $white;
+    border-bottom:  1px solid var(--sec-background-color);
 }
 
 .asciidoc-tabs-switch ~ .content pre.highlight {

diff --git a/_sass/includes/copycode.css b/_sass/includes/copycode.css
@@ -4,13 +4,13 @@
   font-family: FontAwesome;
   padding: 0rem;
   line-height: .5rem;
-  color: $grey-4 !important;
+  color: var(--main-text-color) !important;
   background-color: transparent !important;
   border: transparent !important;
   cursor: pointer;
 }
 .btn-copy:hover {
-  color: $quarkus-blue !important;
+  color: var(---link-color-hover);
 }
 .btn-copy[float-right] {
   float: right;

diff --git a/_sass/includes/whitecards.scss b/_sass/includes/whitecards.scss
@@ -1,6 +1,6 @@
 .whitecard-outline {
-background-color: $white;
-outline: 1px solid $gray-1;
+background-color: var(--sec-background-color);
+outline: 1px solid var(--card-outline);
 padding: 1rem;
 position: relative;
 height: calc(100% - 2rem);
@@ -24,7 +24,7 @@ grid-column: span 3;
 }
 
 .whitecard {
-background-color: $white;
+background-color: var(--sec-background-color);
 padding: 1rem 1rem 1rem 0rem;
 position: relative;
 height: calc(100% - 2rem);
@@ -77,7 +77,7 @@ grid-column: span 3;
     }
 
     .card {
-      border: 1px solid $gray-1;
+      border: 1px solid var(--card-outline);
       border-radius: 10px;
       padding: 1rem;
       position: relative;
@@ -132,13 +132,13 @@ grid-column: span 3;
       }
 
       &:hover, &:focus {
-        background-color: $light-blue;
-        border:1px solid $light-blue;
+        background-color: var(--card-background-color-hover);
+        border:1px solid var(--card-background-color-hover);
       }
     }
 
     .card-static {
-      border: 1px solid $gray-1;
+      border: 1px solid var(--card-outline);
       border-radius: 10px;
       padding: 1rem;
       position: relative;

diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss
@@ -10,8 +10,8 @@ body.post {
     }
     h1, h2, h3, h4, h5, h6, p, blockquote,
     table tr th, table tr td, li, dt, .title, .paragraph, .footnote, b {
-      color: $dark-blue-alt;
     }
+
     small, strong, em, i {
       color: inherit;
     }
@@ -27,19 +27,21 @@ body.post {
       overflow: auto;
     }
     .post-date {
-      color: $dark-blue-alt;
       text-align: left;
       font-size: 1rem;
     }
     .headshot {
       max-width: 4rem;
       margin-right: 1rem;
     }
-    .line-through{ color: $dark-blue-alt; text-decoration:line-through}
+    .line-through { 
+    text-decoration:line-through;
+    }
 
     .post-title {
       margin: 1.5rem 0;
     }
+
     .tags {
       a {
         display: inline-block;
@@ -82,7 +84,7 @@ body.post {
     &:not(:last-child):after {
       content: "";
       display: block;
-      border-bottom: 2px solid $grey-0;
+      border-bottom: 2px solid var(--card-outline);
       height: 1rem;
       grid-column: 5 / span 4;
       @media screen and (min-width: $breakpoint-m) {