See light/dark mode user counts

[metmarkosaric]

"Is there a way to see light/dark mode user counts?"

Update: Custom properties for pageviews make the collection of insights like these possible https://plausible.io/docs/custom-props/for-pageviews

[ukutaht]

Would be cool to add and it should be possible.

Main worry is that a large part of our users probably don't care about this. Maybe as an optional add-on?

[metmarkosaric]

would be cool as an add-on especially if it adds weight to the script.

it would be a useful insight to be able surface even for those who don't offer a dark theme. something like "27% of your visitors in last 30 days have shown a preference for a dark theme". seems like an actionable metric if we could somehow count the "prefers-color-scheme" option in the browsers

question is how to present it nicely so it fits and we don't have to add any new report to the dashboard

[Vigasaurus]

I think having it under Devices is for sure the easiest and most logical way. Just have a Dark Mode section there, and it can show 4 items, as two separate subsections:

• Chose Dark Theme
• Chose Light Theme
• OS Prefers Dark Theme
• OS Prefers Light Theme

The latter two can be pulled from the media query, for sure. The question becomes how you want to track the first two though; I could see something like data-theme being useful, especially with how many various ways there are for developers to assign and save dark mode preferences - but that brings another question of when we'd want to save the theme selection from that input - as odds are on page-load/plausible-load, a user's settings aren't done loading in most instances that aren't server-rendered.
Alternatively, if we allow the developer to fire off a pseudo-custom event that gets handled more natively, i.e. plausible('darkThemeChoice', true) - and then we assign that to the first two metrics automatically as opposed to a normal event - but again, that seems counterintuitive for a developer unless they truly read the docs/there is a placeholder similar to Search Console there.

[matfantinel]

I'd like to add that when this is implemented, other similar metrics could be added as well, like prefers-reduced-motion.

[LinusGeffarth]

Maybe if you made this a bit more generic, it could serve as a kind of A/B testing. Light & dark is also A/B sort of...
So there would need to be a way to mark visitors as group A or B.

[jsm350]

Add "Theme" as a custom property and add this script after the Plausible script to track device light/dark preference page views. Works like a charm.

<script>
    window.onload = function () {
        if (typeof plausible === 'function') {
            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

            if(isDarkMode) {
                plausible('Dark Mode', { props: { 'Theme': 'Dark' } });
            } else {
                plausible('Dark Mode', { props: { 'Theme': 'Light' } });
            }

            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                const newColorScheme = event.matches ? 'Dark' : 'Light';
                plausible('Dark Mode', { props: { 'Theme': newColorScheme } });
            });
        } else {
            console.error("Plausible function not defined.");
        }
    };
</script>

[metmarkosaric]

Custom properties for pageviews make the collection of insights like these possible https://plausible.io/docs/custom-props/for-pageviews