Lightweight dark mode

[anthonyringoet]

Added a lightweight dark mode. Can certainly be improved, only used some CSS overrides.

Checklist

• run npm run test and npm run benchmark
• tests and/or benchmarks are included
• documentation is changed or added
• commit message and code follows Code of conduct

[anthonyringoet]

Linking to #79

[anthonyringoet]

[StarpTech]

I'd prefer a solution with css variables

@media (prefers-color-scheme: dark) {
	:root {
	  --main-bg-color: dark;
	}

}

[anthonyringoet]

This is possible for the custom CSS like overriding body background. To override the third-party CSS (eg. Bulma panel and card) you'll still have to overwrite the imported rules afaik. Bulma supports customization but only at compile time with SASS variables afaik.

Is that what you're aiming for here?

[StarpTech]

I agree but did you try this

// create css variables
$black_value:        hsl(0, 0%, 4%) !default;
// assign css property to bulma variables
$black:         var(--color-black);


// Framework code will work with css property notation
div {
  background-color: #{$black};
}
// Framework code end

// Create css variables
:root {
  --color-black: #{$black_value};
}

produces

div {
  background-color: var(--color-black);
}

:root {
  --color-black: #0a0a0a;
}

this should work as long as no other transform functions are applied on $black

[mcollina]

lgtm

[zekth]

@anthonyringoet could you rebase it and land this? Also we might want a switch for light/dark theme in the future

[anthonyringoet]

@zekth rebased the changes from upstream, feel free to check again

[zekth]

@StarpTech can you recheck it?

[anthonyringoet]

@StarpTech @zekth No need to waste your time rechecking it. FYI, only had time to rebase and check these incoming changes. Did not have the time to add the requested changes.

[Eomm]

Closing for https://github.com/fastify/website-next