Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode key creation bug #2823

Open
3 tasks done
ogzhanolguncu opened this issue Jan 17, 2025 · 6 comments
Open
3 tasks done

Dark mode key creation bug #2823

ogzhanolguncu opened this issue Jan 17, 2025 · 6 comments
Labels
Bug Something isn't working Good first issue Good for newcomers

Comments

@ogzhanolguncu
Copy link
Contributor

Preliminary Checks

Reproduction / Replay Link (Optional)

No response

Issue Summary

When creating a new key toggle buttons look total black in dark mode.

Steps to Reproduce

  1. Create a new API
  2. Then head over here https://app.unkey.com/apis/YOUR_NEWLY_CREATED_API_KEY/keys/xxxxx/new
  3. Switch to dark mode
  4. See that toggle buttons look completely black on dark mode. See the screenshot below

Expected behavior

They should use appropriate colors depending on the system or selected color theme.

Other information

We are migrating to a new color scheme. Check internal/ui package to see new colors like accent-5, gray-7

Screenshots

Image

Image

Version info

- OS: MacOS
- Node: 22.9
- npm: 10.8.3
@ogzhanolguncu ogzhanolguncu added Bug Something isn't working Good first issue Good for newcomers Needs Approval Needs approval from Unkey labels Jan 17, 2025
Copy link

linear bot commented Jan 17, 2025

@chronark chronark removed the Needs Approval Needs approval from Unkey label Jan 21, 2025
@harshsbhat
Copy link
Contributor

Should we just make it a bit lighter? @ogzhanolguncu

@vinodpr1
Copy link

can you assign me @ogzhanolguncu

@harshsbhat
Copy link
Contributor

@codervinod123 @ogzhanolguncu I don't get it. Do we need to change the entire shadcn UI for switch? Because this problem is everywhere and not just create keys.

@ogzhanolguncu
Copy link
Contributor Author

I haven't checked the issue thoroughly, but you are probably right. We are migrating to a new design in 2025 as quickly as possible, which means we'll rewrite this component soon.

I think as a simple fix, we can replace the colors with our new color scheme such as 'gray-3', 'gray-4', or 'accent-4', whichever is appropriate. @codervinod123 @harshsbhat, either of you can tackle this issue whenever you have time.

@spcx86
Copy link
Contributor

spcx86 commented Feb 16, 2025

hi @ogzhanolguncu i don't believe we need to change the base components for this. just needed to use the appropriate color based on the state of the switch. i have gone ahead and created a PR for the same. can you please review?

#2899

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants