Fixed dark icon colors
Fixed icon hex code colors Updated readme
This commit is contained in:
Jordan Roher
parent
415c2a2142
commit
a20d1a8aa2
43
readme.md
43
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",
|
||||
|
||||
@ -101,20 +101,30 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({ 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<IIconBaseProps> = ({ 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 <img src={icon} alt="" className={iconClassName} />;
|
||||
return <img src={icon} alt="" className={iconClassName} style={{ ...iconStyle }} />;
|
||||
case IconType.dashboard:
|
||||
icon = icon.replace(".png", "").replace(".jpg", "").replace(".svg", "");
|
||||
return (
|
||||
@ -137,16 +155,18 @@ const IconBase: React.FunctionComponent<IIconBaseProps> = ({ 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 (
|
||||
<div className={iconClassName}>
|
||||
<div className={iconClassName} style={{ ...iconStyle }}>
|
||||
<div
|
||||
className={`block w-16 h-16 bg-${iconColor} overflow-hidden`}
|
||||
className={`block w-16 h-16 ${mdiIconColorFull} overflow-hidden`}
|
||||
style={{
|
||||
...mdiIconStyle,
|
||||
mask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`,
|
||||
WebkitMask: `url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/${icon}.svg) no-repeat center / contain`,
|
||||
}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user