split dark/light modes

[maelle]

Fix #36 Fix #6

TODOS

• [x] Make the navbar appear again in light mode!
• [ ] Fix toggle and search icon in light mode https://github.com/quarto-dev/quarto-cli/discussions/8380
• [x] Find a way to make logo dark. SVG? https://github.com/quarto-dev/quarto-cli/discussions/8379 -- with the current answer to me it seems easier to store an SVG in this repo and change colors based on the theme, I'll do that. Update: this did not work as CSS rules don't apply to the included SVG.

[maelle]

I'm a bit stuck here.

@christophsax who could help with

• reviewing the CSS.
• writing javascript to switch the logo image to another one for the dark theme.

[christophsax]

@DivadNojnarg, perhaps you could help here?

[maelle]

@DivadNojnarg at the moment for the light theme we use https://cynkra.com/assets/img/logo_small.svg

Docs of dark theme customization https://quarto.org/docs/output-formats/html-themes.html#dark-mode

Question on Quarto forum https://github.com/quarto-dev/quarto-cli/discussions/8379

[maelle]

Regarding the dark mode toggle, currently invisible in light mode. Using the web dev console I see that it responds to "dark" theme things whereas I am looking at it in light mode?!

[github-actions[bot]]

Summary

Status	Count
🔍 Total	937
✅ Successful	888
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	48
❓ Unknown	0
🚫 Errors	1

Errors per input

Errors in docs/index.html

• [ERR] file:///home/runner/work/cynkrablog/cynkrablog/docs/mountain.jpg | Failed: Cannot find file Full Github Actions output

[maelle]

@DivadNojnarg for info https://github.com/quarto-dev/quarto-cli/discussions/8601

[DivadNojnarg]

@maelle. I am currently checking the branch.

• Is this expected that the card border color is black in dark mode (we don't see it)? For instance I see:

$border-dark-color: rgba($black, .4) !default;
$card-border-color: $border-dark-color !default;

I believe we should have: $border-dark-color: rgba($white, .4) !default;.

• The navbar links are slightly too grey (or not enough white :)) (in my screenshot I also applied white border to cards in dark mode).

This can be set with $navbar-fg: rgba($white, .8); if you don't need full white (see below)

• Blog post navigation color does not match the global theme.

[DivadNojnarg]

@maelle @christophsax. Is this what you expect?

https://github.com/cynkra/cynkrablog/assets/18291543/cb05a026-1fcf-4178-b81d-0a5fee0a07ae

[DivadNojnarg]

What still remain is the look of the navbar dropdown elements to make them in line with cynkra.com (rounded border, hover background color, ...)

[maelle]

@DivadNojnarg regarding the card border, I might have been badly imitating https://cynkra.com/consulting/ where there are no borders, but it looks better with borders indeed.

[maelle]

The logo switch is beautiful :star_struck:

[maelle]

waiting for an answer on https://github.com/quarto-dev/quarto-cli/discussions/8601 before I tweak further

[maelle]

Thanks SO MUCH @DivadNojnarg!!