ArtPlayer 播放器界面配色支持使用设置的主题色
- Lingua principale
- Go
- Stelle
- 50.2k
- Fork
- 7.9k
- Merge medio
- 7g 21h
- PR unite (30g)
- 6
Descrizione
### Please make sure of the following things
- [x] I have read the [documentation](https://alist.nn.ci).
- [x] I'm sure there are no duplicate issues or discussions.
- [x] I'm sure this feature is not implemented.
- [ ] I'm sure it's a reasonable and popular requirement.
### Description of the feature / 需求描述
如题,修改 ArtPlayer 默认的红色配色为用户在管理面板中设置的主题色
以及更新播放器、弹幕组件,以及修改弹幕按钮的颜色
### Suggested solution / 实现思路
在构建播放器时传入 theme:"主题色" 参数,以及为弹幕功能的 UI (仅适用于新版弹幕组件)增加额外 CSS:
```
#(播放器元素ID) .artplayer-plugin-danmuku .apd-modes .apd-mode:hover{color:(用户设置的颜色);}#(播放器元素ID) .artplayer-plugin-danmuku .apd-slider .apd-slider-progress{background-color:(用户设置的颜色);}#(播放器元素ID) .artplayer-plugin-danmuku .apd-slider .apd-slider-dot{background-color:(用户设置的颜色);}#(播放器元素ID) .artplayer-plugin-danmuku .apd-config-other .apd-other:hover{color:(用户设置的颜色);}#(播放器元素ID) .artplayer-plugin-danmuku .apd-send:not(.apd-lock){background-color:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='0'] .apd-style-mode [data-mode='0']{color:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='0'] .apd-style-mode [data-mode='0'] path{fill:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='1'] .apd-style-mode [data-mode='1']{color:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='1'] .apd-style-mode [data-mode='1'] path{fill:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='2'] .apd-style-mode [data-mode='2']{color:(用户设置的颜色);}#(播放器元素ID) [data-danmuku-mode='2'] .apd-style-mode [data-mode='2'] path{fill:(用户设置的颜色);}#(播放器元素ID) .apd-toggle-on path:nth-of-type(2),#(播放器元素ID) .apd-check-on path,#(播放器元素ID) .apd-mode-0-off path,#(播放器元素ID) .apd-mode-1-off path,#(播放器元素ID) .apd-mode-2-off path{fill:(用户设置的颜色);}.art-contextmenu svg,.art-contextmenu img{vertical-align: top;margin-right: 5px}
```
### Additional context / 附件
_No response_
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.