Ruby on Rails 7在浅色和深色主题之间切换时的 Flink 效果

eyh26e7m  于 2023-11-18  发布在  Ruby
关注(0)|答案(1)|浏览(101)

我使用这个youtube tutorial来介绍在主题之间切换的能力(亮,暗或系统默认)。它都工作正常,但是有一个 Flink 效果形式的bug。例如,我在LIGHT主题上,我访问其他子页面,都很好,亮主题显示。我切换到暗主题。它工作正常,但是当访问其他子页面时,在应用暗主题之前,灯光主题显示了一秒钟,产生了一些 Flink 。
本教程中针对此主题切换到工作状态给出的代码更改:

application.html.erb(可点击链接):

<%= cookies[:theme] %>
<%= link_to 'Light', set_theme_path(theme: 'light') %>
<%= link_to 'Dark', set_theme_path(theme: 'dark') %>
<%= link_to 'System default', set_theme_path %>

字符串

theme.scss

@media (prefers-color-scheme: dark) {
    .home {
      background:black;
      color: white;
    }

    .home.light {
        background: silver;
        color: black;
    }
  }

  @media (prefers-color-scheme: light) {
    .home {
        background: silver;
        color: black;

    }

    .home.dark {
        background:black;
        color: white;
    }
  }

routes.rb

get 'set_theme', to: 'theme#update'

theme_controller.rb

class ThemeController < ApplicationController
    def update
        cookies[:theme] = params[:theme]
        redirect_to(request.referrer || root_path )
    end
end


主题切换工作,但我想删除这个 Flink 的效果。有人可以帮助我吗?
谢谢

vktxenjb

vktxenjb1#

我认为你错过了直接在HTML中设置主题,所以它在加载开始时就在那里:

<html class="<%= cookies[:theme] == 'dark' ? 'dark' : 'light' %>">

字符串
除此之外,我建议使用StimulusJS通过JS添加切换和cookie设置。

相关问题