feat: Set dark mode as default theme - #2
Open
shrwnsan wants to merge 1 commit into
Open
Conversation
This commit updates the CSS variables in `index.html` to set a dark theme as the default for the application. The following changes were made: - `--background` changed to `#1a1a1a` - `--surface` changed to `#2a2a2a` - `--text-primary` changed to `#f0f0f0` - `--text-secondary` changed to `#a0a0a0` - `--border` changed to `#3a3a3a` - `--primary-color` adjusted to `#3b82f6` - `--primary-hover` adjusted to `#2563eb` - `--success-color` adjusted to `#22c55e` - `--error-color` adjusted to `#ef4444` - `--warning-color` adjusted to `#f59e0b` - `--shadow` updated for a subtle glow effect on dark backgrounds. These changes provide a visually appealing and accessible dark mode experience by default.
There was a problem hiding this comment.
Pull Request Overview
This PR changes the default theme from light mode to dark mode by updating CSS variable values in the root HTML file. The change provides a dark background with adjusted colors for better contrast and accessibility in dark environments.
- Updates all color CSS variables to implement dark theme values
- Adjusts primary, success, error, and warning colors for better dark mode contrast
- Modifies shadow styling to use a subtle glow effect suitable for dark backgrounds
| --border: #3a3a3a; | ||
| --border-radius: 8px; | ||
| --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | ||
| --shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.05), 0 3px 10px 0 rgba(255, 255, 255, 0.05); /* Subtle glow for dark theme */ |
There was a problem hiding this comment.
The white glow shadow effect may not provide sufficient visual separation on dark backgrounds. Consider using a darker shadow with higher opacity (e.g., rgba(0, 0, 0, 0.3)) or a combination of both dark and light shadows for better depth perception.
Suggested change
| --shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.05), 0 3px 10px 0 rgba(255, 255, 255, 0.05); /* Subtle glow for dark theme */ | |
| --shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(255, 255, 255, 0.05), 0 3px 10px 0 rgba(255, 255, 255, 0.05); /* Improved depth: dark + subtle white glow */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📋 Pull Request Description
🎯 What does this PR do?
This commit updates the CSS variables in
index.htmlto set a dark theme as the default for the application.The following changes were made:
--backgroundchanged to#1a1a1a--surfacechanged to#2a2a2a--text-primarychanged to#f0f0f0--text-secondarychanged to#a0a0a0--borderchanged to#3a3a3a--primary-coloradjusted to#3b82f6--primary-hoveradjusted to#2563eb--success-coloradjusted to#22c55e--error-coloradjusted to#ef4444--warning-coloradjusted to#f59e0b--shadowupdated for a subtle glow effect on dark backgrounds.These changes provide a visually appealing and accessible dark mode experience by default.
🔗 Related Issues
Fixes #(issue number)
🧪 Testing
📝 Type of Change
🔒 Security Checklist
📸 Screenshots (if applicable)
Add screenshots of UI changes here.
🚀 Performance Impact
📱 Browser Testing
📝 Additional Notes
Any additional information or context about this PR.