将Ruby on Rails中的暗黑主题设置为默认主题。

huangapple go评论68阅读模式
英文:

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
&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;title&gt;CollectiverseForum&lt;/title&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
    &lt;%= csrf_meta_tags %&gt;
    &lt;%= csp_meta_tag %&gt;
    &lt;%= stylesheet_link_tag &quot;application&quot;, &quot;data-turbo-track&quot;: &quot;reload&quot; %&gt;
    &lt;%= javascript_include_tag &quot;application&quot;, &quot;data-turbo-track&quot;: &quot;reload&quot;, defer: true %&gt;
  &lt;/head&gt;

  &lt;body class=&quot;&lt;%= cookies[:theme] %&gt;&quot;&gt;
    &lt;%= render &#39;shared/navbar&#39; %&gt;
    &lt;%= render &quot;shared/flashes&quot; %&gt;
    &lt;%= yield %&gt;
  &lt;/body&gt;
&lt;/html&gt;
/application_controller.rb
def set_theme
  if params[:theme].present?
    cookies[:theme] = &#39;dark&#39; #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 
&lt;% if cookies[:theme] == &quot;light&quot; %&gt;
   &lt;%= link_to &quot;Dark Mode&quot;, root_path(theme: &quot;dark&quot;), class:&quot;dropdown-item dropdown__list static__text&quot; %&gt;
&lt;% else %&gt;
   &lt;%= link_to &quot;Light Mode&quot;, root_path(theme: &quot;light&quot;), class:&quot;dropdown-item dropdown__list static__text&quot; %&gt;
&lt;% end %&gt;

答案1

得分: 2

我会假设将darklight设置为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 &#39;dark&#39; if not already set
  cookies[:theme] ||= &#39;dark&#39;      

  # switch theme if set in the params
  cookies[:theme] = params[:theme] if params[:theme].in? [&#39;dark&#39;, &#39;light&#39;]
end

And would build the toggle in the navbar like this:

&lt;% if cookies[:theme] == &quot;light&quot; %&gt;
  &lt;%= link_to &quot;Dark Mode&quot;, url_for.merge(theme: &quot;dark&quot;), class: &quot;dropdown-item dropdown__list static__text&quot; %&gt;
&lt;% else %&gt;
   &lt;%= link_to &quot;Light Mode&quot;, url_for.merge(theme: &quot;light&quot;), class: &quot;dropdown-item dropdown__list static__text&quot; %&gt;
&lt;% end %&gt;

Which would render the same page (not the root_path) but with the changed theme.

huangapple
  • 本文由 发表于 2023年6月19日 15:55:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76504655.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定