CODEWITHSUNDEEP
htmlcsswindowsfirefoxthemes
Christian
Christian

Reputation: 327

Windows 7 High contrast theme overrides website colors in Firefox

I have a website that is used to control a custom device. In this table you click on a cell and the color is send to the device using javascript.

<table style="width:100%;" id="ColorTable">
<tr>
    <td style="background-color:#FF8080;"><br/><br/></td>
    <td style="background-color:#FFFF80;"><br/><br/></td>
    <td style="background-color:#808000;"><br/><br/></td>     etc.

Unfortunately, on the Windows 7 computer that controls the device the High Contrast theme #1 is active (sigh), because the customer wants it that way.

Windows XP used to ignore websites when changing the theme, but Windows 7 appears to override the stylesheet information of websites in Firefox. When loading the website the cells appear black and upon clicking they send #000000 to the device.

Google Chrome displays the colors unchanged. Internet Explorer does not.

Is there a way to ..

..tell firefox/websites to ignore windows 7 themes?

.. tell windows 7 themes to leave websites alone?

Changing Compability settings and firefox color settings did not work.

Help is much appreciated!

Upvotes: 4

Views: 2390

Answers (3)

Leo
Leo

Reputation: 10813

I've just encountered this issue in Windows 10.

What worked for me and may work for you is:

about:preferences#content → Colors...

Then changing Override the colors specified by the page with your selections above: from Only with High Contrast themes to Never.

Firefox High Contrast Colours

(I'm using the GreyEveTheme FINAL- Windows 10 High Contrast Theme)

Upvotes: 1

Dylan
Dylan

Reputation: 505

There's a bug on Bugzilla regarding this issue.

Here's my workaround. Add this to the <body> :

<div class="high-contrast-test"></div>

Add this CSS:

.high-contrast-test {
    width: 0;
    height: 0;
    background-image: url('#');
}

Use this JavaScript:

$(document).ready(function () {

    // detect high contrast mode to deal with firefox bug
    // .high-contrast-test has a background-image,
    // if there is no background-image we are in high contrast mode
    // https://bugzilla.mozilla.org/show_bug.cgi?id=452800
    if ($('.high-contrast-test').css('background-image') === 'none') {
        if ($('.Container').css('background-color') === 'rgb(255, 255, 255)') {
            $('html').addClass('hc-black-on-white');
        } else {
            $('html').addClass('hc-white-on-black');
        }
    }
});

Then you can use CSS paths to override the HC mode CSS.

Upvotes: -1

Fireproofjeans
Fireproofjeans

Reputation: 27

I know this was asked ages ago, but I'll answer this in case anyone else was running into the same issue I had.

Hi-Contrast themes are there for usability, much like brail on signs or slopes instead of stairs. Many programs like Skype and Firefox check for this and alter their visuals to match.

If you just like the look of the contrast themes, choose the classic theme and tweak the settings until they match the theme of your choice.

Upvotes: 1

Related Questions