Summary
openCSE is designed for students who study at all hours, including late-night exam prep sessions. The platform currently has no dark mode support. Extended reading in bright-white UI causes eye strain and is a common reason students prefer other documentation platforms that support dark themes.
Problem
- The current
app/ layout has no theme toggle or dark mode class management.
- Tailwind CSS (used in the project) has first-class dark mode support via
darkMode: 'class' configuration — it just needs to be enabled and wired up.
- There is no
ThemeProvider or CSS variable system managing colors.
- Students' OS-level dark mode preference is not respected (no
prefers-color-scheme handling).
Proposed Solution
1 — Enable Tailwind dark mode:
// tailwind.config.ts
export default {
darkMode: 'class',
// ...
};2 — Add a ThemeProvider using next-themes:
// app/layout.tsx
import { ThemeProvider } from 'next-themes';
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
);
}3 — Add a theme toggle button:
// components/ThemeToggle.tsx
'use client';
import { useTheme } from 'next-themes';
import { Moon, Sun } from 'lucide-react';
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
);
}4 — Update all Tailwind classes to include dark: variants (e.g., bg-white dark:bg-gray-900, text-gray-900 dark:text-gray-100).
Additional Notes
next-themes automatically respects prefers-color-scheme on first load and persists choice in localStorage.- I will update all existing page and layout components with dark mode variants.
I am happy to implement this. Could you assign this issue to me?
Labels: enhancement, ux, accessibility, GSSoC 2026
Summary
openCSE is designed for students who study at all hours, including late-night exam prep sessions. The platform currently has no dark mode support. Extended reading in bright-white UI causes eye strain and is a common reason students prefer other documentation platforms that support dark themes.
Problem
app/layout has no theme toggle or dark mode class management.darkMode: 'class'configuration — it just needs to be enabled and wired up.ThemeProvideror CSS variable system managing colors.prefers-color-schemehandling).Proposed Solution
1 — Enable Tailwind dark mode:
2 — Add a ThemeProvider using
next-themes:3 — Add a theme toggle button:
4 — Update all Tailwind classes to include
dark:variants (e.g.,bg-white dark:bg-gray-900,text-gray-900 dark:text-gray-100).Additional Notes
next-themesautomatically respectsprefers-color-schemeon first load and persists choice inlocalStorage.I am happy to implement this. Could you assign this issue to me?
Labels:
enhancement,ux,accessibility,GSSoC 2026