我使用这个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 的效果。有人可以帮助我吗?
谢谢
1条答案
按热度按时间vktxenjb1#
我认为你错过了直接在HTML中设置主题,所以它在加载开始时就在那里:
字符串
除此之外,我建议使用StimulusJS通过JS添加切换和cookie设置。