High contrast option changes all colors to black and white instead of simply increasing contrast

[extesy]

Repro steps:

1. Install extension
2. Enabled "high contrast" option. Set "dark theme" to off or on - it doesn't matter.
3. Everything is black and white, not orange

[gabrielecirulli]

Weird, I just tested the following but it works fine:

1. Remove the extension
2. Install from chrome web store
3. Enable dark theme
4. Disable dark theme

The dark theme gets disabled correctly.

Can you look at localStorage in the HN home page and show us what's there?

[extesy]

Just reinstalled the extension and I still have a dark theme stuck independent of the option value. How do I look into its local storage?

[extesy]

Ok, I found it:

hnspecial-defaults: {"visual_theme":true,"dark_theme":false,"high_contrast":false,"gray_visited_links":false,"infinite_scrolling":true,"open_links_in_new_tabs":false,"highlight_links_when_returning":true,"accurate_domain_names":true,"mark_as_read":false,"sticky_header":false,"user_tooltips":false,"hide_downvote":false}

hnspecial-settings: {"visual_theme":true,"dark_theme":false,"high_contrast":true,"gray_visited_links":true,"infinite_scrolling":true,"open_links_in_new_tabs":true,"highlight_links_when_returning":true,"accurate_domain_names":true,"mark_as_read":false,"sticky_header":false,"user_tooltips":true,"hide_downvote":false}

hnspecial-settings-version: 11

[extesy]

I did some more playing with options and turns out its the "high contrast" option that changes everything to black and white. Previously it just increased the contrast.

[ghost]

I have the same problem. I believe the problem is the combination of Dark theme OFF and High contrast ON, since it works when High contrast is OFF.

[ghost]

Here's the formatted hn_theme_light_contrast.css I see in the Chrome developer tools: https://gist.github.com/bobmichael/a59737558f06de0c1bfdeb43aec91c10

[gabrielecirulli]

Is this what you're referring to?

[ghost]

@gabrielecirulli yep, that's what I'm referring to.

[PxlBuzzard]

Yeah that's the new high contrast theme. I guess we have a different question to ask then: do we 1) make high contrast a modifier to each theme, or 2) should it be its own theme?

I think option 1 is what people are expecting and it makes sense to me.

[extesy]

Yes, it should be (1). Because non-contrast regular theme is way too low contrast, almost unusable, I can barely read anything. But I also don't want black-and-white theme.

[gabrielecirulli]

This should be fairly simple to do by refactoring hn_theme_light_contrast.styl into a more generic hn_theme_high_contrast.styl which just adds some extra styles instead of rendering _theme. The theme could add an extra class to the HTML in order to allow high-contrast to distinguish.

[gabrielecirulli]

For reference, this is what the high contrast light version should look like (taken from an old version):

[extesy]

Yes, this is the color I'd like to see. By the way, I find your definition of "high contrast" a bit strange. The image above is normal contrast and default theme is very low contrast. I'm not sure what monitor setup do you have, but default colors make the text very hard to read. Please apply these guidelines: http://webaim.org/blog/wcag-2-0-and-link-colors/

[gabrielecirulli]

Fair point. The default theme is kinda calibrated to my personal vision, also based on my Macbook's monitor. It probably shows very differently on other monitors.