feat(board): allow to set icon color of widgets (#2228)

Co-authored-by: Andre Silva <[email protected]>
homarr-labs · Feb 19, 2025 · de5c34a · de5c34a
1 parent 58babbf
commit de5c34a
Show file tree

Hide file tree

Showing 23 changed files with 3,790 additions and 38 deletions.
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -20,6 +20,7 @@ export const BoardMantineProvider = ({
     colors: {
       primaryColor: generateColors(board.primaryColor),
       secondaryColor: generateColors(board.secondaryColor),
+      iconColor: board.iconColor ? generateColors(board.iconColor) : colorsTuple("#000000"),
     },
     primaryColor: "primaryColor",
     autoContrast: true,

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx
@@ -40,6 +40,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
       opacity: board.opacity,
+      iconColor: board.iconColor ?? "",
       itemRadius: board.itemRadius,
     },
   });
@@ -101,6 +102,12 @@ export const ColorSettingsContent = ({ board }: Props) => {
             </InputWrapper>
           </Grid.Col>
           <Grid.Col span={{ sm: 12, md: 6 }}>
+            <ColorInput
+              label={t("board.field.iconColor.label")}
+              format="hex"
+              swatches={Object.values(theme.colors).map((color) => color[6])}
+              {...form.getInputProps("iconColor")}
+            />
             <Select
               label={t("board.field.itemRadius.label")}
               description={t("board.field.itemRadius.description")}

diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
@@ -511,6 +511,7 @@ export const boardRouter = createTRPCRouter({
           primaryColor: input.primaryColor,
           secondaryColor: input.secondaryColor,
           opacity: input.opacity,
+          iconColor: input.iconColor,
 
           // custom css
           customCss: input.customCss,

diff --git a/packages/db/migrations/mysql/0027_acoustic_karma.sql b/packages/db/migrations/mysql/0027_acoustic_karma.sql
@@ -0,0 +1 @@
+ALTER TABLE `board` ADD `icon_color` text;