Skip to main content

Sass mixins for Increased Contrast Mode (and Dark Mode)

Posted in CSS and Development

When I added a high contrast version of my website I used an almost-identical SCSS (Sass) mixin to the one I use for Dark Mode. It’s a riff on the mixin Will Moore from 1Password wrote about in late 2018, and here’s how it looks:

@mixin high-contrast($background: null, $colour: null) {

@media screen and (prefers-contrast: more) {

@if ($background != null and $colour != null) {
background-color: $background;
color: $colour;
@content;
}
@else if ($background != null and $colour == null) {
background-color: $background;
@content;
}
@else if ($colour != null and $background == null) {
color: $colour;
@content;
}
@else {
@content;
}
}
}

This allows us to do any of the following:

  1. Style the text colour only:
    @include high-contrast(black, white);
  2. Style the background only:
    @include high-contrast($background: black);
  3. Style the background and text colour:
    @include high-contrast($colour: white);
  4. Style something other than background and text colour:
    @include high-contrast() {
    border-color: white;
    }
  5. Style the background, text colour and something else:
    @include high-contrast(black, white) {
    border-color: white;
    }
  6. Style the background and something else:
    @include high-contrast($background: black) {
    border-color: white;
    }
  7. Style the text colour and something else:
    @include high-contrast($colour: white) {
    border-color: white;
    }

Pretty handy!

I mentioned I do the same for Dark Mode, and that mixin is almost identical; it’s just the name of the mixin and the media query that’s called that change:

@mixin dark-mode($background: null, $colour: null) {

@media screen and (prefers-color-scheme: dark) {

@if ($background != null and $colour != null) {
background-color: $background;
color: $colour;
@content;
}
@else if ($background != null and $colour == null) {
background-color: $background;
@content;
}
@else if ($colour != null and $background == null) {
color: $colour;
@content;
}
@else {
@content;
}
}
}

The @includes work exactly the same, substituting high-contrast for dark-mode.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.