代码之家 › 专栏 › 技术社区 › lithxe

Rails和SASS:使用相同变量的多个颜色主题-允许用户为帐户选择首选主题

themes sass ruby-on-rails

lithxe · 技术社区 · 7 年前

我想为浅色主题使用一组SASS变量,并为深色主题更改相同的SASS变量。我真的不希望我的CSS中每个主题都有mixin和if语句,这似乎是我迄今为止找到的大多数答案。我的css几乎已经全部写好了,所以如果可能的话,我也不想回去修改一大堆。

我还想让我的用户能够选择他们想要的主题并保存他们的偏好。

2 回复 | 直到 7 年前

lithxe 7 年前

我找到了一个似乎很有效的解决方案。我可以看到,如果你有一堆非常大的主题,这种方法可能不实用,因为它会预编译每个主题。然而,我发现这对我的项目来说是一个很好的解决方案。如果有人发现任何潜在的问题,我很想听听他们的意见,因为我对其中一些问题还是有点陌生,不想违反rails的规则。。。

我的样式表文件夹如下所示:
应用程序/资产/样式表/

_表格。scss公司
_布局。scss公司
_清单。scss公司
_混合器。scss公司
_表格。scss公司
_公用设施。scss公司
light\u主题。scss公司
dark\u主题。scss公司

我将所有组件分离为部分以便于组织。“\u manifest.scss”文件导入我的主题的所有组件。

应用程序/资产/样式表/\u清单。scss公司

// ---------------- Import all CSS components ----------------
@import 'bootstrap';
@import 'utilities';
@import 'layout';
@import 'tables';
@import 'forms';

我做了一个。每个主题的scss文件,顶部有颜色变量,然后导入清单。注意,请使用相同的变量名,以便轻松交换。

应用程序/资产/样式表/light\u主题。scss公司

// ---------------- LIGHT THEME ----------------
// Theme Colors
$light: #f4f3ef;
$medium: #9a9a9a;
$dark: #252422;
$ocean: #36414f;
$accent: cadetblue;
$red: #ed4033;
$orange: #ff8c65;
$yellow: #f4ba58;
$green: #76c29d;
$blue: #65b4c6;

// Import all components
@import 'manifest';

应用程序/资产/样式表/dark\u主题。scss公司

// ---------------- DARK THEME ----------------
// Theme Colors
$light: #d5d6fa;
$medium: #9e9ed6;
$dark: #0d1118;
$ocean: #1f2c44;
$accent: #806df3;
$red: #f24e77;
$orange: #f2a23b;
$yellow: #f2c54a;
$green: #34d07e;
$blue: #2c8fef;

// Import all components
@import 'manifest';

我正在为我的CSS框架使用bootstrap,所以我的大多数特定于颜色的CSS都是通过“btn blue”、“text orange”等类设置的。这样,当我想要切换主题时,我可以筛选和更改的代码就更少了。文本橙色仍将是橙色,仅在深色主题上为亮橙色,而在浅色主题上为淡橙色,这就是为什么简单的变量交换如此必要的原因。

有些元素需要特别调用,所以我也为每个主题使用body类。这允许您进行特定于主题的更改。
应用程序/资产/样式表/\u布局。scss公司

body.light_theme {
    background-color: $light;
    color: $dark;
}

body.dark_theme {
    background-color: $lake;
    color: $white;
}

接下来,我希望我的用户能够设置自己的主题。我创建了一个迁移,在我的Users表中添加了一列:

class AddThemeToUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :user_theme, :string
  end
end

在我的用户表单上,他们可以通过下拉菜单选择主题。您的选择选项在这里很重要,因为名称会变成变量,所以请保持命名一致。
应用程序/视图/用户/\u表单。html。雇员再培训局

<div class="form-group">
  <%= form.label :user_theme, 'Theme' %>
  <%= form.select :user_theme, ['Light Theme', 'Dark Theme'], class: 'form-control' %>
</div>

现在,我在应用程序控制器中设置主题。如果用户登录,则采用其主题设置,否则默认为浅色主题。如果要将user\u主题行添加到 现有的 “用户”表中,请确保在添加以下内容之前运行迁移以在每个用户上设置默认主题,否则会因为该单元格为空而出现错误。或者添加一些代码来检查当前的\u用户。user\u theme为空,然后默认为另一个主题。(可能更好……)
application\u控制器。rb型

class ApplicationController < ActionController::Base

before_action :set_theme

private
def set_theme
  if current_user
    @user_theme = current_user.user_theme.parameterize.underscore
  else
    @user_theme = 'light_theme'
  end
end

end

在布局文件中,我将主题作为类添加到正文中:
应用程序/视图/布局/应用程序。html。雇员再培训局 (布局文件)

<body class="<%= @user_theme %>">
    ...
</body>

您可能会遇到另一个问题,如果出现资产编译错误,请将其添加到 配置/初始化器/资产。rb型 每个主题文件一个。

Rails.application.config.assets.precompile += %w( dark_theme.css )
Rails.application.config.assets.precompile += %w( light_theme.css )

doer123456789 3 年前

因此,现在似乎有一种更简单的方法:

样式表文件夹如下所示:
应用程序/javascript/样式表/

应用scss公司
light\u主题。scss公司
dark\u主题。scss公司

接下来,将首选配色方案添加到应用程序。SCS根据用户的系统首选项(Windows、MacOS、iOS、Linux和Andriod中的设置)为您完成所有工作

应用程序/javascript/样式表/应用程序。scss公司

@media (prefers-color-scheme: light) {
    @import 'light_theme';
}
@media (prefers-color-scheme: dark) {
    @import 'dark_theme';
}

现在,在单独的主题文件中添加主题首选项:

app/javascript/stylesheets/light\u主题。scss公司

background-color: white;
color: black;

app/javascript/stylesheets/dark\u主题。scss公司

background-color: black;
color: white;

就是这样,prefers配色方案完成了所有繁重的工作,无需将任何内容作为首选项保存在数据库中,因为多个用户可能使用相同的帐户,并且需要不同的设置。