Question

我想为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);

Answer 1

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

// Colors Settings

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

应该是这样的：

// Colors Settings

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

关于更改背景颜色，我认为你必须在app.scss中执行此操作，我所做的是将其他颜色设置添加到我的settings.scss文件中，然后在app.scss中使用这些： / p>

// Colors Settings

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

body,html {
    background:$background;
}

Answer 2

你有合适的区域。

如果您查看_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文件的很多不同区域，所以你可以

将$white变量更新为深色并查看其外观
为$dark颜色创建一个新变量，并更新第7行以引用新变量。

基金会黑暗主题

2 个答案: