Ruby on Rails实现无跳转明暗模式切换按钮方案问询

DevOps 小满

2026-5-14

解决Rails明暗模式切换无需页面跳转的方案

作为Rails新手，你遇到的这个问题其实很常见——想要无刷新更新用户的dark_mode状态，而不是通过页面重定向来实现。首先得明确一个核心点：Rails必须通过路由来映射HTTP请求到控制器的action，没有路由的话，前端的点击事件根本没法触发后端的更新逻辑。不过我们可以通过AJAX（或者Rails 7+的Turbo）来实现无刷新操作，完全避免页面跳转。

下面是具体的优化步骤：

1. 调整路由（符合RESTful规范）

之前用GET请求来修改数据库数据其实不太合适，GET请求应该用于获取资源，修改资源最好用PATCH请求。我们可以把路由改成这样：

# config/routes.rb
patch 'users/toggle_dark_mode', to: 'users#toggle_dark_mode', as: :toggle_dark_mode

2. 优化控制器Action

你之前的代码里重复查找current_user是没必要的，current_user本身就是已经认证过的用户实例。另外，我们不需要重定向，而是给前端返回响应（JSON或者Turbo Stream）：

# app/controllers/users_controller.rb
def toggle_dark_mode
  # 直接更新current_user的dark_mode状态，update!会在失败时抛出错误，方便调试
  current_user.update!(dark_mode: !current_user.dark_mode)

  respond_to do |format|
    # 如果用Turbo（Rails 7默认带的），可以返回Turbo Stream来更新页面元素
    format.turbo_stream
    # 也可以返回JSON，供前端JS处理
    format.json { render json: { dark_mode: current_user.dark_mode } }
  end
end

3. 前端按钮与无刷新逻辑

这里分两种情况，取决于你是否使用Rails 7的Turbo：

情况一：使用Turbo（推荐，Rails 7+默认）

Turbo可以让你不用写太多JS就能实现无刷新更新。首先把按钮抽成partial（比如app/views/users/_dark_mode_toggle.html.erb）：

<%# app/views/users/_dark_mode_toggle.html.erb %>
<li id="dark-mode-toggle">
  <% if current_user.dark_mode %>
    <%= link_to t(:deactivate_dark_mode), toggle_dark_mode_path, method: :patch, data: { turbo_stream: true } %>
  <% else %>
    <%= link_to t(:activate_dark_mode), toggle_dark_mode_path, method: :patch, data: { turbo_stream: true } %>
  <% end %>
</li>
<li class="divider"></li>

然后在视图里引用这个partial：<%= render 'users/dark_mode_toggle' %>

接下来创建Turbo Stream模板app/views/users/toggle_dark_mode.turbo_stream.erb，用来更新按钮：

<%= turbo_stream.replace "dark-mode-toggle", partial: "users/dark_mode_toggle" %>

这样点击按钮后，Turbo会自动发送AJAX请求，更新按钮文本，同时你可以在Turbo的回调里添加切换页面明暗样式的逻辑，比如：

// 在application.js或者单独的JS文件里
document.addEventListener('turbo:submit-end', () => {
  const isDarkMode = document.querySelector('#dark-mode-toggle a').textContent.includes('deactivate');
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
});

情况二：不用Turbo（传统AJAX方式）

如果是Rails 6及以下，或者不想用Turbo，可以用remote: true来发送AJAX请求：

<li>
  <% if current_user.dark_mode %>
    <%= link_to t(:deactivate_dark_mode), toggle_dark_mode_path, method: :patch, remote: true, data: { toggle_target: 'darkMode' } %>
  <% else %>
    <%= link_to t(:activate_dark_mode), toggle_dark_mode_path, method: :patch, remote: true, data: { toggle_target: 'darkMode' } %>
  <% end %>
</li>
<li class="divider"></li>

然后创建JS响应模板app/views/users/toggle_dark_mode.js.erb，用来更新按钮和页面样式：

// 更新按钮文本
const toggleButton = document.querySelector('[data-toggle-target="darkMode"]');
<% if current_user.dark_mode %>
  toggleButton.textContent = "<%= j t(:deactivate_dark_mode) %>";
  document.documentElement.classList.add('dark');
<% else %>
  toggleButton.textContent = "<%= j t(:activate_dark_mode) %>";
  document.documentElement.classList.remove('dark');
<% end %>

关键总结

不能跳过路由：Rails的MVC架构依赖路由来连接请求和控制器action，没有路由就没法触发后端的更新逻辑。
避免用GET修改数据：GET请求应该是幂等的（多次请求结果一致），修改数据用PATCH/POST/PUT更符合HTTP规范。
无刷新更新用AJAX/Turbo：这是替代重定向的最佳方案，用户体验更流畅，也符合现代Web应用的交互方式。

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

Ruby on Rails实现无跳转明暗模式切换按钮方案问询

1. 调整路由（符合RESTful规范） #

2. 优化控制器Action #

3. 前端按钮与无刷新逻辑 #

情况一：使用Turbo（推荐，Rails 7+默认） #

情况二：不用Turbo（传统AJAX方式） #