This is an automated email from the ASF dual-hosted git repository.
twice pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/kvrocks-website.git
The following commit(s) were added to refs/heads/main by this push:
new fe2b14d3 Add dark mode support (#281)
fe2b14d3 is described below
commit fe2b14d3f1f23704423ccf3c03481ca811feab16
Author: Vivek W <[email protected]>
AuthorDate: Wed Mar 12 19:51:45 2025 +0530
Add dark mode support (#281)
---
docusaurus.config.js | 3 ++-
src/components/HomepageFeatures/index.tsx | 2 +-
src/components/HomepageFeatures/styles.module.css | 16 ++++++++++++
src/css/custom.css | 27 +++++++++++++++++++-
src/pages/index.module.css | 31 +++++++++++++++++++++++
src/pages/index.tsx | 2 +-
tsconfig.json | 4 ++-
7 files changed, 80 insertions(+), 5 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 3c51eef0..b3768ab0 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -67,7 +67,8 @@ const config = {
({
colorMode: {
defaultMode: 'light',
- disableSwitch: true,
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
},
navbar: {
title: 'Apache Kvrocks',
diff --git a/src/components/HomepageFeatures/index.tsx
b/src/components/HomepageFeatures/index.tsx
index ffdfa024..5ebc095d 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/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>
diff --git a/src/components/HomepageFeatures/styles.module.css
b/src/components/HomepageFeatures/styles.module.css
index 7be61ad0..bba848e3 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/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%;
diff --git a/src/css/custom.css b/src/css/custom.css
index 0d54b9e5..efc833c7 100644
--- a/src/css/custom.css
+++ b/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 {
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 12f73294..115b9a0c 100644
--- a/src/pages/index.module.css
+++ b/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;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d09d69cd..f8808f1d 100644
--- a/src/pages/index.tsx
+++ b/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)}>
diff --git a/tsconfig.json b/tsconfig.json
index 6f475698..7b616dd5 100644
--- a/tsconfig.json
+++ b/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"
}
}
