Add dark mode support (#281)

Author: AryanVBW

docusaurus.config.js

@@ -67,7 +67,8 @@ const config = {
     ({
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: true,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
       navbar: {
         title: 'Apache Kvrocks',

src/components/HomepageFeatures/index.tsx

@@ -52,7 +52,7 @@ function Feature({imgPath,title, description}: FeatureItem) {
     <div className={clsx('col col--6')}>
       <div className="text--center padding-horiz--md" style={{width:"100%",height:"100%",margin:'30px 0px'}}>
         <img className={styles.imgItem} src={imgPath} alt={title}/>
-        <h3>{title}</h3>
+        <h3 className={styles.featureTitle}>{title}</h3>
         <div className={styles.itemDes}>
           <p>{description}</p>
         </div>

src/components/HomepageFeatures/styles.module.css

@@ -50,6 +50,10 @@
   color:rgba(59, 61, 63, 1)
 }
 
+[data-theme='dark'] .blueLine + p {
+  color:rgba(220, 220, 220, 1);
+}
+
 .redisCompatible{
   display:flex;
   flex-direction:row;
@@ -113,10 +117,22 @@
   color:rgba(59, 61, 63, 1);
 }
 
+[data-theme='dark'] .itemDes {
+  color:rgba(220, 220, 220, 1);
+}
+
 .itemDes p{
   width: 50%;
 }
 
+.featureTitle {
+  color: #333333;
+}
+
+[data-theme='dark'] .featureTitle {
+  color: #ffffff;
+}
+
 .container{
   margin-left:5%;
   width:90%;

src/css/custom.css

@@ -7,9 +7,34 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #3071a9;
+  --ifm-color-primary-dark: #2b6698;
+  --ifm-color-primary-darker: #295f90;
+  --ifm-color-primary-darkest: #224e76;
+  --ifm-color-primary-light: #357cba;
+  --ifm-color-primary-lighter: #3782c2;
+  --ifm-color-primary-lightest: #4e93cd;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-footer-background-color:rgba(115, 150, 233, 0.61);
+  --ifm-footer-background-color: rgba(115, 150, 233, 0.61);
+  --ifm-background-color: #ffffff;
+  --ifm-navbar-background-color: #ffffff;
+}
+
+/* Dark mode overrides */
+[data-theme='dark'] {
+  --ifm-color-primary: #4e93cd;
+  --ifm-color-primary-dark: #3585c6;
+  --ifm-color-primary-darker: #2f7ebd;
+  --ifm-color-primary-darkest: #27689c;
+  --ifm-color-primary-light: #67a1d4;
+  --ifm-color-primary-lighter: #74a9d8;
+  --ifm-color-primary-lightest: #99c0e2;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-background-color: #1e2125;
+  --ifm-navbar-background-color: #1e2125;
+  --ifm-footer-background-color: rgba(48, 56, 70, 0.8);
+  --ifm-heading-color: #ffffff;
+  --ifm-font-color-base: #e3e3e3;
 }
 
 .docusaurus-highlight-code-line {

src/pages/index.module.css

@@ -13,6 +13,10 @@
   flex-direction: column;
 }
 
+[data-theme='dark'] .heroBanner {
+  background-image:linear-gradient(to top, rgba(30, 40, 60, 1) , rgba(40, 50, 70, 1));
+}
+
 .container{
   width:100%;
   height:100%;
@@ -25,6 +29,15 @@
   width: 40%;
 }
 
+/* To make sure the hero title is seen in light mode, add certain styling */
+.titles h1 {
+  color: #333333;
+}
+
+[data-theme='dark'] .titles h1 {
+  color: #ffffff;
+}
+
 .image{
   width: 40%;
 }
@@ -36,6 +49,10 @@
   width:80%;
 }
 
+[data-theme='dark'] .tagline {
+  color:rgba(220, 220, 220, 1);
+}
+
 @media screen and (max-width: 950px) {
   .tagline {
     font-size:16px;
@@ -84,12 +101,26 @@
   border:1px solid rgba(0, 91, 244, 1);
 }
 
+[data-theme='dark'] .buttons a {
+  background-color:rgba(50, 60, 80, 1);
+  color:rgba(100, 160, 255, 1);
+  border:1px solid rgba(100, 160, 255, 1);
+  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.3);
+}
+
 .buttons a:first-child {
   background-color:rgba(40, 117, 243, 1);
   box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.16);
   color:white
 }
 
+[data-theme='dark'] .buttons a:first-child {
+  background-color:rgba(60, 130, 240, 1);
+  box-shadow:0pt 5pt 6pt 1pt rgba(0, 0, 0, 0.3);
+  color:white;
+  border:1px solid rgba(60, 130, 240, 1);
+}
+
 @media screen and (max-width:820px){
   .container{
     flex-direction: column;

src/pages/index.tsx

@@ -12,7 +12,7 @@ function HomepageHeader() {
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
         <div className={clsx(styles.container)}>
           <div className={clsx(styles.titles)}>
-            <h1 className="hero__title" style={{color:'black'}}>{siteConfig.title}</h1>
+            <h1 className="hero__title">{siteConfig.title}</h1>
             <div className={clsx('hero__subtitle',styles.tagline)}>{siteConfig.tagline}</div>
           </div>
           <div className={clsx(styles.image)}>

tsconfig.json

@@ -2,6 +2,8 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "module": "Node16",
+    "moduleResolution": "Node16"
   }
 }