Style/custom dark theme

[stvmachine]

Preview

https://stvmachine.github.io/osv.dev/quickstart/

Description

Using a dark theme for the docs as a starting point. Just-the-docs come with a default dark theme.

The updates:

• General styles have been updated. More information on the Figma updates: https://www.figma.com/design/Yi1nd5v6iR406zngmscSD3/Open-Source-Vulnerability-(OSV)-Scanner?node-id=0-1&t=ca4V36K9Cf8KrG4O-0

• The logo has been updated

Figure 1: Updated logo.

• Code snippet highlight has been updated: Using native due to the default dark theme having issues with comments on JSON due they are recognized and styled as errors. The code snippets can be changed to any other pygment theme as long we have the scss file.

Screenshots

[another-rex]

The colours seem a bit off, specifically I think the background colour should match the background of OSV.dev / figma design.

[stvmachine]

The colours seem a bit off, specifically I think the background colour should match the background of OSV.dev / figma design.

Yeah, you are right. My mistake, I made some assumptions in terms of black/white. I double-checked some of the visible styles on Figma versus the updates and at least those should match now.

Styles for tables, search input & search results, code snippet styles are not covered by Figma and unfortunately, I just went with defaults plus this solarised dark theme for code highlight.

[another-rex]

I'm not a big fan of the solarized-dark code theme, on our blog pages we use the chroma 'native' theme: https://xyproto.github.io/splash/docs/native.html

It looks like there's a scss version of it here: https://github.com/dwayne/sass-pygments/blob/master/styles/scss/native.scss

Can you try using that instead?

As for the search input, using the same background colour as the main page (#2A2A2A) should be fine, as the entire background darkens anyway when the search is selected.

[stvmachine]

I'm not a big fan of the solarized-dark code theme, on our blog pages we use the chroma 'native' theme: https://xyproto.github.io/splash/docs/native.html

It looks like there's a scss version of it here: https://github.com/dwayne/sass-pygments/blob/master/styles/scss/native.scss

Can you try using that instead?

As for the search input, using the same background colour as the main page (#2A2A2A) should be fine, as the entire background darkens anyway when the search is selected.

Updates:

• Search-input background-color changed to #2A2A2A
• Updated table background-color. Preview. I came up with the lighter version after doing some math similar to the default gradient. Let me know if the darker version works for you. I used scss primitives (darken/lighten) and color base #2a2a2a e.g. $table-background-color: lighten($new-body-background-color, 5%);

✅ Lighter version (on use)

🔴 Dark version (not used)

• Replaced code snippet with native. Updated screenshot at top but can share here as well
  

[another-rex]

Looks great! Happy with the light background version for tables

[joshbuker]

The colours seem a bit off, specifically I think the background colour should match the background of OSV.dev / figma design.

Yeah, you are right. My mistake, I made some assumptions in terms of black/white. I double-checked some of the visible styles on Figma versus the updates and at least those should match now.

Styles for tables, search input & search results, code snippet styles are not covered by Figma and unfortunately, I just went with defaults plus this solarised dark theme for code highlight. Not sure, how to iterate over this work more than involve more @joshbuker and relay on his input 🙏🏼

Did you mean to ping me?

[another-rex]

Did you mean to ping me?

Ah sorry, I don't think so, we have someone with the same name internally and @ is getting confused.

[another-rex]

@stvmachine I just realised that the background color of OSV.dev is actually #292929, can you see if you can update the 2A2A2A to 292929? Thanks!

[another-rex]

osv.dev also uses the Overpass font, can you also try switching from the current roboto font to overpass and see how that looks?

[another-rex]

Thanks, just need to rebase/merge this from master and we should be good to merge.

[another-rex]

I think the font is still incorrect, we need to specify the font used in the CSS as well. Also please merge in the master branch to get the PR check to pass.

[another-rex]

We also need to set this font in the CSS, not just adding the resource. I believe it defaulted to roboto because that's the default system font.

[oliverchang]

Friendly ping on this @stvmachine @G-Rath