feat: added darkTheme prop for dark mode support

[roshidhmohammed]

Adds built-in dark theme support to DatePicker components using the darkTheme prop.

• When darkTheme={true}, the DatePicker renders with dark theme styles
• When darkTheme={false} or not provided, defaults to existing light theme (ensures backward compatibility)
• Applies to all DatePicker subcomponents (time, day, month, year, etc.)
• No changes required to existing implementations
• Enables easy theme switching without modifying styles
• Default behaviour remains unchanged (no breaking changes)
• Provides optional dark theme support across the entire DatePicker UI

---

name: Pull Request
about: Create a pull request to improve this repository
title: "new feature: added dark theme support via darkTheme prop"
labels: ""
assignees: ""

Description

This PR introduces a new darkTheme prop to the DatePicker component, enabling built-in dark mode support across all DatePicker UI elements.

Problem

Currently, developers need to manually override styles to implement dark mode.
This feature provides a simple, built-in way to enable dark theme support, improving developer experience and usability in low-light environments.

Changes

• Support for dark theme via darkTheme prop
• Consistent dark styling across all DatePicker subcomponents (time, day, month, year, etc.)
• doc-site: Added an example component for the new prop
• src/apply_dark_theme.tsx: Added function to apply theme when the darkTheme prop changes
• src/index.tsx: Added darkTheme prop and invoked applyDarkTheme when the prop changes
• src/test/apply_dark_theme.test.tsx: Added test cases for the new prop
• src/stylesheets/datepicker.scss: Refactored existing color styles into SCSS variables and applied theming
• src/stylesheets/variables.scss: Added new SCSS variables for dynamic color theming

Behaviour

• darkTheme={true} → Renders the DatePicker with dark theme styles
• darkTheme={false} or not provided → Defaults to existing light theme

Backward Compatibility

• No breaking changes introduced
• Existing implementations remain unaffected
• Light theme continues as the default behaviour

Testing

• Verified that dark theme applies correctly across all DatePicker components
• Confirmed that existing light theme behaviour remains unchanged

Screenshots

• Dark Theme:

• Light Theme:

To Reviewers

• While reviewing datepicker.scss, some previously committed color values have been refactored into SCSS variables and moved to variables.scss for better maintainability and theming support.
• Please pay special attention to styling changes and ensure no visual regressions are introduced.

Contribution Checklist

• Feature implemented
• No breaking changes
• Backward compatibility ensured
• Code follows project conventions
• Example documentation updated
• Tests added
• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.