{"id":2907,"date":"2024-07-03T10:09:48","date_gmt":"2024-07-03T16:09:48","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2907"},"modified":"2024-11-13T17:54:49","modified_gmt":"2024-11-13T22:54:49","slug":"why-is-this-thing-in-dark-mode","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/why-is-this-thing-in-dark-mode\/","title":{"rendered":"Why is this thing in Dark Mode?"},"content":{"rendered":"\n

I was looking at an email in a web app the other day, and it was showing it to me in “Dark Mode”. The email itself (of my own creation) purposely doesn’t bother to set a background<\/code> or color<\/code> for the most part, as then the defaults kick in which help naturally support both dark and light modes. So I was pleased! It worked!<\/p>\n\n\n\n

\n
\n
\"\"
Email in “Dark Mode” in Front<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Email in “Light Mode” in Front<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

But then I was like… why<\/em> am I looking at this email in Dark Mode? While I was working on the email, it was in Light Mode. I made it using MJML<\/a> and the VS Code Extension which gave me a preview of the email, it was was in Light Mode there, so it looked surprising to me in Dark Mode that first time.<\/p>\n\n\n\n

First I checked my System Settings on macOS to see what was going on there:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Light Mode there, so it wasn’t my system that was forcing Dark Mode. <\/p>\n\n\n\n

Then I checked my browser. I happened to be using Arc, which has Themes. <\/p>\n\n\n

\n
\"\"
That selected option on the left is “Automatic Appearance” which is what some things call “System” meaning match what the OS is doing.<\/figcaption><\/figure>\n<\/div>\n\n\n

Since that was set to “Automatic Appearance” it was following the OS’ Light Mode so that wasn’t doing it (probably). There is also Command Bar shortcuts in Arc. Try typing “Switch” in there to see actions to change it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Other browsers do it differently, but can do it. For example you can “Customize Chrome” from a button on the Start Page in which you can force a theme or set to “Device”. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

But this wasn’t explaining it for me either, as I was Light Mode through both of those layers. <\/p>\n\n\n\n

What it turned out to be was a website-level setting. I was using the email app Front<\/a>. Front has it’s own settings for themes, and in there indeed it was forcing a Dark Mode. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Changing that would change the colors of my email, which is exactly what I was trying to figure out. <\/p>\n\n\n\n

So in terms of power<\/em>, It’s like:<\/p>\n\n\n\n

    \n
  1. Website setting<\/li>\n\n\n\n
  2. Browser setting<\/li>\n\n\n\n
  3. OS\/Device setting<\/li>\n<\/ol>\n\n\n\n

    And those top two typically have an option to allow the setting to fall through to the next level. <\/p>\n\n\n\n

    That’s a lot of stuff to check when you’re trying to figure out what is controlling a color theme! I’m tempted to say too many<\/em>, but when it comes to user control over websites, I tend to be in the camp of giving as much control to the user as possible. That leaves me extra conflicted about adding<\/em> browser level color mode switches<\/a> on a per-side basis, as it will likely lead to a 4-level system of diagnosing what mode is active. <\/p>\n","protected":false},"excerpt":{"rendered":"

    The website has the most control, since that’s what applies the CSS. But browsers also have a Dark\/Light\/System setting, and that can fall through to the OS\/Device.<\/p>\n","protected":false},"author":1,"featured_media":2921,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[81,7,157,195],"class_list":["post-2907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-color","tag-css","tag-dark-theme","tag-email"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/07\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L3Vwd2s2MTcxNjM1NC13aWtpbWVkaWEtaW1hZ2Uta293cXhreG4uanBn.webp?fit=1024%2C712&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2907"}],"version-history":[{"count":9,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2907\/revisions"}],"predecessor-version":[{"id":4417,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2907\/revisions\/4417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2921"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}