Tag Icons 테마 컴포넌트에 backgroundColor 옵션 추가

gormus · 12월 23, 2025, 12:44오후

Tag Icons 테마 컴포넌트는 태그를 아이콘과 선택적인 색상으로 표시하도록 설정할 수 있게 해줍니다. 특히 태그를 너무 많이 관리해야 하는 경우 이 기능이 큰 차이를 만든다고 생각합니다.

제 경우를 들어보면, 텍스트와 아이콘 모두에 색상을 사용하고 배경색을 추가하면 가시성이 높아지고, 나머지 태그 및 태그 그룹과의 구분이 더 명확해져 좋습니다.

어떻게 작동할 수 있을지 제 생각을 공유하기 위해 풀 리퀘스트를 올렸습니다.

github.com/discourse/discourse-tag-icons

feat: add backgroundColor option for the tags, and style them every where possible (#46)

main ← gormus:add-background

merged 04:05PM - 26 Jan 26 UTC

gormus

+134 -90

Please see the _Feature_ topic at https://meta.discourse.org/t/add-backgroundcol…or-option-for-tag-icon-theme-component/391995 --- This pull request enhances the tag icon feature by improving how tag icons, colors, 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

태그 스타일: bullet

태그 스타일: box

pmusaraj · 1월 26, 2026, 4:06오후

이제 병합되었습니다, 기여해 주셔서 감사합니다 @gormus!

gormus · 1월 26, 2026, 4:14오후

멋있네요! @pmusaraj 감사합니다

글		댓글	조회수
Tag Icons Theme component official , tag-icons	91	21054	3월 3, 2026
Make tags more evident UX tags	3	188	3월 18, 2025
Tag change color for element in a Tag group Product Support tags	3	736	6월 7, 2023
Configure tag color Feature	6	3993	7월 29, 2018
Tag Style Tool Theme component tags	18	871	7월 13, 2026

Tag Icons 테마 컴포넌트에 backgroundColor 옵션 추가

Related topics