Skip to content

Fix Forms, Buttons, Inputs for custom Windows MSStyle Theme by steffandonal

Details

Authorsteffandonal

LicenseNo License

CategoryGlobal

Created

Updated

Size2.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This user style fixes the styling of all controls & form elements on all pages when using a custom Windows theme.

  • Chrome controls dark, unreadable text
  • Button text unreadable chrome windows
  • Browser styles broken for custom msstyle and uxtheme

Notes

The Short Version

Your browser inherits Windows colors, despite not being standard behavior, and uses those colors to style button and form elements. Web developers don't realise that those colors aren't, in fact, static, so your custom Windows theme will make some websites look broken.

Here's a fix for that problem!

  • As a fun little bit of personal taste™️, I have also incorporated your Windows accent color into these styles. If you don't see it, get the tool "AccentColorizer". This will update whenever you change your accent, too! If you like having your accent color change whenever your wallpaper does, you'll like this style.
  • Websites that use the new color-scheme: dark property should not be affected by this style. Chromium browsers actually will ignore system colors when using this property, so not only will there be no ugly styles, but it's also not possible to get your accent color. If you notice "default blue" styles on a website, this is probably why.
  • I've tried my best to write these styles to not interfere with any "custom" styles where possible, but unfortunately, there is only so much you can do with CSS alone. A proper solution would use JavaScript.

The Long Version

For whatever reason, Chromium browsers still inherit colors from the Windows "SysColors" list. This is weird because, as far as I can tell, browser vendors have been encouraged to normalize colors cross-platform for a very long time now.

If you happen to be an "enterprising themer", you may have installed a custom MSStyle theme on modern Windows and run into an issue where some buttons/inputs/controls are now either very ugly or completely unreadable. Chromium browsers style all HTML form elements using "CSS2 Named System Colors", so they will inherit changes from the system.

Very few websites consider that the "user agent styles" might not be in light mode and don't override button/input styles properly. Worse, sometimes they'll override only the text color of an element.

Most end-users never run into this problem, so it's unlikely to get fixed, nor is it worth petitioning developers to "be more considerate".

Anyway, I spent far too long trying to figure out if there was any other way of fixing this issue and finally decided that writing a bit of CSS would be fine.

As I've written above, I discovered that you could use the Windows accent color in Chrome by using a tool called "AccentColorizer", which adjusts the SysColors list to update all of the "default blue" colors on your system to match your accent. Turns out CSS2 defines a bunch of "named system colors" that inherit color definitions from the operating system. Finding anything about these is difficult as they are officially "deprecated", but they do still work fine. So, this is all thanks to the Highlight CSS color!

As an "enterprising themer" myself, I wanted to use this color everywhere, but ran into a weird issue on Google search and GitHub where my accent color seemed to be replaced with "default blue". Digging into this (read: a couple hours sifting through Chromium source code), I found that it was caused by the new color-scheme property. When set to "dark", the system colors are ignored and replaced with variations on the Chromium defaults. This behavior is hard-coded and cannot be changed. Technically, you might be able to hack the "high contrast" mode to force Chromium to use system colors, but that will have other side effects that are, IMO, not worth it. Honestly, the fact that the accent color even makes its way into Chromium in the first place was a shock to discover, so I anticipate that this will one day stop working.

The only future-proof way to get the system accent color into websites is to implement a desktop application that queries the color and hands it to an extension running in the browser. Well, that'll work for as long as Google doesn't remove extensions 😛

Thanks for reading!

Source code

/* ==UserStyle==
@name           Fix custom Windows MSStyle Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    This user style fixes the styling of all controls & form elements on all pages when using a custom Windows theme.
@author         Steffan Donal
==/UserStyle== */

@-moz-document regexp(".*") {
    ::selection {
        color: Menu;
        background: Highlight;
    }

    * {
        accent-color: Highlight;
        outline-color: Highlight;
    }

    :where(button),
    :where(input),
    :where(input)::-webkit-file-upload-button
    {
        appearance: none;
        padding: 2px 7px;
    }

    :where(input)[type="color" i]
        { padding: 0px 2px; }

    :where(input),
    :where(select),
    :where(textarea)
    {
        color: #000;
        background: #fff;
        border: 1px solid #767676;
        border-radius: 3px;
    }

    :where(input):-webkit-autofill,
    :where(input:hover):-webkit-autofill, 
    :where(input:focus):-webkit-autofill,
    :where(select):-webkit-autofill,
    :where(select:hover):-webkit-autofill,
    :where(select:focus):-webkit-autofill,
    :where(textarea):-webkit-autofill,
    :where(textarea:hover):-webkit-autofill,
    :where(textarea:focus):-webkit-autofill {
        outline: 1px solid InactiveCaption !important;
        outline-offset: -1px !important;
        -webkit-text-fill-color: InactiveCaption !important;
        box-shadow: 
            0 0 0 3px Highlight inset,
            0 0 0 1000px #fff inset !important;
    }

    :where(input)[type="radio" i],
    :where(input)[type="checkbox" i],
    :where(input)[type="range" i],
    :where(input)[type="file" i]
    {
        appearance: auto;
        padding: inherit;
        color: inherit;
        background: inherit;
        border: inherit;
        border-radius: inherit;
    }

    :where(button),
    :where(input)[type="button" i],
    :where(input)[type="reset" i],
    :where(input)[type="submit" i],
    :where(input)[type="color" i],
    :where(input)::-webkit-file-upload-button
    {
        color: #000;
        background: #efefef;
        border: 1px solid #767676;
        border-radius: 3px;
    }

    :where(button:hover),
    :where(input:hover)[type="button" i],
    :where(input:hover)[type="reset" i],
    :where(input:hover)[type="submit" i],
    :where(input:hover)[type="color" i],
    :where(input:hover)::-webkit-file-upload-button
        { background: #e5e5e5; }

    :where(button:active),
    :where(input:active)[type="button" i],
    :where(input:active)[type="reset" i],
    :where(input:active)[type="submit" i],
    :where(input:active)[type="color" i],
    :where(input:active)::-webkit-file-upload-button
        { background: #d8d8d8; }
}

Reviews

No reviews yet.