[Feedback]: Darker Purple theme

[mgramelich]

What problem are you trying to solve?

The current purple theme can be difficult to distinguish in some situations, particularly for users with color vision deficiencies (color blindness). The contrast and visibility could be improved.

What would improve it?

Using a darker shade of purple would provide better contrast and improve overall visibility and accessibility, especially for users with color vision deficiencies.

What do you do today?

No response

Product area

None

[mgramelich]

Suggestion:

/* Purple Dark */
[data-theme="purple-dark"] {
--background: 260 30% 10%;
--foreground: 260 15% 92%;
--card: 260 28% 11%;
--card-foreground: 260 15% 92%;
--primary: 270 60% 55%;
--primary-foreground: 0 0% 100%;
--secondary: 260 20% 16%;
--secondary-foreground: 260 15% 88%;
--muted: 260 20% 14%;
--muted-foreground: 260 10% 65%;
--accent: 270 50% 15%;
--accent-foreground: 260 15% 95%;
--border: 260 20% 18%;
--ring: 270 60% 55%;
--sidebar: 260 30% 8%;
--sidebar-foreground: 260 15% 92%;
--sidebar-muted: 260 20% 12%;
--sidebar-border: 260 20% 15%;
--navigation-accent: 270 60% 55%;
--selection: 270 60% 55%;
--warning: 210 90% 60%;
--warning-foreground: 0 0% 100%;
--info: 210 90% 60%;
--info-foreground: 0 0% 100%;
}

[data-theme="purple-dark"] .text-warning,
[data-theme="purple-dark"] .text-amber-500,
[data-theme="purple-dark"] .text-yellow-500,
[data-theme="purple-dark"] .text-yellow-400,
[data-theme="purple-dark"] [class*="text-yellow"],
[data-theme="purple-dark"] [class*="text-amber"],
[data-theme="purple-dark"] [class*="text-warn"] {
color: hsl(210 90% 60%) !important;
}
[data-theme="purple-dark"] .bg-warning,
[data-theme="purple-dark"] .bg-amber-500,
[data-theme="purple-dark"] .bg-yellow-500,
[data-theme="purple-dark"] [class*="bg-yellow"],
[data-theme="purple-dark"] [class*="bg-amber"],
[data-theme="purple-dark"] [class*="bg-warn"] {
background-color: hsl(210 90% 60%) !important;
}
[data-theme="purple-dark"] .border-warning,
[data-theme="purple-dark"] .border-amber-500,
[data-theme="purple-dark"] .border-yellow-500,
[data-theme="purple-dark"] [class*="border-yellow"],
[data-theme="purple-dark"] [class*="border-amber"] {
border-color: hsl(210 90% 60%) !important;
}

[data-theme="purple-dark"] svg .text-warning,
[data-theme="purple-dark"] svg .text-amber-500,
[data-theme="purple-dark"] svg .text-yellow-500,
[data-theme="purple-dark"] svg .text-yellow-400 {
fill: hsl(210 90% 60%) !important;
stroke: hsl(210 90% 60%) !important;
}

[data-theme="purple-dark"] .text-usage,
[data-theme="purple-dark"] .cc-context-ring {
color: hsl(210 90% 60%) !important;
stroke: hsl(210 90% 60%) !important;
}

[data-theme="purple-dark"] [data-permission] .bg-warning,
[data-theme="purple-dark"] [data-permission] .text-warning,
[data-theme="purple-dark"] .permission-request .bg-warning,
[data-theme="purple-dark"] .permission-request .text-warning,
[data-theme="purple-dark"] [class*="permission"] .bg-yellow,
[data-theme="purple-dark"] [class*="permission"] .text-yellow,
[data-theme="purple-dark"] [aria-label*="Allow"] .bg-warning,
[data-theme="purple-dark"] [aria-label*="Deny"] .bg-warning {
background-color: hsl(210 90% 60%) !important;
color: hsl(0 0% 100%) !important;
}

[data-theme="purple-dark"] button[class*="allow"],
[data-theme="purple-dark"] .cc-permission-allow {
background-color: hsl(210 90% 60%) !important;
}

[data-theme="purple-dark"] .bg-amber-400,
[data-theme="purple-dark"] .bg-amber-300,
[data-theme="purple-dark"] .bg-yellow-300,
[data-theme="purple-dark"] .bg-yellow-400,
[data-theme="purple-dark"] .bg-yellow-200,
[data-theme="purple-dark"] .bg-yellow-100,
[data-theme="purple-dark"] .text-amber-400,
[data-theme="purple-dark"] .text-amber-300,
[data-theme="purple-dark"] .text-yellow-300,
[data-theme="purple-dark"] .text-yellow-400,
[data-theme="purple-dark"] .fill-amber-400,
[data-theme="purple-dark"] .fill-amber-300,
[data-theme="purple-dark"] .fill-yellow-400 {
color: hsl(210 90% 60%) !important;
background-color: hsl(210 90% 60%) !important;
fill: hsl(210 90% 60%) !important;
}
[data-theme="purple-dark"] .bg-card {
background-color: hsl(var(--card));
}
[data-theme="purple-dark"] .bg-background {
background-color: hsl(var(--background));
}
[data-theme="purple-dark"] .bg-sidebar,
[data-theme="purple-dark"] [data-sidebar="true"] {
background-color: hsl(var(--sidebar));
}