chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring some theme colors

Browse Source
This commit is contained in:
chight
2026-07-24 14:11:17 -07:00
parent 3697575f54
commit 2283d156ea
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home/tabs/MyDashboard.jsx
+3 -4
View File
@@ -15,9 +15,9 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
export default function MyDashboard() { export default function MyDashboard() {
// 🌗 Let's adjust for our light and dark mode // 🌗 Let's adjust for our light and dark mode
const frameBg = useColorModeValue("gray.100", "#1E1E2B"); const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
const titleColor = useColorModeValue("gray.800", "gray.100"); const titleColor = useColorModeValue("gray.800", "#FFFFFF");
const iconColor = useColorModeValue("gray.600", "gray.400"); const iconColor = useColorModeValue("gray.600", "#FFFFFF");
const iconHoverBg = useColorModeValue("gray.100", "gray.700"); const iconHoverBg = useColorModeValue("gray.100", "gray.700");
// ☁️ Database Connection // ☁️ Database Connection
@@ -154,7 +154,6 @@ export default function MyDashboard() {
{widgets.map(widget => ( {widgets.map(widget => (
<Box <Box
key={widget.id} key={widget.id}
bg="white"
borderRadius="md" borderRadius="md"
boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
border={isEditing ? "2px dashed gray" : "1px solid"} border={isEditing ? "2px dashed gray" : "1px solid"}
client/src/theme.js
+5 -5
View File
@@ -33,7 +33,7 @@ const sidebarRecipe = defineSlotRecipe({
base: { base: {
root: { root: {
// 1. Semi-transparent backgrounds // 1. Semi-transparent backgrounds
bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "rgba(20, 20, 20, 0.4)" }, bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)" },
// 2. The glass blur effect // 2. The glass blur effect
backdropFilter: "blur(12px)", backdropFilter: "blur(12px)",
@@ -258,10 +258,10 @@ const config = defineConfig({
primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}}, primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
border: {value: {base: "#000000", _dark: "#cbcbcb84"}}, border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
text: {value: {base: "#000000", _dark: "lightgrey"}}, text: {value: {base: "#000000", _dark: "#FFFFFF"}},
textInverted: {value: "#000000"}, textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
icon: {value: {base: "#000000", _dark: "lightgrey"}}, icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
testBackground: { value: {base: "#F9F9F9", _dark: "#191613"} }, testBackground: { value: {base: "#F9F9F9", _dark: "#141414"} },
testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} }, testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} }, testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },