AlistGo / AlistGo/alist

ArtPlayer 播放器界面配色支持使用设置的主题色

Offen
#7,971 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
Go
Sterne
50.2k
Forks
7.9k
Ø Merge
7 T. 21 Std.
Gemergte PRs (30 T.)
6

Beschreibung

### 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_

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.