Support OS level styling

[chrisguindon]

This request is from Eclipse Bugzilla:

Bug 549815 - Eclipse Website / Eclipse Project News do not respect OS level styling:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=549815

solstice-assets should support OS level styling:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[Linus-CS]

@chrisguindon where am I supposed to add the css in solstice-assets?

[chrisguindon]

@Linus-CS you can start by creating a new file in the components/quicksilver folder:
https://github.com/EclipseFdn/solstice-assets/tree/master/less/_components

[BeckerWdf]

Any progress here?

[Linus-CS]

Hi @BeckerWdf I will continue here now.

I had a call with Christopher a while ago, he showed me where the source-code of the website was located. Unfortunately I couldn't find it anymore and wanted to ask if you could give me the source of the site (https://www.eclipse.org/eclipseide/2019-12/noteworthy/), as I am currently struggling to implement OS level styling in solstice-assets with less. I am trying to get my head around it. That would help me a lot.

[chrisguindon]

Hi @Linus-CS!

You can find the git clone url for eclipse.org/eclipseide/ on this page:
https://git.eclipse.org/r/#/admin/projects/www.eclipse.org/eclipseide

This is a PHP site, it might be easier for you to copy the HTML of https://www.eclipse.org/eclipseide/2019-12/noteworthy/ and work with that!

Please let us know if you have any questions!

[Linus-CS]

@chrisguindon I have another question. Want to know if I understand the process correctly.

The styles.less from solstice asserts, which imports all the less files, is compiled into a styles.css, that is used as stylesheet for the site? So if I create a less file containing the prefers-color-scheme media feature and add that as an import to the styles.less in quicksilver, it should be possible to compile the file to a css file and use that on the website. Right?

[chrisguindon]

@chrisguindon I have another question. Want to know if I understand the process correctly.

The styles.less from solstice asserts, which imports all the less files, is compiled into a styles.css, that is used as stylesheet for the site?

Correct. This is defined here:
https://github.com/EclipseFdn/solstice-assets/blob/master/webpack.mix.js#L20

$ npm install #install dependecies
$ npm run production #compiles the CSS defined in webpack.mix.js

So if I create a less file containing the prefers-color-scheme media feature and add that as an import to the styles.less in quicksilver, it should be possible to compile the file to a css file and use that on the website. Right?

Correct!

The goal is to change the styles of the site depending of OS level Theme settings.

We should consider the default colors appropriate for the light theme since the background color is white or a light gray.

With this said, we need to add support for the dark mode/theme.

To get us started, let's create a new file in https://github.com/EclipseFdn/solstice-assets/tree/master/less/quicksilver called dark-theme.less and make sure that this file is @imported from https://github.com/EclipseFdn/solstice-assets/blob/master/less/quicksilver/styles.less.

Now you will simply need to create the styles for this new dark-theme in the dark-theme.less.

For example, I would start with something like:

@media (prefers-color-scheme: dark) {
  body{
      color: #fbfbfb
      background-color: #020202;
  }
}

Please make sure to create variables for these colors in this file:
https://github.com/EclipseFdn/solstice-assets/blob/master/less/quicksilver/_variables.less

We might need to alter these colors across our different sites.