add iconStyle setting

src/components/resolvedicon.jsx

@@ -1,6 +1,14 @@
+import { useContext } from "react";
 import Image from "next/future/image";
 
+import { SettingsContext } from "utils/contexts/settings";
+import { ThemeContext } from "utils/contexts/theme";
+
+
 export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "logo" }) {
+  const { settings } = useContext(SettingsContext);
+  const { theme } = useContext(ThemeContext);
+
   // direct or relative URLs
   if (icon.startsWith("http") || icon.startsWith("/")) {
     return (
@@ -25,9 +33,16 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
   };
 
   if (prefix in prefixPaths) {
+    // get icon Source
     const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
     const iconSource = `${prefixPaths[prefix]}${iconName}.svg`;
 
+    const gradientStyle = "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
+    const themeStyle = `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity))`;
+
+    const setting = settings.iconStyle || "gradient";
+    const background = setting === "gradient" ? gradientStyle : themeStyle;
+    
     return (
       <div
         style={{
@@ -35,7 +50,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
           height,
           maxWidth: '100%',
           maxHeight: '100%',
-          background: "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
+          background,
           mask: `url(${iconSource}) no-repeat center / contain`,
           WebkitMask: `url(${iconSource}) no-repeat center / contain`,
         }}