1

我想通过 zurb 为基础创建一个深色主题，具有深色背景和浅色文字。我找不到更改项目设置的方法，所以我一直在编辑生成的 CSS 文件，这并不理想。我希望我可以将 sass 文件编辑为具有深色主题，但我希望有一些我可以做的配置来代替所有这些。

设置文件的相关部分，我不知道如何使背景变暗...

// Colors Settings

// $mainColor: #2ba6cb;
// $secondaryColor: #e9e9e9;
// $alertColor: #c60f13;
// $successColor: #5da423;
// $txtColor: #222;
// $highlightColor: #ffff99;
// $black: #000;
// $white: #fff;
// $shinyEdge: rgba(#fff, .5);
// $darkEdge: rgba(#000, .2);
4

2 回答 2

2

您正在寻找正确的地方。您只需要取消注释这些行，例如：

// Colors Settings

// $mainColor: #2ba6cb;
// $secondaryColor: #e9e9e9;
// $aler...

应该是这样的：

// Colors Settings

$mainColor: #000000;
// $secondaryColor: #e9e9e9;
// $aler...

关于更改背景颜色，我认为您必须将其作为 app.scss 的一部分进行，我所做的是将其他颜色设置添加到我的 settings.scss 文件中，然后在 app.scss 中使用它们：

// Colors Settings

$background:#000000;
$mainColor: #000000;
// $secondaryColor: #e9e9e9;
// $aler...

body,html {
    background:$background;
}
于 2013-01-21T16:00:41.573 回答
0

你有正确的区域。

如果您查看 _global.scss，您可以在第 7 行看到：

body { background: $white; font-family: $bodyFontFamily; font-weight: $bodyFontWeight; font-style: $bodyFontStyle; font-size: ms(0); line-height: 1; color: $bodyFontColor; position: relative; -webkit-font-smoothing: $fontSmoothing; }

基本上背景被设置为$white;

$white然后出现在 scss 文件的许多不同区域中，因此您可以

  1. 将变量更新$white为深色并查看它的外观
  2. 为颜色创建一个新变量$dark并更新第 7 行以引用新变量。
于 2013-01-21T16:08:38.603 回答