[Enhancement] 暗色模式优化

[xiaofeiTM233]

功能描述

↑这个是最显著的（ ↑这个也基本看不清 ↑过暗了

其余的还好

具体操作

css改一下就行

[mark9804]

第一个是在什么系统里面复现的？Windows 的全局暗色模式？

第二个是我的问题

后面那个之后提一下暗色模式的变量亮度

[mark9804]

1 确认是 Windows 环境下的问题，我用的 Mac 没发现

不太确定能不能修

[xiaofeiTM233]

1 确认是 Windows 环境下的问题，我用的 Mac 没发现

不太确定能不能修

@Mark9804 啊原来有圆角的吗（圆角也没有 其实css给里面文字加个颜色或者给他底部加个黑色背景就行 ↓瞎写，证明能改罢了

[xiaofeiTM233]

第一个是在什么系统里面复现的？Windows 的全局暗色模式？

第二个是我的问题

后面那个之后提一下暗色模式的变量亮度

就是左下角的暗色按钮

[mark9804]

圆角那个我想了想顿悟了，我是win11……

[xiaofeiTM233]

闲着无聊， 翻了一下，发现是css写错了（ 有一个简单的修改方式 ./src/components/widgets/LanguageSelector.vue

1. 直接
2. 懒一点
3. 干脆（此图中未格式化）
4. 根本上解决
5. 我的想法（此图中未格式化）
6. 最终结果（已经格式化过了，直接替换进去就行）

   
   <script setup lang="ts">
   import { ref } from 'vue';
   import { useSettingsStore } from '../../store/settings';

const languages = ref([ { name: '简体中文', code: 'cn', }, { name: '繁體中文', code: 'tw', }, { name: '日本語', code: 'jp', }, { name: 'English', code: 'en', }, { name: '한국어', code: 'kr', }, { name: 'ไทย', code: 'th', }, ]);

const settingsStore = useSettingsStore(); const selectedLang = ref(settingsStore.getLang);

function handleLangChange(event: Event) { const target = event.target as HTMLSelectElement; settingsStore.setLang(target.value); }

↑图片都仅作演示
此方案在没有其他多选框需要一起改css的前提下进行
具体整看着办吧qwq
@Mark9804 

[xiaofeiTM233]

另外，暗色模式状态在刷新后会被清除 （已经为暗色模式但界面仍是亮色模式的截图）

[mark9804]

你来我组吧😭

两个问题都解决了，等待下一个合并窗口

[xiaofeiTM233]

暗色模式文字颜色适配 ./src/style.scss

1

↑那个空行是为了与亮色照应，加不加无所谓

效果

前后

2

如果接受，建议加上↓

* {
    color: var(--color-text-main);
}

如果不接受，把*改成a就只改a标签就行（如果有更好的颜色也行）

效果

前 后

3

一个bug span标签没有过渡 有空加上就是

span {
  transition: color .375s ease-in-out;
}

4

这里写的是 --color-primary-button: #ecbbd0; 但是因为修改这个会导致按钮颜色也变化 后面实装的时候记得调一下或者干脆换成别的

效果

前 后

[xiaofeiTM233]

你来我组吧sob

两个问题都解决了，等待下一个合并窗口

把刚刚这个也加上吧（

[xiaofeiTM233]

暗色模式文字颜色适配 ./src/style.scss

1

↑那个空行是为了与亮色照应，加不加无所谓

效果

前后

2

如果接受，建议加上↓

* {
    color: var(--color-text-main);
}

如果不接受，把*改成a就只改a标签就行（如果有更好的颜色也行）

效果

前 后

3

一个bug span标签没有过渡 有空加上就是

span {
  transition: color .375s ease-in-out;
}

4

这里写的是 --color-primary-button: #ecbbd0; 但是因为修改这个会导致按钮颜色也变化 后面实装的时候记得调一下或者干脆换成别的

效果

前 后

@Mark9804 有空看看

[mark9804]

在看了在看了，changelog都不知道要怎么写了😭

[mark9804]

弹性装甲的暗色模式颜色是多少，我要开偷了