Skip to content

Conversation

@Fano-O
Copy link

@Fano-O Fano-O commented Sep 16, 2025

Fix: Dark-Mode Default Not Persisted to localStorage

Problem

When theme.colors.default_mode is set to 'dark', the initial value is calculated correctly (isDark = true) but never written to localStorage. After the first page reload getStyleStatus() overwrites isDark with the cached false, so users always see the light mode on the first visit even if the theme default is dark.

Root Cause

styleStatus.isDark is only computed at module load time; there is no call to setStyleStatus() when the cache is empty, so the correct default value is lost after the first read.

Solution

Write the initial isDark value to localStorage before the first getStyleStatus() call.

Changed

  • source/js/main.js (initMain function)
    • add a one-time check: if localStorage key does not exist, compute isDark from theme.colors.default_mode, save it, then continue normal flow.

Test Steps

  1. clear localStorage: localStorage.removeItem('REDEFINE-THEME-STATUS')
  2. set theme.colors.default_mode: dark in _config.yml
  3. reload page → console now shows isDark: true and cache contains isDark:true
  4. subsequent reloads keep the correct value; manual toggle still works as expected.

No breaking changes; existing users keep their current choice.

问题描述

当 _config.yml 中 theme.colors.default_mode 设为 dark 时,脚本虽然正确计算出 isDark = true,但并未将结果写入 localStorage。 首次刷新页面后 getStyleStatus() 会把 isDark 覆盖为缓存中的 false,导致用户首次访问永远显示浅色模式。

根本原因

styleStatus.isDark 仅在模块加载时计算一次;当本地缓存为空时,代码没有调用 setStyleStatus() 写入默认值,造成第一次读取后丢失正确值。

修复方案

在第一次调用 getStyleStatus() 之前,先将计算出的初始 isDark 写入 localStorage。

改动文件

  • source/js/main.js(initMain 函数)
    • 增加一次性判断:若 localStorage 中对应键不存在,则根据 theme.colors.default_mode 计算并保存,随后继续原有逻辑。

测试步骤

  1. 清空本地缓存:localStorage.removeItem('REDEFINE-THEME-STATUS')
  2. 在 _config.yml 设置 theme.colors.default_mode: dark
  3. 刷新页面 → 控制台显示 isDark: true,且缓存内容为 isDark:true
  4. 再次刷新仍保持正确值;用户手动切换深浅色功能不受影响。

无破坏性变更,老用户已有选择会被保留。

# Fix: Dark-Mode Default Not Persisted to localStorage

## Problem
When theme.colors.default_mode is set to 'dark', the initial value is calculated correctly (isDark = true) but **never written to localStorage**.
After the first page reload getStyleStatus() overwrites isDark with the cached false, so users always see the light mode on the first visit even if the theme default is dark.

## Root Cause
styleStatus.isDark is only computed at module load time; there is no call to setStyleStatus() when the cache is empty, so the correct default value is lost after the first read.

## Solution
Write the initial isDark value to localStorage **before** the first getStyleStatus() call.

## Changed
- source/js/main.js (initMain function)
  - add a one-time check: if localStorage key does not exist, compute isDark from theme.colors.default_mode, save it, then continue normal flow.

## Test Steps
1. clear localStorage: localStorage.removeItem('REDEFINE-THEME-STATUS')
2. set theme.colors.default_mode: dark in _config.yml
3. reload page → console now shows isDark: true and cache contains isDark:true
4. subsequent reloads keep the correct value; manual toggle still works as expected.

No breaking changes; existing users keep their current choice.

## 问题描述
当 _config.yml 中 theme.colors.default_mode 设为 dark 时,脚本虽然正确计算出 isDark = true,但并未将结果写入 localStorage。
首次刷新页面后 getStyleStatus() 会把 isDark 覆盖为缓存中的 false,导致用户首次访问永远显示浅色模式。

## 根本原因
styleStatus.isDark 仅在模块加载时计算一次;当本地缓存为空时,代码没有调用 setStyleStatus() 写入默认值,造成第一次读取后丢失正确值。

## 修复方案
在第一次调用 getStyleStatus() 之前,先将计算出的初始 isDark 写入 localStorage。

## 改动文件
- source/js/main.js(initMain 函数)
  - 增加一次性判断:若 localStorage 中对应键不存在,则根据 theme.colors.default_mode 计算并保存,随后继续原有逻辑。

## 测试步骤
1. 清空本地缓存:localStorage.removeItem('REDEFINE-THEME-STATUS')
2. 在 _config.yml 设置 theme.colors.default_mode: dark
3. 刷新页面 → 控制台显示 isDark: true,且缓存内容为 isDark:true
4. 再次刷新仍保持正确值;用户手动切换深浅色功能不受影响。

无破坏性变更,老用户已有选择会被保留。
The value of `main.styleStatus.isDark` is already calculated when the module is loaded.  
When the cache is empty we only need to **save the existing value to localStorage**, no need to compute it again.

Simplified logic:
- Cache missing → just call `main.setStyleStatus()` to write disk
- Dark-mode first-load issue remains fixed
- Eliminates one useless assignment

模块加载时 `main.styleStatus.isDark` 已被计算好。  
缓存为空时我们只需**把当前值存进本地存储**,无需再次计算。

简化后:
- 缓存不存在 → 直接调用 `main.setStyleStatus()` 
- 首次深色问题依旧解决
- 减少一次无意义的赋值
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant