-1

I would like to have the (high contrast) text color instead of piercing white to be kind and soft greenish like in military jets and such are used. Is there some kind of overall setting to make it happen for example using Chrome extension which could load a CSS? I have an example image about the color I want which is just an addition to already otherwise very good high contrast possibility. It is not going to be fun to make the change every time from developer options but I could invest in making an extension if not already done. enter image description here

10
  • 2
    SO has a dark mode. Other than that, there's loads of browsers plugins that can style whatever you want, but that's not really on topic here...
    – Cerbrus
    Commented May 31, 2023 at 7:20
  • 1
    @Tonecops github.com/darkreader/darkreader provides many predefined colour themes, maybe you could test if you like one of them Commented May 31, 2023 at 8:11
  • 1
    Don't completely change your question like that. Either way, the answer doesn't change. There's dark mode, and outside of that, you need a browser extension, which is off-topic to ask about here.
    – Cerbrus
    Commented May 31, 2023 at 21:37
  • So where I could ask that question then? The question cannot get further clearance as it was closed by the bot. Core of my question stands: Is it extension or css which lets the change only that text. That linked answer cannot be the answer because I already know that setting. I obviously need to modify question to get more correct answer or ask again with better description. I'm sure there is folks who have been working on this and closed question will isolate me from them. I also can provide valuable information on the matter.
    – Tonecops
    Commented May 31, 2023 at 21:49
  • 2
    Questions are not closed by bots; only humans can close questions. That said, though, I don't think the duplicate really applies, so I reopened it.
    – Ryan M Mod
    Commented May 31, 2023 at 21:56
  • @RyanM is "How to use a browser plugin to style SO" on-topic then? Sounds to me like a request for an off-site tool...
    – Cerbrus
    Commented May 31, 2023 at 22:12
  • 1
    @Tonecops: Just look up some styling browser extensions and write your own styling...
    – Cerbrus
    Commented May 31, 2023 at 22:12
  • 1
    @Cerbrus It's asking if there's a way to do it, which...well, the answer is "not a built-in way", but it's probably pretty easy with a user style. Not sure if you can do that without a browser extension, but we've had similar questions in the past. I think it's probably fine on balance, and someone could answer by explaining what to do.
    – Ryan M Mod
    Commented May 31, 2023 at 22:38
  • I would like to note that theme of meta.stackoverflow behaves differently from one of stackoverflow which is why I did not like the question to be moved. Now I have to deal with two different tasks. The guidance which changes the theme at stackoverflow does not work on meta.overflow. In meta there is no such button in user settings. So it calls for directly learning about css selectors, if they would match at some points. This is something that needs to be investigated. I got my manifest 3 chrome extension working....
    – Tonecops
    Commented Jun 3, 2023 at 8:43
  • Ok. I have done it so that I can read main page and the answers. I think it could be on github as an example i.e reference how to create dark theme for people with white allergic. It is too much to make it for every corner of the site but still only 300 lines of css.
    – Tonecops
    Commented Jun 3, 2023 at 12:30

2 Answers 2

2

Yes, you can change the font styles of this site (or any site) using a user style. For example, I use Stylus in Firefox (pretty sure Stylus is available on Chrome, too) to revert the font because I think the OS font is ugly compared what it was previously:

header, header ol, div.topbar-dialog, .topbar-dialog .modal-content .message-text h4, div#content, div#question-header a, div.s-prose, span.comment-copy, div.summary *, footer, aside, div > div.tag-popup * {
    font-family: Arial, sans-serif !important;
}

body#chat-body, body#transcript-body {
    font-family: Verdana, Arial, sans-serif !important;
}

code, pre, .post-editor textarea, .wmd-container textarea, div.post-layout > div > div.diffs > div div.markdown-diff *, .full-diff .content {
    font-family: Consolas, monospace !important;
}

This is just changing the font family though, not the color. You can use color in the same selectors to apply whatever color you want, including a high-contrast color.

Alternatively, there is a high-contrast dark mode option available from the user settings of the site, I believe.

1
  • I got effective chrome extension using these pinpointing selectors as starting point. I found enough selectors to make it satisfactory. 300 lines is enough to tame mainpage and individual answers pages. Third thing needed is to make css working on user settings tabs. Starball's answer is also very good and it is like next level and the right way to do. I Just made my first ever css variable combination to handle this answer box textarea.
    – Tonecops
    Commented Jun 4, 2023 at 10:44
2

Some of these text colours have dedicated CSS variables. Ex.

--theme-body-font-color
--theme-link-color
--theme-link-color-hover
--theme-link-color-visited

See also the rest of the CSS variables that start with --theme-*.

For others, instead of changing the CSS variables, it might be better to use selectors, such as for inline code, which seems to use --black-800 (changing that variable might have unintended consequences- changing things other than inline text colour). The CSS rule for inline code that has a color property uses .s-prose *:not(.s-code-block)>code as the selector.

For example of how to go about changing these, here's a snippet from one of my TamperMonkey userscripts:

GM_addStyle(`
    body
    {
        --white: hsl(0,0%,12.55%) !important;
        --black-025: hsl(0,0%,8.0%) !important;
        --theme-link-color: var(--blue-700) !important;
        --theme-link-color-visited: var(--blue-600) !important;
        --highlight-bg: hsl(0,2%,7%) !important;
    }
`);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .