Skip to content

Fix dark mode consistency and set as default theme #148

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.

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

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ const config: Config = {
],

themeConfig: {
// Set dark mode as default and ensure preferences persist
colorMode: {
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: false,
},
image: "img/docusaurus-social-card.jpg",
navbar: {
title: "Recode Hive",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Roadmap/RoadmapCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const RoadmapCard: React.FC<RoadmapCardProps> = ({
<li key={item.text} className="flex items-center mb-2">
<span
className={
item.status === "done" ? "line-through text-gray-500" : ""
item.status === "done" ? "line-through text-gray-500 dark:text-gray-400" : ""
}
>
<Link to={item.link}>{item.text}</Link>
Expand Down
8 changes: 4 additions & 4 deletions src/components/blogCarousel/blogCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const BlogCard = ({
className="absolute top-0 h-full bg-gradient-to-r from-white/30 via-transparent to-white/30 pointer-events-none"
/>

<Card className="max-w-md w-full p-4 h-full border-none rounded-2xl bg-white ">
<Card className="max-w-md w-full p-4 h-full border-none rounded-2xl bg-white dark:bg-gray-800">
<img
src={imageUrl}
alt=""
Expand All @@ -72,13 +72,13 @@ const BlogCard = ({
className="w-full h-48 object-contain rounded-lg"
/>
<CardContent className="p-4 space-y-2">
<div className="text-sm text-gray-500 ">
<div className="text-sm text-gray-500 dark:text-gray-400">
{date}
</div>
<h2 className="text-lg font-semibold text-gray-900 ">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
{title}
</h2>
<div className="text-sm text-gray-700 line-clamp-3">
<div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">
{content}
</div>
</CardContent>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ourProjects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export interface SelectComponentProps {

const OurProjects: React.FC<OurProjectsProps> = ({ OurProjectsData }) => {
return (
<div className="flex flex-col items-center justify-center gap-10 sm:gap-20 py-10 sm:py-20 px-4 min-h-screen bg-gradient-to-b from-gray-50 to-white">
<div className="flex flex-col items-center justify-center gap-10 sm:gap-20 py-10 sm:py-20 px-4 min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
<HeadingComponent
tag={OurProjectsData.tag}
title={OurProjectsData.title}
Expand Down Expand Up @@ -78,7 +78,7 @@ const HeadingComponent: React.FC<HeadingComponentProps> = ({
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-gray-600 text-base sm:text-lg text-justify h-full flex items-center md:pr-10 justify-center leading-relaxed"
className="text-gray-600 dark:text-gray-300 text-base sm:text-lg text-justify h-full flex items-center md:pr-10 justify-center leading-relaxed"
>
{description}
</motion.div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/testimonials/TestimonialCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between"
className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 h-[250px] flex flex-col justify-between"
>
{/* Header with Avatar and Name */}
<div className="flex items-center gap-4">
Expand All @@ -31,16 +31,16 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<div>
<h3 className="font-semibold text-gray-900 text-lg">{name}</h3>
<p className="text-sm text-gray-500">@{username}</p>
<h3 className="font-semibold text-gray-900 dark:text-white text-lg">{name}</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">@{username}</p>
</div>
</div>

{/* Content */}
<p className="text-gray-700 line-clamp-3 my-4 flex-grow">{content}</p>
<p className="text-gray-700 dark:text-gray-300 line-clamp-3 my-4 flex-grow">{content}</p>

{/* Footer with Hashtags and Date */}
<div className="flex items-center justify-between text-sm pt-2 border-t border-gray-100">
<div className="flex items-center justify-between text-sm pt-2 border-t border-gray-100 dark:border-gray-700">
<div className="flex gap-2 flex-wrap">
{content.match(/#\w+/g)?.map((hashtag, index) => (
<span
Expand All @@ -51,7 +51,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
</span>
))}
</div>
<span className="text-gray-400 shrink-0">{date}</span>
<span className="text-gray-400 dark:text-gray-500 shrink-0">{date}</span>
</div>
</motion.div>
);
Expand Down
14 changes: 7 additions & 7 deletions src/components/topmate/TopMateCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="relative w-full max-w-md mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1"
className="relative w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden hover:shadow-3xl transition-all duration-300 transform hover:-translate-y-1"
>
{/* Decorative Arrows */}
<div className="absolute -top-4 -left-4 flex gap-2">
Expand All @@ -44,23 +44,23 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-600">1:1 CALL</span>
<div className="flex items-center gap-1 text-gray-500">
<span className="text-sm font-medium text-gray-600 dark:text-gray-300">1:1 CALL</span>
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<Clock size={16} />
<span className="text-sm">{duration}</span>
</div>
</div>
<button className="text-gray-400 hover:text-gray-600 transition-colors">
<button className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors">
<span className="sr-only">Close</span>
×
</button>
</div>

{/* Title */}
<h2 className="text-2xl font-bold text-gray-900 mb-4">{title}</h2>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{title}</h2>

{/* Description */}
<p className="text-gray-600 mb-6">{description}</p>
<p className="text-gray-600 dark:text-gray-300 mb-6">{description}</p>

{/* Profile Section */}
<div className="flex items-center justify-between">
Expand All @@ -71,7 +71,7 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
className="w-12 h-12 rounded-full object-cover border-2 border-purple-200"
/>
<div className="flex flex-col">
<span className="text-sm text-gray-600">Book a slot at</span>
<span className="text-sm text-gray-600 dark:text-gray-300">Book a slot at</span>
<a
href={`https://topmate.io/${username}`}
target="_blank"
Expand Down
4 changes: 2 additions & 2 deletions src/components/topmate/TopMateSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ const TopMateSection = () => {
<div className="px-4">
<div className=" mx-auto">
<div className=" mx-auto text-center mb-16">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
Book a Session
</h1>
<p className="text-lg text-gray-600">
<p className="text-lg text-gray-600 dark:text-gray-300">
Get personalized guidance and feedback through one-on-one sessions
</p>
</div>
Expand Down
98 changes: 98 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,28 @@
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);

/* Ensure consistent dark background and text colors */
--ifm-background-color: #1b1b1d;
--ifm-background-surface-color: #242526;
--ifm-color-content: #e3e3e3;
--ifm-color-content-secondary: rgba(255, 255, 255, 0.8);
--ifm-font-color-base: #e3e3e3;

/* Navigation and UI elements */
--ifm-navbar-background-color: #242526;
--ifm-footer-background-color: #242526;
--ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
--ifm-menu-color-background-hover: rgba(255, 255, 255, 0.03);

/* Code blocks */
--ifm-code-background: #2d2d30;
--ifm-pre-background: #2d2d30;
--ifm-blockquote-background-color: rgba(255, 255, 255, 0.05);

/* Links and interactive elements */
--ifm-link-color: #4fb3e1;
--ifm-link-hover-color: #25c2a0;
}


Expand Down Expand Up @@ -155,4 +177,80 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

/* Ensure Tailwind dark class is synced with Docusaurus theme */
[data-theme='dark'] {
color-scheme: dark;
}

[data-theme='light'] {
color-scheme: light;
}

/* Additional dark mode consistency fixes */
[data-theme='dark'] .navbar__logo img {
filter: brightness(1.2);
}

[data-theme='dark'] .footer {
--ifm-footer-background-color: var(--ifm-background-surface-color);
}

/* Ensure dropdown menus work well in dark mode */
[data-theme='dark'] .dropdown__menu {
background-color: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-color-emphasis-300);
}

[data-theme='dark'] .dropdown__link:hover {
background-color: var(--ifm-menu-color-background-hover);
}

/* Ensure all text elements have proper dark mode colors */
[data-theme='dark'] {
color: var(--ifm-font-color-base);
}

[data-theme='dark'] p,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] span,
[data-theme='dark'] div {
color: var(--ifm-font-color-base);
}

/* Ensure header content has proper colors in dark mode */
[data-theme='dark'] .chh__header-content p {
color: var(--ifm-color-content-secondary);
}

/* Ensure proper contrast for main content areas */
[data-theme='dark'] main {
background-color: var(--ifm-background-color);
color: var(--ifm-font-color-base);
}

/* Synchronize Tailwind dark mode with Docusaurus theme */
[data-theme='dark'] .dark\:from-gray-900 {
--tw-gradient-from: #111827 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

[data-theme='dark'] .dark\:to-gray-800 {
--tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}

/* Apply dark mode to html when data-theme is dark */
html[data-theme='dark'] {
color-scheme: dark;
}

html[data-theme='light'] {
color-scheme: light;
}
2 changes: 1 addition & 1 deletion src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function Home(): ReactNode {
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
/>
</Head>
<main className="bg-gradient-to-b from-white to-white/50">
<main className="bg-gradient-to-b from-white to-white/50 dark:from-gray-900 dark:to-gray-800">
<div className="m-4">
<Header />
</div>
Expand Down
35 changes: 35 additions & 0 deletions src/theme/Root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,41 @@ import { Analytics } from '@vercel/analytics/react';
export default function Root({children}) {
return (
<>
{/* Script to prevent flash of light theme on initial load */}
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
// Check for stored theme preference, default to dark
const storedTheme = localStorage.getItem('theme');
const theme = storedTheme || 'dark';

// Apply theme immediately to prevent flash
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('dark');
document.body.classList.add('dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
document.documentElement.classList.remove('dark');
document.body.classList.remove('dark');
}

// Store theme if not already stored
if (!storedTheme) {
localStorage.setItem('theme', 'dark');
}
} catch (e) {
// If localStorage fails, default to dark theme
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('dark');
document.body.classList.add('dark');
}
})();
`,
}}
/>
{children}
<Analytics />
</>
Expand Down