Skip to content

feat: Add Dark Mode with Theme Toggle#4

Open
plasma-ai[bot] wants to merge 1 commit intomainfrom
Plasma/original-request-hi-add-dark-mode-hello-hvgdiopw-l-d040
Open

feat: Add Dark Mode with Theme Toggle#4
plasma-ai[bot] wants to merge 1 commit intomainfrom
Plasma/original-request-hi-add-dark-mode-hello-hvgdiopw-l-d040

Conversation

@plasma-ai
Copy link

@plasma-ai plasma-ai bot commented Dec 30, 2025

Summary

This PR adds comprehensive dark mode support to the is-cod.in website with a user-friendly theme toggle feature.

Changes Made

  • CSS Custom Properties: Implemented CSS variables for theme-aware styling including colors, backgrounds, borders, and shadows
  • Light & Dark Themes: Created two distinct color schemes with smooth transitions
  • Theme Toggle Button: Added a floating toggle button (fixed position, top-right) with animated moon/sun icons
  • LocalStorage Persistence: Theme preference is saved and persists across browser sessions
  • System Preference Detection: Automatically detects and applies user's OS theme preference (prefers-color-scheme)
  • Responsive Design: Toggle button adapts size for mobile devices
  • Consistent Implementation: Applied to both homepage (index.html) and team page (team/index.html)

Features

  • Defaults to dark mode (existing behavior maintained)
  • Respects system preferences on first visit
  • Manual theme selection overrides system preference
  • Smooth transitions between themes
  • Toggle button with hover effects and rotation animation
  • All UI elements properly themed (containers, borders, text, links, inputs)

Test Plan

  • Verify theme toggle button appears on both pages
  • Confirm clicking toggle switches between light and dark modes
  • Test localStorage persistence (reload page, theme should be remembered)
  • Verify system preference detection works on first load
  • Check all pages maintain consistent theme
  • Test responsive behavior on mobile devices
  • Verify all interactive elements (buttons, inputs, links) work in both themes
  • Confirm smooth transitions between themes

🤖 Generated with Claude Code

@claude
feat: Add dark mode with theme toggle functionality
c064def 
Implemented comprehensive dark mode support across all pages with the following features:

- Created CSS custom properties for theme-aware styling (colors, backgrounds, borders)
- Added light and dark theme color schemes with smooth transitions
- Implemented floating theme toggle button with moon/sun icons
- Added localStorage persistence to remember user theme preference
- Implemented system preference detection (prefers-color-scheme)
- Updated all pages (index.html and team/index.html) with consistent theming
- Made toggle button responsive for mobile devices
- Ensured all interactive elements support both themes

The site now defaults to dark mode but automatically respects user's system preferences and remembers manual selections across sessions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants