Adding new themes per issue #37 #41

2025-10-08T11:23:02-05:00

SluberskiHomeLab commented

2025-10-08 11:23:02 -05:00

(Migrated from github.com)

Added 7 themes and removed 1 to provide more options for users to customize their dashboards.

Removed Theme:

Service Mode

Added Themes:

Service Mode Light
Service Mode Dark
Retro
Matrix
Nuclear
High Contrast Light
High Contrast Dark

Also changed around the way that themes are handled to be more dynamic and reduce duplicate configurations in multiple files.

Added 7 themes and removed 1 to provide more options for users to customize their dashboards. Removed Theme: - Service Mode Added Themes: - Service Mode Light - Service Mode Dark - Retro - Matrix - Nuclear - High Contrast Light - High Contrast Dark Also changed around the way that themes are handled to be more dynamic and reduce duplicate configurations in multiple files.

copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed

2025-10-08 11:23:57 -05:00

copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment

Pull Request Overview

This PR implements a comprehensive theme system refactor for DitDashDot, replacing the previous hardcoded theme handling with a dynamic configuration approach and expanding theme options from 5 to 8 themes.

Centralized all theme configurations into a single themeConfig.js module with helper functions
Added 7 new themes: Service Mode Light/Dark, Retro, Matrix, Nuclear, and High Contrast Light/Dark (removed original Service Mode)
Enhanced visual styling with CSS-based background effects and animations for special themes

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/themes/themeConfig.js	New centralized theme configuration module with all theme definitions and helper functions
src/themes/backgrounds.css	CSS animations and background effects for advanced themes (Matrix, Retro, Nuclear, High Contrast)
src/components/config/ConfigurationPage.js	Updated to use dynamic theme list from configuration instead of hardcoded menu items
src/components/ServiceCard.js	Refactored to use centralized theme styling functions instead of inline conditional logic
src/App.js	Enhanced theme application with support for custom backgrounds, fonts, and CSS classes
public/themes/backgrounds.css	Additional CSS patterns for theme backgrounds with animations

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

## Pull Request Overview This PR implements a comprehensive theme system refactor for DitDashDot, replacing the previous hardcoded theme handling with a dynamic configuration approach and expanding theme options from 5 to 8 themes. - Centralized all theme configurations into a single `themeConfig.js` module with helper functions - Added 7 new themes: Service Mode Light/Dark, Retro, Matrix, Nuclear, and High Contrast Light/Dark (removed original Service Mode) - Enhanced visual styling with CSS-based background effects and animations for special themes ### Reviewed Changes Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments. <details> <summary>Show a summary per file</summary> | File | Description | | ---- | ----------- | | src/themes/themeConfig.js | New centralized theme configuration module with all theme definitions and helper functions | | src/themes/backgrounds.css | CSS animations and background effects for advanced themes (Matrix, Retro, Nuclear, High Contrast) | | src/components/config/ConfigurationPage.js | Updated to use dynamic theme list from configuration instead of hardcoded menu items | | src/components/ServiceCard.js | Refactored to use centralized theme styling functions instead of inline conditional logic | | src/App.js | Enhanced theme application with support for custom backgrounds, fonts, and CSS classes | | public/themes/backgrounds.css | Additional CSS patterns for theme backgrounds with animations | </details> --- <sub>**Tip:** Customize your code reviews with copilot-instructions.md. <a href="/SluberskiHomeLab/ditdashdot/new/main/.github?filename=copilot-instructions.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Create the file</a> or <a href="https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">learn how to get started</a>.</sub>

src/App.js

					
				@ -214,7 +225,15 @@ const Dashboard = () => {

				    );

This nested ternary operator is difficult to read. Consider extracting the background image logic into a separate variable or using a more readable conditional structure.

src/components/ServiceCard.js

The fallback boxShadow value should use the theme's cardShadow property instead of a hardcoded value to maintain consistency with the theme system.

src/themes/themeConfig.js

					
				@ -0,0 +197,4 @@

				    background: theme.backgroundColor,

				    color: theme.color

				  };

				};

The function uses inconsistent property names. The serviceColors objects use 'background' and 'color' properties, while the default return uses 'background' but should match the theme property naming convention which uses 'backgroundColor'.

Sign in to join this conversation.

No reviewers