Skip to content

feat: add global icon color override #457

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CoffeePatch wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add global icon color override #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36df2c2
feat: add global icon color override
ujiro99 Sep 13, 2026
c812e2c
fix: address PR reviews and folder hover text color
ujiro99 Sep 13, 2026
3deb577
refactor(extension): improve favicon detection with tldts and generic…
ujiro99 Sep 14, 2026
e9ecf97
feat(extension): update global icon color exclusion behavior and rena…
ujiro99 Sep 14, 2026
9efbf69
test(extension): add tests for custom icon recoloring and dynamic fav…
ujiro99 Sep 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"sonner": "git+https://github.com/ujiro99/sonner.git",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
"tldts": "^7.4.13",
"uuid": "^14.0.0",
"zod": "^3.24.1"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/de/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Geben Sie die Schriftfarbe an. Standard: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Schriftgrößen-Skalierung"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -723,6 +723,24 @@
"Option_userStyles_desc_font_color": {
"message": "Specify font color. Default: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Font size scaling"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/es/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Especificar el color de fuente. Predeterminado: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Escala de tamaño de fuente"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/fr/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Spécifier la couleur de police. Par défaut: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Échelle de taille de police"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/hi/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "फ़ॉन्ट का रंग निर्दिष्ट करें। डिफ़ॉल्ट: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "फ़ॉन्ट साइज़ स्केल"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/id/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Tentukan warna font. Default: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Penskalaan ukuran font"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/it/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Specifica il colore del carattere. Predefinito: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Scala dimensione font"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/ja/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "文字の色を指定します。デフォルト: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "アイコンの色"
},
"Option_userStyles_desc_icon_color": {
"message": "アイコンの色を指定します。デフォルト: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "全体のアイコン色から除外する"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "全体のアイコン色が設定されている場合でも、このアイコン本来の色を保持します。"
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "ファビコンは自動的に全体のアイコン色から除外され、本来の色を保持します。"
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "自動"
},
"Option_userStyles_option_font_scale": {
"message": "文字サイズの倍率"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/ko/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "글꼴 색상을 지정합니다. 기본값: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "글꼴 크기 스케일"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/ms/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Tentukan warna fon. Lalai: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Penskalaan saiz fon"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/pt_BR/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Especificar a cor da fonte. Padrão: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Escala do tamanho da fonte"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/pt_PT/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Especificar a cor do tipo de letra. Predefinido: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Escala do tamanho da fonte"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/ru/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "Укажите цвет шрифта. По умолчанию: #0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "Масштаб размера шрифта"
},
Expand Down
18 changes: 18 additions & 0 deletions packages/extension/public/_locales/zh_CN/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,24 @@
"Option_userStyles_desc_font_color": {
"message": "指定字体颜色。默认值：#0F172A"
},
"Option_userStyles_option_icon_color": {
"message": "Icon Color"
},
"Option_userStyles_desc_icon_color": {
"message": "Specify icon color. Default: #0F172A"
},
"Option_excludeFromGlobalIconColor": {
"message": "Exclude from global icon color"
},
"Option_excludeFromGlobalIconColor_desc": {
"message": "Keep this icon's original color even when a global icon color is set."
},
"Option_excludeFromGlobalIconColor_favicon_desc": {
"message": "Favicons are automatically excluded from the global icon color and keep their original colors."
},
"Option_excludeFromGlobalIconColor_automatic": {
"message": "Automatic"
},
"Option_userStyles_option_font_scale": {
"message": "字体大小缩放"
},
Expand Down
9 changes: 8 additions & 1 deletion packages/extension/src/components/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useSidePanelNavigation } from "@/hooks/useSidePanelNavigation"
import { useSidePanelAutoClose } from "@/hooks/useSidePanelAutoClose"
import { useSelectContext } from "@/hooks/useSelectContext"
import { popupContext } from "@/hooks/usePopupContext"
import { hexToHsl, isMac, onHover, cn } from "@/lib/utils"
import { hexToHsl, isMac, onHover, cn, isEmpty } from "@/lib/utils"
import { t } from "@/services/i18n"
import { STYLE_VARIABLE, EXIT_DURATION, SIDE, ALIGN } from "@/const"

Expand Down Expand Up @@ -110,6 +110,12 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
setDetectSelectionEnabled(!hover)
}

const hasIconColor = Boolean(
userSettings?.userStyles?.some(
(s: any) => s.name === STYLE_VARIABLE.ICON_COLOR && !isEmpty(s.value),
),
)

return (
<popupContext.Provider
value={{
Expand All @@ -118,6 +124,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
inOnboarding: props.inOnboarding,
side,
align,
hasIconColor,
}}
>
{isPreview && <PreviewDesc {...props} />}
Expand Down
Loading