Skip to content

This repository explain Github hack for use Prefers Color Scheme

License

Notifications You must be signed in to change notification settings

RodrigoTomeES/prefers-color-scheme-hack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Prefers Color Scheme Hack πŸŒ—

Header of prefers color scheme hack

The prefers-color-scheme is a CSS media feature, it is used to detect if the user has requested a light or dark color theme. This feature only can be used in <style> tag or in js but Github doesn't allow it in READMEs to prevent attacks.

For this reason I searched for a workaround and I found an article of Chris Coyier in CSS Tricks that talk about add custom CSS in a SVG file. With this idea in mind I supposed that it would be possible to use the prefers-color-scheme media feature with this trick, and it worked! πŸš€

Example

I think the best way to see it is with an example, so let's go:

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; height: 100%;">
            <style>
                .example {
                    width: 250px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #EEEEEE;
                    color: black;
                    font-family: sans-serif;
                    font-size: 25px;
                    text-align: center;
                    padding: 15px;
                }

                .example::after {
                    content: 'You are using a light theme';
                }

                @media (prefers-color-scheme: dark) {
                    .example {
                        background: #323232;
                        color: white;
                    }

                    .example::after {
                        content: 'Welcome to the dark side';
                    }
                }
            </style>
            <div class="example"></div>
        </div>
    </foreignObject>
</svg>

Result

Example of use prefers color scheme

Advanced use

This tecnic for use prefers color scheme can be use in proyect like github-readme-activity-graph and you can get a stat image that can change with your them browser preferences. In the case of the github-readme-activity-graph project, I have made an example implementation that you can find here.

Example

Example of advanced use

Limitations

Using prefers color scheme doesn't work as expected in Github apps (android / ios) because they always return the light theme. I don't know if this is a bug of the app or it isn't compatible with this feature.

Resources Used

About

This repository explain Github hack for use Prefers Color Scheme

Topics

Resources

License

Stars

Watchers

Forks