Skip to content

fix:fixed homepage and teams page dark mode issue #817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
klesh merged 1 commit into from
Feb 3, 2026
Merged

fix:fixed homepage and teams page dark mode issue #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/Sections/Components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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
"
/>
);
Expand All @@ -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
"
>
Expand All @@ -143,4 +143,4 @@ export const SupImg = ({ src }: { src: string }) => (
sm:w-[48px] sm:h-[48px]
"
/>
);
);
9 changes: 5 additions & 4 deletions src/components/Sections/HomepageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Sections/UseCases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sections/UserFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sections/WhyDevlake.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {" "}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Team/Committer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="
Expand Down
4 changes: 2 additions & 2 deletions src/components/Team/Contributor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/components/Team/PPMC.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
">
Expand Down
2 changes: 1 addition & 1 deletion src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]'>
Expand All @@ -32,4 +32,4 @@ export default function Home() {
</div>
</Layout>
);
}
}
6 changes: 3 additions & 3 deletions src/pages/team/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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='
Expand All @@ -30,4 +30,4 @@ export default function Team() {
</div>
</Layout>
);
}
}
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' }],
Expand Down