🎨 Improve Dark Mode Theme Preview Structure

βœ… Enhanced Dark Mode Preview:
- Restructured dark mode label to match light mode exactly
- Moved onClick handler to label level for better UX
- Removed nested div wrapper for cleaner structure
- Consistent theme-preview-card styling

πŸ”§ Technical Improvements:
- Dark mode preview now has same structure as light mode
- Better click area coverage for theme selection
- Cleaner JSX hierarchy and organization
- Consistent preview card styling across themes

πŸ“‹ Changes Made:
- src/InitialPage/themeSettings.jsx: Restructured dark mode preview
- Moved onClick={DarkThemes} to label element
- Removed unnecessary div wrapper
- Consistent indentation and structure

🎯 Benefits:
- Better visual consistency between light and dark previews
- Improved user interaction with larger click areas
- Cleaner code structure and organization
- Enhanced theme preview experience

πŸš€ Features:
- Both light and dark mode previews now have identical structure
- Consistent theme-preview-card styling
- Better responsive behavior
- Professional preview appearance
This commit is contained in:
tuan.cna 2025-06-02 10:07:52 +07:00
parent c345cffa4f
commit 4ddc23fbfd

View File

@ -351,8 +351,11 @@ const ThemeSettings = () => {
defaultValue="dark_mode" defaultValue="dark_mode"
defaultChecked defaultChecked
/> />
<label htmlFor="dark_mode" className="checktoggles theme-preview-card"> <label
<div onClick={DarkThemes}> htmlFor="dark_mode"
className="checktoggles theme-preview-card"
onClick={DarkThemes}
>
{/* Custom Dark Mode Preview */} {/* Custom Dark Mode Preview */}
<div className="theme-preview dark-preview"> <div className="theme-preview dark-preview">
<div className="preview-header"> <div className="preview-header">
@ -377,8 +380,6 @@ const ThemeSettings = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
<span className="theme-name"> <span className="theme-name">
<Moon size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} /> <Moon size={14} style={{marginRight: '6px', verticalAlign: 'middle'}} />
Dark Mode Dark Mode