Working with Bootswatch themes

[andrewpbray]

I've noticed that each of the bootswatch themes have default elements but also variants of navbars and buttons. The sandstone theme, for example, shows three navbars on the bootswatch website.

I went to see which one I'd get out of the box when I use this theme.

website:
  title: "My website"
  navbar:
    left:
      - href: index.qmd
        text: Overview
      - href: schedule.qmd
        text: Schedule
      - href: materials.qmd
        text: Materials
        
format:
  html:
    theme: sandstone

This will give me the top of the three navbars, in dark gray.

This is fine, but I'm digging the softer contrast of the bottom of the three navbar, and am working to figure out the easiest way to create it. When I inspect the source for these, each of them differ in the last two of the four classes that they're assigned.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

This says to me that I want a dark background and will probably need a light foreground too, so I add those navbar options to my YAML.

website:
  title: "My website"
  navbar:
    background: light
    foreground: dark
    left:
      - href: index.qmd
        text: Overview
      - href: schedule.qmd
        text: Schedule
      - href: materials.qmd
        text: Materials
         
format:
  html:
    theme: sandstone

That gets part of the way...

... but isn't quite there. The active page (overview) is the wrong color, as is the hovered over link (materials).

I can create a custom.scss file and tinker with promising sounding Sass variables like $navbar-default-link-hover-color and $navbar-default-link-active-color, but I was wondering if there was a more systematic way to do this.

More generally, I'm also wondering from a design perspective how you've decided which variables to make accessible with YAML options.

Thanks!

[dragonstyle]

Hi - thanks for the great write up. A couple of thoughts:

• We generally settled on supporting just a single navbar color for the various bootswatch themes (versus allowing the specification of dark, light, and so on). In the end, we felt the complexity of the dark and light variants, especially when the further mixing with dark and light overall themes, wasn't worth it. Instead, we actually expect you to do exactly what you are doing, and just use yaml or scss to set the color you'd like.

• In this case, when you set that background color on the navbar, we should be attempting to generate an acceptable contrast color for the navbar elements, though clearly that isn't working at all in this case. I'll take a look at why and update here. Hang on while I see if this is just a bug that shouldn't require any more changes on your part...

• As far as what we ultimately make accessible in YAML, I'd say that we started with a handful of values that we thought would be frequently used and could be represented easily. We have in mind to continue to expand the list of supported values, but want to see how people use the various yaml options vs. go straight to using SCSS which is more powerful though harder to get started with before we exposed even more. Skipping to scss themes really provides a lot more power...

I'll post an update here, thanks for reporting this!

[dragonstyle]

This was just a bug (fixed here: 5f760c5). We weren't properly recomputing the highlight color when you overrode the navbar-bg for some themes. This fixes that (a release with the fix should be available in a few minutes). Thanks for reporting this!

[andrewpbray]

Hey terrific!

This doesn't look quite like the original bootswatch navbar (active font is more green? normal link font is darker?) but it's dang close and plenty readable.

That's really helpful to read about your process for determining which scss options to make available to YAML. Right now I don't have a have a clear distinction in my mind about which I'd expect to find in YAML and which I'd expect to have tinker with in scss
, but I'd guess that will start to solidify the more that I work in this format. It does bring up interesting big picture ideas about what YAML and scss are trying to do. Is YAML just a greatest hits of what can be done in scss + other non scss stuff or is it categorically different? Thoughts to ponder...

Thanks for your help on this!