From a20d1a8aa29565ec007ddc175cf8c08789a7a171 Mon Sep 17 00:00:00 2001 From: Jordan Roher Date: Fri, 21 Apr 2023 16:23:30 -0700 Subject: [PATCH] Fixed dark icon colors Fixed icon hex code colors Updated readme --- readme.md | 43 +++++++++++++++++++++++------------------ src/components/icon.tsx | 34 +++++++++++++++++++++++++------- 2 files changed, 51 insertions(+), 26 deletions(-) diff --git a/readme.md b/readme.md index 3094c0a..3c2ce2a 100644 --- a/readme.md +++ b/readme.md @@ -18,21 +18,6 @@ Inspired by [Ben Phelps' Homepage](https://gethomepage.dev/) and [Umbrel](https: # Icons -## Options - -- Set a background by providing an "iconBG" from the [list of Tailwind colors](https://tailwindcss.com/docs/background-color). Do not prefix with "bg-". -- Turn off the bubble and shadow by setting `"iconBubble": false`. -- Turn off background color by setting `"iconBG": "transparent"`. -- Hide the icon entirely by setting `"icon": ""`. - -```bash -# Specify an icon in config.json -"icon": "/icons/jellyfin.jpg", -"iconColor": "blue-500", # optional, defaults to a contrasting color -"iconBG": "gray-200", # optional, defaults to a complementary color -"iconBubble": false, # optional, defaults to true -``` - ## Use your own Create a volume or bind mount to a subfolder of `/app/public` and specify a relative path. @@ -43,6 +28,7 @@ compose.yml - icons - jellyfin.jpg - ghost.jpg + - etc # Bind mount ./icons:/app/public/icons @@ -74,6 +60,18 @@ Use "black" or "white" for those colors. "iconColor": "black" ``` +## Options + +```bash +# Specify an icon in config.json +"icon": "/icons/jellyfin.jpg", # mostly required, but if set to "" it removes the icon +"iconColor": "blue-500", # optional, defaults to a contrasting color +"iconBG": "gray-200", # optional, defaults to a complementary color +"iconBubble": false, # optional, defaults to true, turns off bubble and shadow when false +``` + +For `iconColor` and `iconBG`, use a [Tailwind color](https://tailwindcss.com/docs/background-color). Turn off background color with a value of `"transparent"`. Do not prefix with `"bg-"`. + # Docker compose ```yaml @@ -113,7 +111,10 @@ Can have as many categories as you like. - **name**: Name, required - **uri**: Hyperlink, required - **description**: 2-3 words, optional -- **icon**: relative URI, absolute URI, service name ([Dashboard icon](https://github.com/walkxcode/dashboard-icons)) or `mdi-`service name ([Material Design icon](https://icon-sets.iconify.design/mdi/)) +- **icon**: optional, relative URI, absolute URI, service name ([Dashboard icon](https://github.com/walkxcode/dashboard-icons)) or `mdi-`service name ([Material Design icon](https://icon-sets.iconify.design/mdi/)) +- **iconBG**: optional, hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`). Background color for icons. +- **iconColor**: optional, hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`). Only used as the fill color for Material Design icons. +- **iconBubble**: option, `true` or `false`, when `false` the bubble and shadow are removed from the icon ## Template @@ -124,10 +125,13 @@ Can have as many categories as you like. "bubble": false, "services": [ { - "name": "My App", + "name": "My Cloud App", "uri": "https://website.com", "description": "Fun site", - "icon": "/icons/myapp.png" + "icon": "mdi-cloud", + "iconBG": "#fff", + "iconColor": "#000", + "iconBubble": false } ] } @@ -175,7 +179,8 @@ Can have as many categories as you like. "name": "Home Assistant", "uri": "http://homeassistant.local:8123/", "description": "Home automation", - "icon": "/icons/home-assistant.svg" + "icon": "home-assistant", + "iconBubble": false }, { "name": "Synology", diff --git a/src/components/icon.tsx b/src/components/icon.tsx index 675d540..dc2fa49 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -101,20 +101,30 @@ const IconBase: React.FunctionComponent = ({ icon, iconBG, iconB iconClassName += " rounded-2xl border border-black/5 shadow-sm"; } + const iconStyle: React.CSSProperties = {}; + switch (iconType) { case IconType.uri: case IconType.dashboard: // Default to bubble and no background for URI and Dashboard icons if (!is.null(iconBG)) { - iconClassName += ` bg-${iconBG}`; + if (iconBG?.startsWith("#")) { + iconStyle.backgroundColor = iconBG; + } else { + iconClassName += ` bg-${iconBG}`; + } } break; case IconType.material: // Material icons get a color and a background by default, then an optional bubble if (is.null(iconBG)) { - iconClassName += ` bg-slate-200`; + iconClassName += ` bg-slate-200 dark:bg-gray-900`; } else { - iconClassName += ` bg-${iconBG}`; + if (iconBG?.startsWith("#")) { + iconStyle.backgroundColor = iconBG; + } else { + iconClassName += ` bg-${iconBG}`; + } } if (is.null(iconBubble) || iconBubble !== false) { @@ -122,14 +132,22 @@ const IconBase: React.FunctionComponent = ({ icon, iconBG, iconB } if (is.null(iconColor)) { - iconColor = "black"; + iconColor = "black dark:bg-white"; } break; } + const mdiIconStyle: React.CSSProperties = {}; + let mdiIconColorFull = "bg-" + iconColor; + + if (!is.null(iconColor) && iconColor?.startsWith("#")) { + mdiIconColorFull = ""; + mdiIconStyle.backgroundColor = iconColor; + } + switch (iconType) { case IconType.uri: - return ; + return ; case IconType.dashboard: icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", ""); return ( @@ -137,16 +155,18 @@ const IconBase: React.FunctionComponent = ({ icon, iconBG, iconB src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`} alt="" className={iconClassName} + style={{ ...iconStyle }} /> ); case IconType.material: icon = icon.replace("mdi-", "").replace(".svg", ""); return ( -
+