Skip to content

Add Dark-Mode Support for Cost management#1885

Merged
asmasarw merged 1 commit intoredhat-developer:mainfrom
asmasarw:feature/dark-mode
Dec 4, 2025
Merged

Add Dark-Mode Support for Cost management#1885
asmasarw merged 1 commit intoredhat-developer:mainfrom
asmasarw:feature/dark-mode

Conversation

@asmasarw
Copy link
Copy Markdown
Contributor

@asmasarw asmasarw commented Dec 2, 2025

Support Both States:
Dark mode and Light mode.

Dark Mode:

image

Light Mode:

image

@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented Dec 2, 2025

Missing Changesets

The following package(s) are changed by this PR but do not have a changeset:

  • @red-hat-developer-hub/plugin-redhat-resource-optimization

See CONTRIBUTING.md for more information about how to add changesets.

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/plugin-redhat-resource-optimization workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization none v2.0.1

<div
style={{ backgroundColor: '#F2F2F2', padding: 16, borderRadius: 8 }}
style={{
backgroundColor: isDarkMode ? '#262626' : '#F2F2F2',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asmasarw do you think we can make use of https://mui.com/material-ui/customization/palette/ for such changes?

const [showInfrastructureCost, setShowInfrastructureCost] = useState(false);
const [showSupplementaryCost, setShowSupplementaryCost] = useState(false);
const theme = useTheme();
const isDarkMode = (theme.palette as any).mode === 'dark';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asmasarw how about creating a central custom hook which returns the colors required by our plugin rather than checking it every file?

Copy link
Copy Markdown
Contributor

@PreetiW PreetiW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for doing the changes @asmasarw have left few comments please have a look 🙌🏻

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Dec 4, 2025

Copy link
Copy Markdown
Contributor

@PreetiW PreetiW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉

@asmasarw asmasarw merged commit 36cfa13 into redhat-developer:main Dec 4, 2025
9 checks passed
@asmasarw asmasarw deleted the feature/dark-mode branch December 4, 2025 07:15
elai-shalev pushed a commit to elai-shalev/rhdh-plugins that referenced this pull request Jan 21, 2026
elai-shalev pushed a commit to elai-shalev/rhdh-plugins that referenced this pull request Jan 21, 2026
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.

2 participants