Keep Safari in Light mode while Mac is in Dark mode

Question

Level 1

54 points

Keep Safari in Light mode while Mac is in Dark mode

Hi there,

Is there a way to get Safari to default to light mode on all websites while Mac is set to dark mode?

Is there an app that will switch off the dark mode feature for Safari? I use NightOwl that can get an app to be light mode with the Mac in dark mode but Safari is unsupported for this.

I already have Nightshift, NeoNoir, DarkMode apps but these don't have an option to go into light mode for safari, only dark mode for web pages.

Is there an app that can be used that will get Safari to display all pages in light mode when I have dark mode set on my Mac, and will give me an option to set specific web pages to dark mode?

Thanks

MacBook Pro 13″

Posted on Oct 20, 2024 6:56 AM

Reply

Answer 1

Oct 20, 2024 8:10 AM in response to Maz K

Websites can use certain HTML/CSS3 styling that help the browser automatically detect and adapt to the macOS appearance mode. You have no control over websites that do this.

I run in Dark mode and ordinarily, except for the first paragraph, my browser is using light appearance mode and blinding me… over long periods of usage. To counter this, I use the Mac App Store Noir Safari extension that allows me to determine which web pages appear dark and others that remain white. I don't know if this would override the websites that fall into the first paragraph category, or if they would sustain their dark appearance.

The code that might be used in paragraph one, and you can test this in a browser by changing the macOS appearance mode in System settings is:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Appearance Mode Detection Demo</title>
    <style>
        @media (prefers-color-scheme: light) {
            body {
                color: black;
                background-color: white;
            }
        }
        @media (prefers-color-scheme: dark) {
            body {
                color: green;
                background-color: black;
            }
        }
        p {
            position:fixed;
            top:100px;
            left:100px;
            font-family: -apple-system, sans-serif;
            font-size:1.4em;
            font-weight:700;
        }
    </style>
</head>
<body>
   <p>Sample Text for Appearance Change.</p>
</body>
</html>

Reply