feat(主题设置): 改进色彩选择器交互并更新评论主题

- 将色彩选择器的步长从5改为1,增加精确度
- 添加数字输入框直接修改色相值
- 更新评论组件主题为跟随系统配色
- 修复数字输入框在Webkit浏览器中的样式问题
This commit is contained in:
二叉树树
2025-12-28 20:04:21 +08:00
parent 7c157dda0b
commit a4e7beb93a
2 changed files with 12 additions and 6 deletions

View File

@@ -117,15 +117,14 @@ onMount(() => {
</button>
</div>
<div class="flex gap-1">
<div id="hueValue" class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center
font-bold text-sm items-center text-[var(--btn-content)]">
{Math.round(hue)}
</div>
<input aria-label="Hue Value" id="hueValue" type="number" min="0" max="360" value={Math.round(hue)} on:input={(e) => hue = e.currentTarget.valueAsNumber} disabled={isRainbowMode}
class="transition bg-[var(--btn-regular-bg)] w-12 h-7 rounded-md text-center font-bold text-sm text-[var(--btn-content)] outline-none"
/>
</div>
</div>
<div class="w-full h-6 px-1 bg-[oklch(0.80_0.10_0)] dark:bg-[oklch(0.70_0.10_0)] rounded select-none mb-3">
<input aria-label="主题色彩" type="range" min="0" max="360" bind:value={hue} disabled={isRainbowMode}
class="slider" id="colorSlider" step="5" style="width: 100%">
class="slider" id="colorSlider" step="1" style="width: 100%">
</div>
<div class="flex flex-row gap-2 mb-3 items-center justify-between">
@@ -163,6 +162,13 @@ onMount(() => {
<style lang="stylus">
#display-setting
input[type="number"]
-moz-appearance textfield
&::-webkit-inner-spin-button
&::-webkit-outer-spin-button
-webkit-appearance none
margin 0
input[type="range"]
-webkit-appearance none
height 1.5rem

View File

@@ -176,7 +176,7 @@ const jsonLd = {
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="noborder_gray"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"