💄 style(css): add light-mode styles for slate backgrounds
- implement light-mode overrides for slate backgrounds and text colors - ensure compatibility with existing dark-mode styles
This commit is contained in:
parent
169fd00d41
commit
79aa77348b
1 changed files with 43 additions and 0 deletions
|
|
@ -3,3 +3,46 @@ body {
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||||
"Segoe UI", sans-serif;
|
"Segoe UI", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Light-mode overrides for commonly used slate backgrounds/texts */
|
||||||
|
html:not(.dark) body {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
html:not(.dark) .bg-slate-950,
|
||||||
|
html:not(.dark) .bg-slate-900,
|
||||||
|
html:not(.dark) .bg-slate-900\\/80,
|
||||||
|
html:not(.dark) .bg-slate-900\\/70,
|
||||||
|
html:not(.dark) .bg-slate-900\\/60,
|
||||||
|
html:not(.dark) .bg-slate-900\\/40,
|
||||||
|
html:not(.dark) .bg-slate-800 {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .border-slate-800,
|
||||||
|
html:not(.dark) .border-slate-800\\/80,
|
||||||
|
html:not(.dark) .border-slate-700 {
|
||||||
|
border-color: #e2e8f0 !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .text-slate-100,
|
||||||
|
html:not(.dark) .text-slate-200,
|
||||||
|
html:not(.dark) .text-slate-300 {
|
||||||
|
color: #0f172a !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .text-slate-400 {
|
||||||
|
color: #334155 !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .text-slate-500 {
|
||||||
|
color: #475569 !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .bg-slate-800 {
|
||||||
|
background-color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .bg-slate-900\\/60 {
|
||||||
|
background-color: rgba(255, 255, 255, 0.85) !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .bg-slate-900\\/70 {
|
||||||
|
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||||
|
}
|
||||||
|
html:not(.dark) .bg-slate-900\\/80 {
|
||||||
|
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue