为 Tag Icons theme-component 添加 backgroundColor 选项

gormus · 2025 年12 月 23 日 12:44

Tag Icons 主题组件允许配置标签以显示图标，以及可选的颜色。我真的认为此功能带来了不同，特别是当您需要管理太多标签时。

在我的案例中，同时为文本和图标使用颜色，并添加 background-color（背景颜色）将提高可见性，并提供比其他标签和标签组更好的分隔感。

我已推送一个拉取请求，以分享我认为它可能如何运作。

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

话题		回复	浏览量
Discourse Coloring Tag Theme component	7	2735	2024 年1 月 16 日
Make tags more evident UX	3	83	2025 年3 月 18 日
Tag change color for element in a Tag group Support tags	3	589	2023 年6 月 7 日
Configure tag color Feature	6	3790	2018 年7 月 29 日
Colored Tag Styles Theme component	16	2694	2025 年2 月 12 日

为 Tag Icons theme-component 添加 backgroundColor 选项

相关话题