Tag Icons テーマコンポーネントに backgroundColor オプションを追加

gormus · 2025 年 12 月 23 日午後 12:44

Tag Iconsテーマコンポーネントを使用すると、タグにアイコンとオプションの色を設定できます。特にタグが多すぎる場合に、この機能は大きな違いを生むと思います。

私の場合、アイコンだけでなくテキストにも色を使い、さらに背景色を追加することで、視認性が向上し、他のタグやタググループとの区別がより明確になると考えています。

どのように機能するかを共有するために、プルリクエストを送信しました。

github.com/discourse/discourse-tag-icons

feat: add backgroundColor option for the tags, and style them every where possible

main ← gormus:add-background

opened 12:16PM - 23 Dec 25 UTC

gormus

+65 -83

This pull request enhances the tag icon feature by improving how tag icons, colo…rs, and backgrounds are rendered and configured. It streamlines the tag rendering logic, ensures consistent styling through CSS variables, and expands the configuration format to support both icon and background colors for tags. **Tag rendering and configuration improvements:** * Refactored the `iconTagRenderer` function in `tag-icons.js` to use the shared `defaultRenderTag` utility, simplifying the code and ensuring consistent tag markup generation. Tag icons, colors, and backgrounds are now applied by parsing the rendered tag and injecting the icon and CSS variables directly. * Updated the tag icon configuration format in the theme settings and code to support four fields: `tag-slug,icon,color,backgroundColor`, allowing both icon and background colors to be set for each tag. [[1]](diffhunk://#diff-847d4476f4d777f46cf45f4b203b31c3c98a7ff363ba122ac5bd8c256f1f38d2L4-R4) [[2]](diffhunk://#diff-c0ba113d8a0d1fa107bb6ef026a3926c5840e6de37c3517ba7e510b2c4ad21e6R51-R103) **Styling enhancements:** * Added new CSS rules in `common.scss` for `.discourse-tag.colored-tag` and `.hashtag-cooked:has(.hashtag-tag-icon)`, ensuring that colored tags and hashtag icons use the configured CSS variables for color and background, improving visual consistency. **Hashtag icon logic:** * Improved the hashtag icon rendering in `TagHashtagTypeWithIcon` to use the configured icon and color, and added support for custom background color. **Tag style: `simple`** <img width="1470" height="801" alt="tags,tag_style=simple,light" src="https://github.com/user-attachments/assets/3d409866-7635-42ed-a8b9-1777a948b048" /> **Tag style: `bullet`** <img width="1470" height="801" alt="tags,tag_style=bullet,light" src="https://github.com/user-attachments/assets/6e4752d9-04ec-4be3-acd9-95f9481df735" /> **Tag style: `box`** <img width="1470" height="801" alt="tags,tag_style=box,light" src="https://github.com/user-attachments/assets/433cc97c-7a33-4a18-82eb-ce09160e4719" />

タグスタイル: simple

composer,tag_style=simple,light
composer,tag_style=simple,dark

タグスタイル: bullet

composer,tag_style=bullet,light
composer,tag_style=bullet,dark

タグスタイル: box

composer,tag_style=box,light
composer,tag_style=box,dark

pmusaraj · 2026 年 1 月 26 日午後 4:06

これはマージされました。ご協力ありがとうございます @gormus！

gormus · 2026 年 1 月 26 日午後 4:14

素晴らしい！@pmusaraj さん、ありがとうございます

トピック		返信	表示
Make tags more evident UX tags	3	97	2025 年 3 月 18 日
Tag Icons Theme component official , tag-icons	88	18756	2026 年 1 月 27 日
Tag change color for element in a Tag group Support tags	3	599	2023 年 6 月 7 日
Configure tag color Feature	6	3807	2018 年 7 月 29 日
Colored Tag Styles Theme component	16	2741	2025 年 2 月 12 日

Tag Icons テーマコンポーネントに backgroundColor オプションを追加

関連トピック