英文:
Set dark theme to default in ruby on rails
问题
我们为我们的网站创建了一个暗色主题,并且我们喜欢它胜过浅色主题。这就是为什么我们想将暗色主题设置为默认主题,但应该可以使用切换按钮从暗色切换到浅色主题。
有人能帮我吗?我将不胜感激!
这是我们的代码:
/application.html.erb
<!DOCTYPE html>
<head>
<title>CollectiverseForum</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body class="<%= cookies[:theme] %>">
<%= render 'shared/navbar' %>
<%= render "shared/flashes" %>
<%= yield %>
</body>
</html>
/application_controller.rb
def set_theme
if params[:theme].present?
cookies[:theme] = 'dark' # 切换颜色模式不起作用是因为这段代码
theme = params[:theme].to_sym
cookies[:theme] = theme
redirect_to(request.referrer || root_path)
end
end
导航栏代码
<% if cookies[:theme] == "light" %>
<%= link_to "Dark Mode", root_path(theme: "dark"), class:"dropdown-item dropdown__list static__text" %>
<% else %>
<%= link_to "Light Mode", root_path(theme: "light"), class:"dropdown-item dropdown__list static__text" %>
<% end %>
英文:
we created an dark theme for our website and we like to better than the light theme. That is why we want to set the dark theme to default, but it should be possible to switch from dark to light theme using the toggle button.
Could someone help me with that? I would appreciate it!
This is our code:
/application.html.erb
<!DOCTYPE html>
<head>
<title>CollectiverseForum</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body class="<%= cookies[:theme] %>">
<%= render 'shared/navbar' %>
<%= render "shared/flashes" %>
<%= yield %>
</body>
</html>
/application_controller.rb
def set_theme
if params[:theme].present?
cookies[:theme] = 'dark' #switch color mode doesnt work because of this code
theme = params[:theme].to_sym
cookies[:theme] = theme
redirect_to(request.referrer || root_path)
end
end
navbar code
<% if cookies[:theme] == "light" %>
<%= link_to "Dark Mode", root_path(theme: "dark"), class:"dropdown-item dropdown__list static__text" %>
<% else %>
<%= link_to "Light Mode", root_path(theme: "light"), class:"dropdown-item dropdown__list static__text" %>
<% end %>
答案1
得分: 2
我会假设将dark
或light
设置为body
HTML类将在深色模式和浅色模式之间切换,只有默认和切换逻辑不起作用。
我会将application_controller.rb
中的set_theme
更改为以下内容:
before_action :set_theme
private
def set_theme
# 如果尚未设置,默认为'dark'
cookies[:theme] ||= 'dark'
# 如果在参数中设置了主题,切换主题
cookies[:theme] = params[:theme] if params[:theme].in? ['dark', 'light']
end
并且在navbar
中创建切换按钮,如下所示:
<% if cookies[:theme] == "light" %>
<%= link_to "Dark Mode", url_for.merge(theme: "dark"), class: "dropdown-item dropdown__list static__text" %>
<% else %>
<%= link_to "Light Mode", url_for.merge(theme: "light"), class: "dropdown-item dropdown__list static__text" %>
<% end %>
这将在相同页面上呈现(而不是root_path
),但主题已更改。
英文:
I will assume that setting dark
or light
as body
HTML class does toggle between dark and light mode and that only the default and switch logic is not working.
I would change the set_theme
in the application_controller.rb
to this:
before_action :set_theme
private
def set_theme
# default to 'dark' if not already set
cookies[:theme] ||= 'dark'
# switch theme if set in the params
cookies[:theme] = params[:theme] if params[:theme].in? ['dark', 'light']
end
And would build the toggle in the navbar
like this:
<% if cookies[:theme] == "light" %>
<%= link_to "Dark Mode", url_for.merge(theme: "dark"), class: "dropdown-item dropdown__list static__text" %>
<% else %>
<%= link_to "Light Mode", url_for.merge(theme: "light"), class: "dropdown-item dropdown__list static__text" %>
<% end %>
Which would render the same page (not the root_path
) but with the changed theme.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论