Dark mode tweaks

[srawlins]

After trying out Dark mode locally, @mit-mit has some good suggestions:

• [ ] the colors look a bit off compared to our standard colors on other sites; can we update the color palette to match?
• [ ] the dark/light toggle takes up a lot of space. could it just be a single icon button that toggles between a filled sun and a hollow sun?

[srawlins]

@parlough do you have links for the color scheme of other Dart or Flutter properties for Dark mode?

[srawlins]

@klr981 What do you think of the single icon toggle idea? No rush to implement.

[keertip]

@srawlins , @mit-mit, the colors were taken for the Dart pad palette.

[parlough]

DartPad is currently the only other site with a proper dark mode: https://github.com/dart-lang/dart-pad/blob/master/lib/scss/colors.scss

Other than that, I'm not aware of any well-defined dark mode color scheme, but @johnpryan may have referenced one when working on the current DartPad design.

The homepage styles for dart.dev may be a useful reference as well: https://github.com/dart-lang/site-www/blob/main/src/_sass/_dash.scss

[johnpryan]

The design resources recently moved over to Figma. I'll forward the link to this group.

[mit-mit]

@srawlins , @mit-mit, the colors were taken for the Dart pad palette.

Alignment with DartPad sounds great, but there are a number of inconsistencies based on inspection of the current dartdoc and dartpad. Here's a few things I spotted:

• General background (for both docs and code) is #0F161E but should be #10161E

• Source code is in particular hard to read, with very low contrast between the dark background and the dark blue code font. Compare these two screenshots:

[mit-mit]

@keertip @klr981 was my comment above useful to explain the issue i'm seeing?

[klr981]

@keertip @klr981 was my comment above useful to explain the issue i'm seeing?

Yes! it was helpful, thank you for the feedback 😄. I am currently finishing some changes for the search and will address the colors for dark mode.

[klr981]

@mit-mit I am able to change the background color for the code and the docs.

For the code itself it can't be changed as easily to look like the second screenshot you sent. Since the docs only have some of the code parts specified, this will mean only some things can be changed to a specific color others things would have the same color even if it is not the same type.