This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
The following commit(s) were added to refs/heads/main by this push:
new 23adc7346a6 fix:fixed homepage and teams page dark mode issue (#817)
23adc7346a6 is described below
commit 23adc7346a66c49bfbd6501c3941b18c359b3c54
Author: Prakash Kumar <[email protected]>
AuthorDate: Tue Feb 3 19:02:52 2026 +0530
fix:fixed homepage and teams page dark mode issue (#817)
---
src/components/Sections/Components.tsx | 12 ++++++------
src/components/Sections/HomepageHeader.tsx | 9 +++++----
src/components/Sections/UseCases.tsx | 8 ++++----
src/components/Sections/UserFlow.tsx | 2 +-
src/components/Sections/WhyDevlake.tsx | 2 +-
src/components/Team/Committer.tsx | 4 ++--
src/components/Team/Contributor.tsx | 4 ++--
src/components/Team/PPMC.tsx | 2 +-
src/css/custom.css | 2 +-
src/pages/index.js | 6 +++---
src/pages/team/index.js | 6 +++---
tailwind.config.js | 3 +++
12 files changed, 32 insertions(+), 28 deletions(-)
diff --git a/src/components/Sections/Components.tsx
b/src/components/Sections/Components.tsx
index ee661f19a45..785a55fd216 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -10,7 +10,7 @@ export const TextTitle = ({
}) => (
<span
className="block font-inter
- text-heading2 text-primary-800 font-semibold mb-[16px]
+ text-heading2 text-primary-800 dark:text-primary-500 font-semibold
mb-[16px]
sm:text-heading4 sm:mb-2 sm:mt-5"
>
{children}
@@ -20,7 +20,7 @@ export const TextTitle = ({
export const H3Title = ({ children }: { children: React.ReactNode }) => (
<span
className="block font-inter
- text-heading3 text-primary-800 font-semibold mb-[24px]
+ text-heading3 text-primary-800 dark:text-primary-500 font-semibold
mb-[24px]
sm:text-heading4"
>
{children}
@@ -34,7 +34,7 @@ export const TextDescription = ({
}) => (
<div
className="font-inter
- text-label18 text-neutral-500
+ text-label18 text-neutral-500 dark:text-[#e3e3e3]
sm:text-label16 sm:text-start"
>
{children}
@@ -108,7 +108,7 @@ export const InlineLink = ({
export const BreakLine = () => (
<div
className="
- h-[2px] bg-neutral-100
+ h-[2px] bg-neutral-100 dark:bg-neutral-600
"
/>
);
@@ -127,7 +127,7 @@ export const Sup = ({
{children}
<span
className="font-inter text-label14 text-center
- flex h-[24px] text-neutral-500 mt-[4px]
+ flex h-[24px] text-neutral-500 dark:text-[#e3e3e3] mt-[4px]
sm:text-[12px] sm:leading-[12px] sm:mt-1
"
>
@@ -143,4 +143,4 @@ export const SupImg = ({ src }: { src: string }) => (
sm:w-[48px] sm:h-[48px]
"
/>
-);
+);
\ No newline at end of file
diff --git a/src/components/Sections/HomepageHeader.tsx
b/src/components/Sections/HomepageHeader.tsx
index dab3d7c036a..63272e1a899 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -59,7 +59,7 @@ export function HomepageHeader() {
<div
className="
mt-5 mobile:mt-3 sm:mt-3
- text-primary-800
+ text-primary-800
text-label24
sm:text-label16Lake mobile:text-label16Lake
font-inter
@@ -94,7 +94,7 @@ export function HomepageHeader() {
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
- bg-neutral-invert
+ bg-neutral-invert dark:bg-[#242526]
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
@@ -112,7 +112,7 @@ export function HomepageHeader() {
flex
whitespace-nowrap
rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
- bg-neutral-invert
+ bg-neutral-invert dark:bg-[#242526]
text-primary-500
border-2 border-primary-500 border-solid
hover:text-primary-500
@@ -140,10 +140,11 @@ export function HomepageHeader() {
mb-[40px]
items-center
">
- <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%]
mobile:w-[35%] relative"></div>
+ <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%]
mobile:w-[35%] relative"></div>
<span className="
flex-1
w-[81px]
+ dark:text-[#e3e3e3]
">
Trusted by
</span>
diff --git a/src/components/Sections/UseCases.tsx
b/src/components/Sections/UseCases.tsx
index fc048376b10..d0d539f9e73 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -23,12 +23,12 @@ function UCCard({ lead, title, desc, demoURL, children }: {
sm:h-[182px]">
{children}
</div>
- <div className="bg-white px-4 py-2 h-[264px] sm:h-[195px] sm:p-2
mobile:h-[240px]">
- <div className="font-inter text-neutral-300 text-label18 font-medium
mb-2 pr-1
+ <div className="bg-white dark:bg-[#242526] px-4 py-2 h-[264px]
sm:h-[195px] sm:p-2 mobile:h-[240px]">
+ <div className="font-inter text-neutral-300 dark:text-[#e3e3e3]
text-label18 font-medium mb-2 pr-1
sm:text-label16 sm:font-normal sm:mb-[4px]">{lead}</div>
- <div className="font-inter text-primary-800 text-heading2 font-semibold
mb-2 pr-1
+ <div className="font-inter text-primary-500 text-heading2 font-semibold
mb-2 pr-1
sm:text-[20px] sm:leading-[28px] sm:mb-[4px] sm:pr-[0]">{title}</div>
- <div className="font-inter text-neutral-500 text-label18 font-normal pr-1
+ <div className="font-inter text-neutral-500 dark:text-[#e3e3e3]
text-label18 font-normal pr-1
sm:text-label16 sm:pr-[0]">{desc}</div>
<C.TextLink link={demoURL}>{lead === "Data Engineers" ? "Learn More" :
"See it Live"}</C.TextLink>
</div>
diff --git a/src/components/Sections/UserFlow.tsx
b/src/components/Sections/UserFlow.tsx
index 11a596e5a48..708a9590a50 100644
--- a/src/components/Sections/UserFlow.tsx
+++ b/src/components/Sections/UserFlow.tsx
@@ -19,7 +19,7 @@ const Card = ({ icon, text, children }: {
<div className="mt-[40px]">{icon}</div>
<div className="mt-[10px] text-heading4 font-inter font-semibold
text-primary-800">{text}</div>
</div>
- <div className="mt-5 text-label18 font-inter pl-1
text-neutral-500">{children}</div>
+ <div className="mt-5 text-label18 font-inter pl-1 text-neutral-500
dark:text-[#e3e3e3]">{children}</div>
</div>)
const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow
className="xl:w-[3.33vw] xl:max-w-[80px] " /></div>
diff --git a/src/components/Sections/WhyDevlake.tsx
b/src/components/Sections/WhyDevlake.tsx
index 719438e013a..2fbc7c26602 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -99,7 +99,7 @@ function Supports() {
</C.Sup>
</div>
<div
- className="text-label18 font-inter text-neutral-500 mt-6
+ className="text-label18 font-inter text-neutral-500
dark:text-[#e3e3e3] mt-6
sm:text-label16 sm:mt-4"
>
Check out all {" "}
diff --git a/src/components/Team/Committer.tsx
b/src/components/Team/Committer.tsx
index 40ce0bf76aa..1b1cb72642e 100644
--- a/src/components/Team/Committer.tsx
+++ b/src/components/Team/Committer.tsx
@@ -7,13 +7,13 @@ export function Committer() {
return (
<div className="py-[60px] sm:py-5 mobile:py-4">
<h2 className="
- text-primary-800 font-semibold
+ text-primary-500 font-semibold
text-heading1 sm:text-heading3
mb-[16px] sm:mb-[12px] mobile:mb-[12px]
">
Committers
</h2>
- <p className="text-label18 font-normal text-neutral-500 mb-[64px]
sm:mb-[32px] mobile:mb-[24px] ">
+ <p className="text-label18 font-normal text-neutral-500 mb-[64px]
sm:mb-[32px] mobile:mb-[24px] dark:text-[#e3e3e3] ">
Committers contribute to the codebase and documentation, participate
in discussions via the dev mailing list, work on the issue tracker and initiate
many other activities to foster the dynamic and engaging community we all love.
</p>
<div className="
diff --git a/src/components/Team/Contributor.tsx
b/src/components/Team/Contributor.tsx
index d307e6b1ba0..c6d79672dc1 100644
--- a/src/components/Team/Contributor.tsx
+++ b/src/components/Team/Contributor.tsx
@@ -30,14 +30,14 @@ export function Contributor() {
<div className="py-[60px] sm:py-5 mobile:py-4">
<h2
className="
- text-primary-800 font-semibold
+ text-primary-500 font-semibold
text-heading1 sm:text-heading3
mb-[16px] sm:mb-[12px] mobile:mb-[12px]
"
>
Contributors
</h2>
- <p className="text-label18 font-normal text-neutral-500 mb-[64px]
sm:mb-[32px] mobile:mb-[24px] ">
+ <p className="text-label18 font-normal text-neutral-500
dark:text-[#e3e3e3] mb-[64px] sm:mb-[32px] mobile:mb-[24px] ">
New contributors are always welcomed by our community. You will be
awarded with a certificate once your first PRs get merged into the
codebase.
diff --git a/src/components/Team/PPMC.tsx b/src/components/Team/PPMC.tsx
index 28a1cf0bcf0..ae26eb934a4 100644
--- a/src/components/Team/PPMC.tsx
+++ b/src/components/Team/PPMC.tsx
@@ -7,7 +7,7 @@ export function PPMC() {
return (
<div className="py-[60px] sm:py-5 mobile:py-4">
<h2 className="
- text-primary-800 font-semibold
+ text-primary-500 font-semibold
text-heading1 sm:text-heading3
mb-[64px] sm:mb-[32px] mobile:mb-[24px]
">
diff --git a/src/css/custom.css b/src/css/custom.css
index ab5dae3c9b1..20affe5f0ee 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -61,7 +61,7 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
.section-title {
@apply text-heading1 mb-[64px];
- @apply text-primary-800 font-semibold;
+ @apply text-primary-500 font-semibold;
@apply sm:text-heading3;
@apply mobile:mb-4 sm:mt-3 sm:mb-[36px];
}
diff --git a/src/pages/index.js b/src/pages/index.js
index ba8e56a85da..85704ddbb46 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,9 +16,9 @@ export default function Home() {
<Layout
title={`${siteConfig.title}`}
description="Apache DevLake is an open-source dev data platform that
ingests, analyzes, and visualizes the fragmented data from DevOps tools to
distill insights for engineering productivity.">
- <div className='bg-[#f8f8f8]'>
+ <div className='bg-[#f8f8f8] dark:bg-[#1b1b1d]'>
<HeaderLearnMore />
- <div className=' mx-auto bg-white'>
+ <div className='mx-auto bg-white dark:bg-[#242526]'>
<HomepageHeader />
<main className='max-w-[70%] xl:mx-auto
sm:max-w-[90%] mx-auto xl:max-w-[1280px]'>
@@ -32,4 +32,4 @@ export default function Home() {
</div>
</Layout>
);
-}
+}
\ No newline at end of file
diff --git a/src/pages/team/index.js b/src/pages/team/index.js
index 3e8c152d99d..5d95ddc8a62 100644
--- a/src/pages/team/index.js
+++ b/src/pages/team/index.js
@@ -13,8 +13,8 @@ export default function Team() {
<Layout
title={`${siteConfig.title}`}
description="Apache DevLake is an open-source dev data platform that
ingests, analyzes, and visualizes the fragmented data from DevOps tools to
distill insights for engineering productivity.">
- <div className='bg-[#f8f8f8]'>
- <div className='mx-auto bg-white max-w-[100vw] overflow-hidden
relative'>
+ <div className='bg-[#f8f8f8] dark:bg-[#1b1b1d]'>
+ <div className='mx-auto bg-white dark:bg-[#242526] max-w-[100vw]
overflow-hidden relative'>
<TeampageHeaderBG />
<main
className='
@@ -30,4 +30,4 @@ export default function Team() {
</div>
</Layout>
);
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index a22c159234e..00f767e59e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
/** @type {import('tailwindcss').Config} */
let {tailwindConfig} = require('dev-website-tailwind-config');
+
+tailwindConfig.darkMode = ['class', '[data-theme="dark"]'];
+
tailwindConfig.theme.extend.fontSize = {
...tailwindConfig.theme.extend.fontSize,
label40: ['40px', { lineHeight : '56px' }],
