Add dark theme #102

bmartinez287 · 2023-09-23T17:27:45Z

The Issue

The ddev website does not currently have a dark theme.
The current theme is beautiful but it does hurt my eyes a bit under low light conditions or late at night.

Before

After

How This PR Solves The Issue

This PR adds the tailwindcss dark theme classes to the current components.

Manual Testing Instructions

To test it, set your browser to use a dark mode and then visit the website.
This uses a browser's prefers-color-scheme: dark setting.

…nd the blogs.

rfay · 2023-09-23T19:49:58Z

Thanks for this! I moved it to "draft" until you're ready for Matt to have a look at it. Then you can just change to "Ready for review"

bmartinez287 · 2023-09-23T21:41:37Z

It's ready for review. I checked all the blog posts and the quickstart guide to make sure they look good in both dark and light mode. Let me know if something needs to be tweaked.

mattstein

Wow, thanks for taking this on @bmartinez287! 👏

It looks good—played with it locally and leaving suggestions for maintaining a similar visual balance in dark mode:

Careful with logos, avatars, and brand colors!
Anywhere you’ve got prose, you can use dark:prose-invert for consistency and a canned set of considerations for that text.
Keep borders a little soft.
Include a few missing odds and ends.

Comments on unchanged files:

src/components/Badge.astro should get a softer dark border with dark:border-slate-700.
Those big CTA buttons should probably get brighter on hover; in src/components/CtaButton.astro, try adding dark:hover:text-blue-500 hover:border-blue-500 for the hollow classes on line 11.
You could soften the footer’s border by adding dark:border-slate-700 to line 116 in src/components/Footer.astro.
You could soften the “Get Started” platform tab borders by adding dark:border-slate-700 to each of the label elements. (Ones with for="platform-*" attributes.)
You could soften the repo card’s borders (src/components/RepoCard.astro) by adding dark:border-slate-700 to the wrapping anchor and the div element immediately wrapping the h3.
The “Get Started” tabs’ active state and balance is a little funky (src/components/Tabs.astro). I think the following works better, but see if you agree:
a. Remove the classes modifying these elements from src/styles/global.css.
b. Add dark:text-gray-300 to the &.active { block (line 49).
c. Add dark:text-gray-300 to the span that follows (line 52).
d. Add dark:bg-transparent dark:shadow-slate-900/50 to the .panel { block (line 58).
e. Remove the class that was added to the span element on line ~122.
On the “Newsletter” page (src/pages/newsletter.astro), wrap the one paragraph in <div class="prose dark:prose-invert my-8">. (I cheated and added some vertical breathing room there, too!)
On the “Search” page (src/pages/search.astro), make sure the search input and results are styled intentionally.
a. Add dark:border-slate-700 to the result anchor (line 49).
b. Add dark:text-white to the h2 element.
c. Add dark:text-slate-500 to the div element already having inline-block text-sm font-mono classes.
d. Add dark:bg-transparent dark:border-slate-700 dark:text-white to the #search-keywords input.

mattstein · 2023-09-24T02:56:47Z

src/components/AppLogos.astro

@@ -20,7 +20,7 @@ const logos = [
        logos.map((logo) => (
          <div class="px-12 py-6">
            <img
-              class={["h-12", ...logo.extraClasses].join(" ")}
+              class={["h-12 dark:invert", ...logo.extraClasses].join(" ")}


This is a tough one because this changes colors that definitely won’t conform to several organizations’ brand guidelines. (It’s one thing that kept me from trying to tackle dark mode!)

I’m not sure how to handle that unless it’s on a case-by-case basis:

Platform.sh looks great inverted, and that’s probably acceptable brand-wise.

Tag could probably invert the letterforms and leave the bracket colors.

1x Internet may be able to stay red, or go all white.

i-gelb could leave the yellow dot and invert the text and other strokes.

Agaric may be able to work as-is, or just go all white.

b13 looks great inverted to white, and I would guess that’s fine.

Gizra would probably work in its original color.

Oliver Wand could skip inversion and look normal / not demonic.

Centarro could also skip inversion and work fine.

DrupalEasy looks good inverted, so that’s probably fine.

Redfin Solutions’ text should probably go white, with the logo mark’s color in its original form.

MacStadium’s treatment could work like Redfin Solutions’.

Lullabot’s text could probably be inverted with the logo mark in that red—assuming there’s enough contrast that it reads okay.

Craft CMS can exist in its original form and it’d work great.

undpaul could have only its text inverted to white and that’d probably work well.

This is a pain to solve, so it may be worth separating into a separate issue.

It might be simplest to create additional dark logo assets for each sponsor, and fill GitHub Sponsor bubbles with white since they have a similar issue:

If we have dark-mode-appropriate logos, we might also be able to solve the same problem in the ddev/ddev readme.

I realize it’s not the end of the world, I just try to be careful with the images people and organizations choose to represent themselves.

I added the white background to those logos and the sponsor's logo I worked with each one of them. If the invert would not work I gave them a white background.

src/components/Benefits.astro

src/components/BlogPostFooter.astro

src/components/Footer.astro

src/components/quickstart/CommunityCTA.astro

src/pages/support-ddev.astro

mattstein · 2023-09-24T03:49:46Z

src/styles/global.css

@@ -20,6 +20,43 @@ footer {
  }
 }

+@media (prefers-color-scheme: dark){
+
+  header {


The DDEV logo’s text works great in white, but the current inverted orange should stay blue. This is easier than sponsor logos because the SVG itself could be embedded in the page with IDs used in selectors that change the text color.

That sounds good though the orange would make it easier for others trying to have a dark theme with a DDev logo. Any chance we could adopt the orange as a dark equivalent to the blue? I kind of like the orange as an easier alternative and visual indication we are in the dark theme.

The entire layout being inverted seems strong enough an indication to me that dark mode is active and I wouldn’t recommend altering core brand colors to suit dark mode—but I’d leave that up to @rfay.

The green external link icons are a unique departure too, but I don’t have any objection there.

that's true for ddev.com but on pages where only the logo represents the brand. it could be the dark version of our logo so we don't have the same issue some of the other logos had.

I think we’re describing the same thing! (And most of those sponsor logos could have alternate versions in the same way—need to create the variations but I could either add them here or in a separate PR.)

This is what I’m trying to describe doing with the DDEV logo that doesn’t introduce new brand colors:

This is an optimized SVG for exactly that (no background) if you want to use it:

Could swap the whole thing or be more efficient and select only the text nodes within the SVG.

src/styles/global.css

… needed.

bmartinez287 · 2023-09-24T17:05:58Z

I think I got them all. I went down the list one by one. Let me know when you get a chance. Thanks for such a comprehensive review. It definitely helped speed this along.

mattstein · 2023-09-24T17:57:57Z

I think I got them all. I went down the list one by one. Let me know when you get a chance. Thanks for such a comprehensive review. It definitely helped speed this along.

Thanks for doing that, and sorry it was such a long list. I probably should have made a PR on your PR or something. I’ll have a look again today.

bmartinez287 · 2023-09-24T18:01:11Z

No worries, it was great having so many items to reference all at once.

bmartinez287 · 2023-09-24T18:19:28Z

I added the SVG

bmartinez287 · 2023-09-24T18:22:15Z

So that just leaves two minor details. Hopefully.

In the image below there are a few items that could be improved by getting a dark version of their logo.
Tag1 - Lullabot and I-gelp look ok as they are but they could look better.

By adding the white background to the bubbles below that issue seems fixed to me.

mattstein · 2023-09-24T18:39:42Z

I can follow up with a PR to improve the Featured Sponsors logo handling. The contributor bubbles are a solid win though!

Looked again locally and it seems like a few things are missing unless you decided against them or my suggestions were off:

The “Getting Started” tab panels still use a black underline for the active state, include an awkward background shade, and either remove the drop shadow or use an invisible one:
The blog post paging’s back/previous anchor still has a loud border:
The about page sidebar stats are black:

Otherwise everything looks good to me!

bmartinez287 · 2023-09-24T18:49:13Z

I added a dark version of the SVGs that were hard to read.

mattstein · 2023-09-24T18:56:38Z

I added a dark version of the SVGs that were hard to read.

That’s way better, and I like the approach you took! 👏

I’d probably still make some fine adjustments, but you’ve done most of the work and I’m happy to pick at those myself separately.

bmartinez287 · 2023-09-24T19:09:16Z

It should be ready for review. I got those last fixes in. Let me know if there's anything else.

mattstein

Looks great to me now! Thanks again for tackling this and being quick and diligent with my comments @bmartinez287. 🙌

mattstein · 2023-09-24T19:15:00Z

@rfay Do you have anything to add or should we merge this?

rfay · 2023-09-24T22:08:47Z

Nothing to add! Thanks so much for this @bmartinez287 and thanks so much for caring for it so thoroughly @mattstein !

rfay · 2023-09-24T23:01:25Z

🚀

bmartinez287 added 5 commits September 13, 2023 21:12

ddev darkmode version version 1.

d1e127a

ddev darkmode version version 2.0.

e2b2550

ddev darkmode version version 3.0 fixed bugs with get started pages a…

8adb98a

…nd the blogs.

ddev darkmode 3.1 fixes.

e0adafa

ddev darkmode 3.2 fixes.

f6749ea

rfay marked this pull request as draft September 23, 2023 19:49

Added dark:prose-invert and clean up the code.

5cdae39

bmartinez287 marked this pull request as ready for review September 23, 2023 21:41

rfay requested a review from mattstein September 23, 2023 21:46

mattstein requested changes Sep 24, 2023

View reviewed changes

bmartinez287 added 5 commits September 24, 2023 09:21

Updated darkmode settings part1.

9378bd2

Updated darkmode settings part1.1.

65ef5a7

Updated darkmode settings 1.3

c00f2bb

Updated darkmode settings, tweaked logos individually.

46c6a6d

Updated darkmode settings, removed extra dark:text-white that are not…

71c5202

… needed.

bmartinez287 requested a review from mattstein September 24, 2023 17:06

Added dark ddev logo.

4e52e89

Added dark version of branded logos.

75dc52f

bmartinez287 added 2 commits September 24, 2023 12:56

Fixes about page stats and paging border.

8e5fba4

Fixes The Getting Started tab panels

b745198

mattstein approved these changes Sep 24, 2023

View reviewed changes

mattstein merged commit 1adca41 into ddev:main Sep 24, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dark theme #102

Add dark theme #102

bmartinez287 commented Sep 23, 2023 •

edited

Loading

rfay commented Sep 23, 2023

bmartinez287 commented Sep 23, 2023

mattstein left a comment

mattstein Sep 24, 2023

bmartinez287 Sep 24, 2023

mattstein Sep 24, 2023

bmartinez287 Sep 24, 2023

mattstein Sep 24, 2023

bmartinez287 Sep 24, 2023

mattstein Sep 24, 2023

bmartinez287 commented Sep 24, 2023 •

edited

Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023 •

edited

Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023 •

edited

Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

mattstein left a comment

mattstein commented Sep 24, 2023

rfay commented Sep 24, 2023

rfay commented Sep 24, 2023

Add dark theme #102

Add dark theme #102

Conversation

bmartinez287 commented Sep 23, 2023 • edited Loading

The Issue

How This PR Solves The Issue

Manual Testing Instructions

rfay commented Sep 23, 2023

bmartinez287 commented Sep 23, 2023

mattstein left a comment

Choose a reason for hiding this comment

mattstein Sep 24, 2023

Choose a reason for hiding this comment

bmartinez287 Sep 24, 2023

Choose a reason for hiding this comment

mattstein Sep 24, 2023

Choose a reason for hiding this comment

bmartinez287 Sep 24, 2023

Choose a reason for hiding this comment

mattstein Sep 24, 2023

Choose a reason for hiding this comment

bmartinez287 Sep 24, 2023

Choose a reason for hiding this comment

mattstein Sep 24, 2023

Choose a reason for hiding this comment

bmartinez287 commented Sep 24, 2023 • edited Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023 • edited Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023 • edited Loading

mattstein commented Sep 24, 2023

bmartinez287 commented Sep 24, 2023

mattstein left a comment

Choose a reason for hiding this comment

mattstein commented Sep 24, 2023

rfay commented Sep 24, 2023

rfay commented Sep 24, 2023

bmartinez287 commented Sep 23, 2023 •

edited

Loading

bmartinez287 commented Sep 24, 2023 •

edited

Loading

bmartinez287 commented Sep 24, 2023 •

edited

Loading

bmartinez287 commented Sep 24, 2023 •

edited

Loading