Ruby on Rails 7 明暗主题切换时出现闪烁问题求助

问题根源 #

页面加载时，浏览器会先渲染默认的浅色样式，之后才会读取Cookie中的主题设置并切换到深色主题，这一延迟导致了闪烁现象。要解决这个问题，需要在页面最早期就完成主题类的设置，让CSS加载时直接应用目标主题样式。

解决方案步骤 #

1. 在HTML头部添加内联脚本优先设置主题类

修改application.html.erb，将主题判断逻辑放在<head>的最顶部，确保脚本在CSS加载前执行：

<head>
  <%# 优先设置主题类，避免闪烁 %>
  <script>
    // 读取Cookie中的主题设置
    const savedTheme = document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1];
    // 确定当前主题：有保存值用保存值，否则跟随系统设置
    const currentTheme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    // 给根元素添加主题类
    document.documentElement.classList.add(currentTheme);
  </script>

  <%# 原有头部内容 %>
  <title>你的应用名称</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  <%# 主题切换链接 %>
  <%= link_to '浅色', set_theme_path(theme: 'light') %>
  <%= link_to '深色', set_theme_path(theme: 'dark') %>
  <%= link_to '系统默认', set_theme_path %>
</head>

2. 重构SCSS样式，简化主题控制逻辑

修改theme.scss，让根元素的主题类直接控制样式，系统默认作为回退：

/* 默认浅色样式 */
.home {
  background: silver;
  color: black;
}

/* 深色主题样式 */
.dark .home {
  background: black;
  color: white;
}

/* 系统深色默认（未设置Cookie时生效） */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .home {
    background: black;
    color: white;
  }
}

3. 更新控制器逻辑，正确处理系统默认主题

修改theme_controller.rb，选择系统默认时删除Cookie，而不是保留空值：

class ThemeController < ApplicationController
  def update
    if params[:theme].present?
      cookies[:theme] = params[:theme]
    else
      # 删除Cookie，恢复跟随系统主题
      cookies.delete(:theme)
    end
    redirect_to(request.referrer || root_path )
  end
end

原理说明 #

通过内联脚本在页面加载的最早期就给根元素设置主题类，浏览器加载CSS时会直接应用对应主题的样式，避免了先渲染默认样式再切换的延迟，从根本上消除了闪烁现象。

内容的提问来源于stack exchange，提问作者Volkan