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

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,

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")}

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,

packages/db/migrations/mysql/0027_acoustic_karma.sql

@@ -0,0 +1 @@
+ALTER TABLE `board` ADD `icon_color` text;