[PR #33] [MERGED] Add dark mode support across UI #160

New issue

Closed

opened 2026-02-26 12:40:27 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:27 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/33
Author: @MickLesk
Created: 10/6/2025
Status: ✅ Merged
Merged: 10/6/2025
Merged by: @michelroegl-brunner

Base: main ← Head: development

📝 Commits (2)

d59fd16 Add dark mode support across UI
173aaa8 Improve dark mode initialization and modal UI (#32)

📊 Changes

13 files changed (+678 additions, -296 deletions)

View changed files

➕ src/app/_components/DarkModeProvider.tsx (+83 -0)
➕ src/app/_components/DarkModeToggle.tsx (+66 -0)
📝 src/app/_components/InstalledScriptsTab.tsx (+28 -31)
📝 src/app/_components/ResyncButton.tsx (+5 -5)
📝 src/app/_components/ScriptCard.tsx (+11 -11)
📝 src/app/_components/ScriptDetailModal.tsx (+404 -201)
📝 src/app/_components/ScriptsGrid.tsx (+3 -3)
📝 src/app/_components/ServerForm.tsx (+18 -18)
📝 src/app/_components/SettingsButton.tsx (+1 -1)
📝 src/app/_components/SettingsModal.tsx (+16 -16)
📝 src/app/layout.tsx (+33 -2)
📝 src/app/page.tsx (+8 -8)
📝 src/styles/globals.css (+2 -0)

📄 Description

✍️ Description

Introduces DarkModeProvider and DarkModeToggle components for theme management. Updates all major UI components and pages to support dark mode styling using Tailwind CSS dark variants, improving accessibility and user experience for users preferring dark themes.

Link: #24

✅ Prerequisites (X in brackets)

Self-review completed – Code follows project standards.
Tested thoroughly – Changes work as expected.
No security risks – No hardcoded secrets, unnecessary privilege escalations, or permission issues.

Screenshot for frontend Change

🛠️ Type of Change (X in brackets)

🐞 Bug fix – Resolves an issue without breaking functionality.
✨ New feature – Adds new, non-breaking functionality.
💥 Breaking change – Alters existing functionality in a way that may require updates.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/community-scripts/ProxmoxVE-Local/pull/33 **Author:** [@MickLesk](https://github.com/MickLesk) **Created:** 10/6/2025 **Status:** ✅ Merged **Merged:** 10/6/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `development` --- ### 📝 Commits (2) - [`d59fd16`](https://github.com/community-scripts/ProxmoxVE-Local/commit/d59fd168894c92e4e2505be5557a118eb574a987) Add dark mode support across UI - [`173aaa8`](https://github.com/community-scripts/ProxmoxVE-Local/commit/173aaa81dcf7210cc760b154d56c9b8fcb5068ce) Improve dark mode initialization and modal UI (#32) ### 📊 Changes **13 files changed** (+678 additions, -296 deletions) <details> <summary>View changed files</summary> ➕ `src/app/_components/DarkModeProvider.tsx` (+83 -0) ➕ `src/app/_components/DarkModeToggle.tsx` (+66 -0) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+28 -31) 📝 `src/app/_components/ResyncButton.tsx` (+5 -5) 📝 `src/app/_components/ScriptCard.tsx` (+11 -11) 📝 `src/app/_components/ScriptDetailModal.tsx` (+404 -201) 📝 `src/app/_components/ScriptsGrid.tsx` (+3 -3) 📝 `src/app/_components/ServerForm.tsx` (+18 -18) 📝 `src/app/_components/SettingsButton.tsx` (+1 -1) 📝 `src/app/_components/SettingsModal.tsx` (+16 -16) 📝 `src/app/layout.tsx` (+33 -2) 📝 `src/app/page.tsx` (+8 -8) 📝 `src/styles/globals.css` (+2 -0) </details> ### 📄 Description  ## ✍️ Description Introduces DarkModeProvider and DarkModeToggle components for theme management. Updates all major UI components and pages to support dark mode styling using Tailwind CSS dark variants, improving accessibility and user experience for users preferring dark themes. ## 🔗 Related PR / Issue Link: #24 ## ✅ Prerequisites (**X** in brackets) - [x] **Self-review completed** – Code follows project standards. - [x] **Tested thoroughly** – Changes work as expected. - [x] **No security risks** – No hardcoded secrets, unnecessary privilege escalations, or permission issues. ## Screenshot for frontend Change <img width="1771" height="887" alt="image" src="https://github.com/user-attachments/assets/0b4ebc2c-055a-4917-ac35-e64f96a6971c" /> <img width="902" height="825" alt="image" src="https://github.com/user-attachments/assets/d188a4c1-464e-4392-9f58-48d3ae5b96ca" /> --- ## 🛠️ Type of Change (**X** in brackets) - [ ] 🐞 **Bug fix** – Resolves an issue without breaking functionality. - [x] ✨ **New feature** – Adds new, non-breaking functionality. - [ ] 💥 **Breaking change** – Alters existing functionality in a way that may require updates. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>