Website Demos Safari Browser's Upcoming Support for Dark Mode CSS in macOS Mojave 10.14.4

Discussion in 'Mac Blog Discussion' started by MacRumors, Jan 28, 2019.

  1. MacRumors macrumors bot

    MacRumors

    Joined:
    Apr 12, 2001
    #1
    [​IMG]


    In the next official update to macOS Mojave, Apple's Safari browser will enable automatic Dark Mode for websites that support it.

    [​IMG]

    Since the release of Safari Technology Preview 68 in October, Apple has been building support for the use of Dark Mode CSS, which can be enabled via its Develop -> Experimental Features menu. The experimental feature has now also made its way into the latest macOS Mojave 10.14.4 developer beta.

    macOS Mojave enables users to switch between Light and Dark mode via System Preferences -> General. With the latest macOS developer beta installed, websites that support the new CSS query will automatically adapt their color scheme to match whichever system-wide option the user has enabled.

    [​IMG]

    As noted by iDownloadblog, developers running the macOS 10.4.4 beta can test out the new feature by visiting software engineer Kevin Chen's website, which already supports the new Safari CSS media query. Everyone else can give it a spin by downloading the latest version of Safari Technology Preview, which can be run alongside vanilla Safari in any version of macOS Mojave.

    Article Link: Website Demos Safari Browser's Upcoming Support for Dark Mode CSS in macOS Mojave 10.14.4
     
  2. twistedpixel8 macrumors regular

    twistedpixel8

    Joined:
    Jun 9, 2017
    #2
    While this is neat, I can’t see it being widely implemented by websites.

    I’m a web dev and I feel like unless this becomes a standard across all browsers, we simply won’t implement designs for it. It’s a further cost to our clients (and a pretty major one in reality) and for a single web browser? A web browser that only runs on a single OS? I doubt many companies will be keen to spend money on this.
     
  3. Kangastu macrumors member

    Kangastu

    Joined:
    Oct 10, 2016
    #3
    I think the Mac / iOS specialist sites (MacRumors / 9to5mac etc) and third party manufacturers that specialise in Apple stuff (twelve south, etc) may do this, but as a web dev myself I second twistedpixel8’s comments - unless it becomes a global “dark mode” standard, uptake of this is going to be slow to non existent.

    Love the idea and the direction.

    Side note: I hope this points to iOS13 having a dark mode!
     
  4. Bustycat macrumors regular

    Bustycat

    Joined:
    Jan 21, 2015
    Location:
    Kaohsiung, Taiwan
  5. netdudeuk macrumors 6502

    Joined:
    Nov 27, 2012
    #5
    Agreed.

    They should start at www.apple.com ;)
     
  6. confusedpurple macrumors member

    Joined:
    Sep 12, 2018
    #6
    As a web dev I will not be supporting this in any way, shape or form. Such an idiotic approach from Apple on this. We spent years trying to get away from vendor lock-ins on the web, and we're on the verge of another one with Chrome already, the last thing we need is this kind of crap.
     
  7. twistedpixel8 macrumors regular

    twistedpixel8

    Joined:
    Jun 9, 2017
    #7
    Which Chrome one are you referring to? I'm terrified I've missed this... things change so fast in Web Dev it's difficult to keep up with everything!
     
  8. nortonandreev macrumors 6502a

    nortonandreev

    Joined:
    Jan 11, 2016
    Location:
    Sheffield, United Kingdom
    #8
    Others browsers will implement support for it as well, eventually. Also, Windows 10 has already got dark theme, so it makes sense for other browsers to have it as well. Chrome and Firefox are already working on it. When it comes to adding support for it and the costs related to it, I think it mostly depends on how big the website is, but for my personal website I added the query for like 5 minutes. I think it is really nice feature and hope to become widespread in near future. Just because you feel like it's "useless", doesn't mean it's the case for everyone else.
     
  9. Fuchal macrumors 68020

    Joined:
    Sep 30, 2003
    #9
    And if your website already has a dark mode, it's just a matter of automatically choosing it as the default.
     
  10. twistedpixel8 macrumors regular

    twistedpixel8

    Joined:
    Jun 9, 2017
    #10
    I don't remember calling it "useless". My point was that it's an additional burden on Web Devs and that translates directly into cost which has to be eaten by someone. And I sure as heck am not eating it.

    Respectfully, if you're happy with implementing Dark Mode as an afterthought, the 5 minute approach will probably suffice. If, however, you do things properly, you need to consider the aesthetics/UX of the site as a whole and make all the same considerations you would when designing the default aesthetics/UX.

    Maybe if the site is extremely basic with 95% of it black text on white background, you'd get away with it. The issue is that if users start to expect all sites to work with Dark Mode, you create a huge problem.
     
  11. GaryMumford macrumors regular

    GaryMumford

    Joined:
    Jul 25, 2008
    Location:
    UK
    #11
    Am I missing something? Kevin Chen says he's just swapped the text and background colours... so why does the green/blue top menu disappear in dark mode?
     
  12. Pakaku macrumors 68020

    Pakaku

    Joined:
    Aug 29, 2009
    #12
    There are websites out there that already offer a dark theme you can switch on or off. I doubt it would be that difficult to automate that switch if the theme is in place already, and I wonder if the complainers here really should be ignoring a feature many people would find useful.
     
  13. twistedpixel8 macrumors regular

    twistedpixel8

    Joined:
    Jun 9, 2017
    #13
    Dark mode is not the problem. Dark mode is a great idea. Nobody is complaining about its existence; we're merely pointing out that this is not a 5 minute job for the majority of websites. I'd somewhat equate this to the pre-responsive era of web design where a completely separate mobile site was typically developed.

    Maybe these "web designers" who use SquareSpace and Wix (I just vomited in my mouth a little) will have no issue because eventually this will be done for them by the stock theme designers. They'll still look trash and be bloated as hell but hey: dark mode "works".
     
  14. theOmega macrumors newbie

    Joined:
    Oct 26, 2018
    #14
    I think this is awesome, not for every website, but often I find myself enabling the reader view in pitch dark to get away from the brightness.

    Most likely dark mode is coming to iOS soon.
     
  15. zeekyr macrumors newbie

    Joined:
    Jan 28, 2019
    #15
    It's actually not that difficult to implement dark mode via some CSS modifications. I say this because instead of putting this on the web developer of each individual site, you can just use an addon like Cascadia and customize the CSS yourself and with existing styles on the web. When I open the New York Times, I see this:

    [​IMG]

    The work to do this is often just the CSS filter invert property applied to various elements.
     
  16. revmacian macrumors 6502a

    revmacian

    Joined:
    Oct 20, 2018
    Location:
    USA
    #16
    I've been looking for something like this to go with dark mode on my 2017 MBP running Mojave. Is this something that the end user can do right now? If so, can you link a tutorial? I used to do web development myself, so I'm comfortable with CSS.
     
  17. justperry macrumors G3

    justperry

    Joined:
    Aug 10, 2007
    Location:
    In the core of a black hole.
    #17
    Hmm, seems like there's a bug in my darkmode....

    Darkmode set, Menu Bar is in darkmode and so is the dock, the rest however.....:confused:

    Screenshot 2019-01-28 at 16.17.52.png
     
  18. zeekyr macrumors newbie

    Joined:
    Jan 28, 2019
    #18
    I'm using these two addons to achieve this affect:

    https://darkreader.org

    No CSS editing is needed for that one.

    https://cascadea.app

    This one lets you customize the CSS of any website further. For example, I used this addon to invert the NYT logo, because Dark Reader didn't automatically do that. It lets you tweak and customize things even more.
     
  19. revmacian macrumors 6502a

    revmacian

    Joined:
    Oct 20, 2018
    Location:
    USA
    #19
    Thank you very much for the information! I'm really hoping that web developers can do this on all websites, or we can get a plugin for Safari that can get it right all by itself without the need to fix what the plugin missed.
     
  20. MacSince1985 macrumors 6502

    Joined:
    Oct 18, 2009
    #20
    It would not be added at the WordPress (app) level, but at the theme level. So it will depend on how many theme designers decide to include it in their theme, which in turn depends on how many browsers support that media query.

    On the plus side, I am happy to see this handled via media queries, which the designer can control, rather than by an algorithm for automatically inverting colors.
     
  21. nortonandreev macrumors 6502a

    nortonandreev

    Joined:
    Jan 11, 2016
    Location:
    Sheffield, United Kingdom
    #21
    I don't see it as a "huge" problem, because if the user wants Dark Mode, it is an additional requirement so you have the right to ask for more money. Saying something will make a problem, just because it is available as an option, is stupid. Because a customer might want basic website, for example, even if you can do something much more advanced using different frameworks and etc. So if a technology exists doesn't imply that it will have to be used all of the time. Having an option available is always good, cuz you if want to use - you can. It doesn't mean you will have to or have to do it for free.
     
  22. palmerc2 macrumors 68000

    palmerc2

    Joined:
    Feb 29, 2008
    Location:
    Los Angeles
    #22
    I’ve used the chrome extension Dark Reader which inverts all colors except photos. It was a dream.

    I now use Brave which I know I can use a chrome extension, but I don’t have any as I know they’re vulnerable to privacy attacks.
     
  23. MacSince1985 macrumors 6502

    Joined:
    Oct 18, 2009
    #23
    It's more a matter of whether the client requests it and is willing to pay for the additional development time. From my experience, clients are fixated on how their site looks like on their device (OS, browser, screen size) and it is hard to get them to consider, let alone pay for, something they don't personally see or use.

    A plugin will never "get it right". At best it can make an educated guess of what colors to substitute (e.g. inverting the luminosity but preserving the hue and saturation). But it won't be able to substitute images with their dark mode optimized counterpart, etc.

    Take for example the MacRumors logo at the top of this page. If you change the background to black, you end up unreadable dark blue "text" on black. If the plugin is smart enough to recognize that the image contains text and inverts it ( {filter: invert();} ), you get a light blue apple with a pink leave and a black core. Certainly not what the designer envisioned. Even if you try to preserve the hue ( {filter: invert() hue-rotate(180deg);} ), the result is pretty ugly.
    --- Post Merged, Jan 28, 2019 ---
    This feature is in the W3C draft using the exact same media query wording Apple is using. It changed a few times during development discussions, but seems to be settled on "prefers-color-scheme". So this will become a standard sooner or later. We're not in the browser war era where each browser added proprietary features. But we still have experimental features in each browser and different adoption rates of standard features.
    https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
     
  24. revmacian macrumors 6502a

    revmacian

    Joined:
    Oct 20, 2018
    Location:
    USA
    #24
    I'm using Dark Reader right now, thanks for the suggestion @zeekyr

    I saw a problem with new tabs being initially white. What I have been doing was to Command+Click on a link to open the link in a new tab behind the current tab (open a new tab in the background). Then when I switched to the new tab it would flash white before Dark Reader had a chance to change the theme to a dark theme. But, I found a way to stop that behavior.

    If I open a new tab behind the current tab (background), then the new tab will be white (unchanged theme) and then quickly switch to the dark theme. This results in a flash of white before the theme is changed by Dark Reader.

    But, if I change the Safari setting to “open a new link and make it active” (this opens new tabs in the foreground), then the new tab starts in dark mode and the flash of white is never seen.

    I feel it may help users to know about this change so that they never experience a flash of white when opening links in a new tab.

    Here is how to make the change for Safari users on macOS Mojave:
    1. Open Safari > Preferences > Tabs
    2. Check the box entitled “When a new tab or window opens, make it active”
    3. Close Safari Preferences and continue using Safari as normal

    I hope this can help someone who is new to dark Reader.
    --- Post Merged, Jan 28, 2019 ---
    Ah, yes, I see what you mean. Thank you for that information. I'm going to play around with the Cascadea app that @zeekyr mentioned and see if I can come up with something to my liking.. I need to amend my habits a bit.
     
  25. macduke macrumors G3

    macduke

    Joined:
    Jun 27, 2007
    Location:
    Central U.S.
    #25
    Just one more thing to add to my pile of work as a web developer and designer. Every year more and more on my plate and no more people to help me. First they wanted everything dynamic. Then they wanted content management systems with databases. Then they wanted responsive for every device display size. Then everything moved towards random frameworks that aren't supported longer than a year and everything breaks all the time. Then there were more large mobile display sizes. Then security became more of a pain, mostly becomes of the content management systems and frameworks. Then they wanted everything accessible. Then there were smartwatch display sizes. Then content management systems started changing on a fundamental level requiring rewrites of huge chunks of code. Then we got this dark mode stuff.

    I've probably forgotten other crap I've had to deal with but these are the main points since I started making sites as a middle school kid in the late 90s and I feel like most of that is in the past 7 years.
     

Share This Page