Forced colors

[EllyLoel]

Just wondering whether the -ms-high-contrast media queries should be updated to forced-colors?

Seems like Microsoft is recommending this:

@media (-ms-high-contrast: active), (forced-colors: active) {}

Along with using the new system colors, I assume something like this would work for fallback (though I haven't tested it):

color: WindowText;
color: CanvasText;

[EllyLoel]

This is a quick and dirty update of the high contrast mode styles to include forced colors following the idea above (again haven't yet had the chance to test that this actually works):

@media (-ms-high-contrast: active), (forced-colors: active) {
  code[class*="language-"],
  pre[class*="language-"] {
    color: WindowText;
    color: CanvasText;
    background: Window;
    background: Canvas;
  }

  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: Window;
    background: Canvas;
  }

  .token.important {
    background: Highlight;
    color: Window;
    color: Canvas;
    font-weight: normal;
  }

  .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
    font-weight: bold;
  }

  .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
    color: Highlight;
  }

  .token.attr-value,
  .token.url {
    font-weight: normal;
  }
}

[ericwbailey]

Hey! Sorry for the late reply here, things have been kind of chaotic for me as of late.

We're sill in the weird in-between period where -ms-high-contrast is still technically applicable. Search for "Here are two tables of the current support landscape" in this post for where we're at.

I've been waffling on what to do, but I like your suggestion of using the new system color stack, and think that's worth the extra bandwidth hit? Does that sound good to you? If so I can update and see about getting releases updated in places where it's consumed.

[EllyLoel]

No stress! I appreciate you taking the time.

I'll admit it's been a while since I've looked at or thought about this, but I think a few extra lines wouldn't hurt too bad in terms of bandwidth but I'm no expert.

[ericwbailey]

@EllyLoel Well, it took awhile but I've got some good news here 😅

I've just pushed up a major release that includes Forced Color Mode support, plus a lot more. Thank you for the nudge, and the idea that kicked this all off!

Do you mind if I mention you and link to your website when I write about the update on my blog?

[EllyLoel]

@ericwbailey wow this is awesome! I don't mind at all, that would be great, thank you.

[ericwbailey]

Amazing! Thank you so much!

[ericwbailey]

@EllyLoel Here's the post! https://ericwbailey.website/published/a11y-syntax-highlighting-has-been-updated/