Skip to content

feat: add dark mode support#5

Open
aidandaly24 wants to merge 10 commits intomainfrom
loopy/issue-2
Open

feat: add dark mode support#5
aidandaly24 wants to merge 10 commits intomainfrom
loopy/issue-2

Conversation

@aidandaly24
Copy link
Copy Markdown
Owner

Summary

This PR adds dark mode support to the CLI dashboard as requested in #2.

Changes

New Features

  • Light and Dark Color Palettes: Added LIGHT_PALETTE and DARK_PALETTE with semantic color definitions for status, interactive, text, and border colors
  • ThemeContext: Created a React context for managing theme state throughout the application
  • System Color Scheme Detection: Automatically detects system color scheme preference using environment variables (COLORFGBG, COLOR_SCHEME)
  • Theme Preference Options: Users can configure theme preference as light, dark, or system

Files Modified

  • src/cli/tui/theme.ts - Expanded with light/dark palettes and detection utilities
  • src/cli/tui/context/ThemeContext.tsx - New file for theme context and provider
  • src/cli/tui/context/index.ts - Export new theme context
  • src/cli/tui/App.tsx - Wrapped app with ThemeProvider
  • src/cli/tui/context/__tests__/ThemeContext.test.tsx - Comprehensive tests

Usage

Components can now use the useTheme hook to access theme-aware colors:

import { useTheme } from './context';

function MyComponent() {
  const { colors, mode, setPreference } = useTheme();
  
  return (
    <Box>
      <Text color={colors.text.primary}>Hello</Text>
      <Text color={colors.status.success}>Success!</Text>
    </Box>
  );
}

Backward Compatibility

The existing STATUS_COLORS, INTERACTIVE_COLORS, TEXT_COLORS, and THEME exports are preserved (marked as deprecated) to allow gradual migration of existing components.

Testing

Added comprehensive tests for:

  • ThemeProvider with different initial preferences
  • useTheme hook behavior inside and outside provider
  • System color scheme detection from environment variables
  • Color palette structure validation

Closes #2

- Add light and dark color palettes
- Add system color scheme detection
- Add theme preference types (light/dark/system)
- Maintain backward compatibility with existing color exports
- Create ThemeProvider component for wrapping the app
- Add useTheme hook for accessing theme colors
- Support light/dark/system theme preferences
- Memoize context values for performance
- Add ThemeProvider to App component
- Theme context is now available throughout the app
- Test useTheme hook behavior
- Test theme preference changes
- Test system color scheme detection
- Test color palette structure
- Use ink-testing-library render for component tests
- Test ThemeProvider with different initial preferences
- Test theme utility functions
- Test system color scheme detection
@github-actions github-actions Bot added the size/m PR size: M label Mar 13, 2026
@github-actions github-actions Bot added size/m PR size: M and removed size/m PR size: M labels Mar 13, 2026
@aidandaly24 aidandaly24 changed the title fix: Add dark mode support (#2) feat: add dark mode support Mar 13, 2026
@github-actions github-actions Bot added size/m PR size: M and removed size/m PR size: M labels Mar 13, 2026
@github-actions github-actions Bot added size/m PR size: M and removed size/m PR size: M labels Mar 13, 2026
@github-actions
Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 43.13% 3869 / 8970
🔵 Statements 42.7% 4080 / 9553
🔵 Functions 44.56% 755 / 1694
🔵 Branches 44.98% 2558 / 5686
Generated in workflow #19 for commit 0c26b3d by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size/m PR size: M

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add dark mode support

1 participant