Syna theme: switch to dark mode

Using Themes
1

I like to use the Syna theme in dark mode.
I can easily change the colour classes in the config.toml file. But that won’t affect the font colors for t.ex. headings.

Should I set these in the _varianbles.scss file? I found a lot of variables in there set to default like
$headings-color: null !default;
Where can I set these default values? Or is there a better way to change the whole color palette?

Thanks, Chris

2

There is a link toy stales config, must read this … I don’t use SYNA theme

3

I read both Supported colors and the
style documentation

Syna is using Bootstrap v4.1 with a customized set of colors. You can change these colors by editing them in config.toml . Change other Bootstrap variables using assets/styles/bootstrap/_variables.scss . Syna customizes some parts of the theme via custom css, which is available in the assets/styles directory.

That is where my questions came from.

4

BACKUP AND CHANGE

assets/styles/bootstrap/_variables.scss

5

I will give it a try.

Where can I find the definitions for default values lie this:
$headings-color: null !default;

Sure I can set the headings-color right there. But wouldn’t it be easier to just change the default values?

6

Hey Chris,

as I understand it, since bootstrap’s documentation says:

Every Sass variable in Bootstrap 4 includes the  `!default`  flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the  `!default`  flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

Here’s an example that changes the  `background-color`  and  `color`  for the  `<body>`  when importing and compiling Bootstrap via npm:

Copy

```
// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";
```

Repeat as necessary for any variable in Bootstrap, including the global options below.

My understanding is that you just redefine the headings-color value, either at the top of the sass file, or in a file imported before the bootstrap ones. The way I read the code,

$headings-color: null !default;

tells bootstrap that headings-color by default has no particular value, and it will therefore display black, but will be overridden by any prealable or subsequent definition thanks to the !default flag.