Skip to content

feat: Implement dark mode theme toggle and persist user preference#42

Open
jogabyte wants to merge 1 commit intoglebkudr:mainfrom
jogabyte:feature/dark-theme
Open

feat: Implement dark mode theme toggle and persist user preference#42
jogabyte wants to merge 1 commit intoglebkudr:mainfrom
jogabyte:feature/dark-theme

Conversation

@jogabyte
Copy link

Summary
Implemented a dark theme for the shotgun_code application to improve user experience, especially in low-light environments.

Details & Considerations

All core UI components and Vue pages have been updated: colors, backgrounds, text, menus, dialogs, and toolbar elements.
Added a toggle between light and dark modes in user settings, with preference persisted via localStorage.
Updated custom CSS and replaced hard-coded color values to support dark mode.
Tested the new theme for contrast, accessibility, and readability.
Utilized Tailwind CSS dark mode features for efficient theme management.
Documented differences, limitations, and technical details.
References

Followed best practices from Tailwind CSS and Vue.
Related issues/PRs: #41

- Added theme toggle button in LlmSettingsModal.vue to switch between light and dark modes.
- Enhanced UI components across the application to support dark mode styling.
- Introduced theme management functions in main.js to handle theme application and persistence in localStorage.
- Updated tailwind.config.js to enable dark mode support via class.
- Added EventsOffAll function in runtime.js for improved event management.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant