Custom style not taking precedence over themes

New To Observable
1

I am new to Observable and am creating my first site with Framework. My custom-style.css file is not taking precedence over themes. I am trying simple things: font changes, color changes, body text width.

The only changes I’ve made to the config file are:

theme: [“air”, “wide”],
styles: [“/custom-style.css”]

And in the custom-style.css file:

@import url(“observablehq:default.css”);
@import url(“observablehq:theme-air.css”);

:root {
–theme-foreground-focus: green;
}

It was working in part (font size, colors, but not body width), but isn’t any more.

I’d love help on this.

2

Hi John. We just spoke, but I wanted to make sure this is answered here also. The syntax for the config is:

style: "custom-style.css"

(singular, and not an array).