6 ms·

I don't understand this article. The author is using something that manipulates the style of inputs to make them dark with light fonts... but only if the input

I don't understand this article. The author is using something that manipulates the style of inputs to make them dark with light fonts... but only if the input isn't explicitly styled with either background-color or color. If they're going to be doing such hackery, just style both at the same time. Use JavaScript or something to ensure both are styled. This really isn't the developer's concern.

giancarlostoro 8y ago
From the article: > Though, that might be a problem for some users, especially those with a default dark theme on their systems. It's a real issue, every time I set a dark theme, web pages become affected because the defaults get changed. I think the issue should be fixed by the browser vendor really. Eventually I get frustrated enough to just disable it altogether.
- jameslk 8y ago
  > I think the issue should be fixed by the browser vendor really. Yes, I agree. Or whoever built the dark theme. They should be checking whether inputs have been overrided with styles for both background/color or none.
  - giancarlostoro 8y ago
    Funnily enough I think this is specific to Linux, I've not encountered this issue under Windows, and I don't think macOS has a dark mode.
    - cfcosta 8y ago
      It does, since Mojave.
      - deathanatos 8y ago
        It does, but Chrome ignores it. I have no idea about FF, since I have developer FF, and it had dark mode before OS X did. (So, I presume it also "ignores" it, since it was dark when the system wasn't.) But AFAIK, FF dark mode doesn't apply to the controls within the page, only the browser chrome.
luuio 8y ago
> he author is using something that manipulates the style of inputs to make them dark with light fonts > just style both at the same time That's exactly the point. The system by default sets both colors, though most browsers I've used allow the website to override the colors. In these cases, the websites only override one but not the other.
- jameslk 8y ago
  The system is failing to override the styles. This is an issue with the system not using more explicit selectors or not taking into account that their selectors will be overridden. In other words, the system has failed you.
  - function_seven 8y ago
    User may not want the system to override styles, though. The system is providing defaults. The CSS overrides the defaults. The web developer has decided to override one default, but not the other default.
  - chriswarbo 8y ago
    > The system is failing to override the styles. You're using the word "override"; what do you think the order of these things is? As far as I'm aware: - The user sets their system's colours (e.g. for me that's white text and black background). These are used by all applications, including the browser. - Web sites may override these defaults by providing CSS, e.g. Google dictionary forcing the text to be black These bugs are caused by Facebook, Dropbox, Google, Twitter, etc. shipping broken overrides. It's a pretty minor problem (as this post's author acknowledges), but it's not the user's fault. If these sites didn't try to override things, i.e. by providing plain, semantic HTML, then this problem wouldn't occur (some might prefer such sites!)
  - a1369209993 8y ago
    > The system is failing to override the styles. I agree, but I think this could be phrased better: If the system is using a (light-foreground-on-)dark-background theme, it should force web pages to use a dark-background theme, no matter what CSS they have.
recursive 8y ago
It is the developer's concern. If one layer of presentation sets either the foreground or background color, it also must set the other. The C in CSS is cascading. Different sets of rules can be applied with differing precedence. There's no spec that I'm aware of the states that black on white is the default user-agent styling. If your site is unusable with inverted colors, it's your site that's broken.
- jameslk 8y ago
  No, it isn't the developer's concern. You use cascading styles for a reason: so they can cascade. If I had to explicitly set the color, background color, font size, font weight, etc. everywhere, this would defeat the purpose of using CSS. It would bloat up stylesheets into giant download-speed-killing blobs.
  - luuio 8y ago
    Your website CSS is inheriting the system default CSS in a sense. If you're going to override one color, you should also override the other--or override neither.
  - recursive 8y ago
    There is a special relationship between foreground and background color that doesn't exist between any of the other things you mentioned. If one layer sets a foreground color, and another layer sets the background color to the same thing, the result is invisible text. That can happen with independently sane values for each. That cannot happen with any combinations of the other properties you mentioned.
jolmg 8y ago
I think you're misunderstanding something, though I can't pinpoint what it is. > The author is using something that manipulates the style of inputs to make them dark with light fonts The author is setting his system theme to a dark one. Maybe you don't know what that is because such options seem to be disappearing, but a system theme controls the styling of (ideally) all GUI applications running in the OS. One of these applications is the web browser. > but only if the input isn't explicitly styled with either background-color or color No, themes set both. It's the web developer that overrode one but not the other and what the author is complaining about. > If they're going to be doing such hackery, just style both at the same time. This is precisely what the author wishes of web developers and their hackery. You're directing this suggestion to the wrong person. The author did set both when setting his system theme. > Use JavaScript or something to ensure both are styled. This really isn't the developer's concern. Again, the author did style both when setting his system theme. It's the web developer that is overriding the style of one but not the other.
michaelmrose 8y ago
The hackery is literally opening the users control center and clicking the icon for desktop theme and clicking on a different theme and clicking apply. This sets the users desktop colors. Firefox will pick this up and use these colors for elements on the page unless these elements are explicitly styled by the developer. So say the users theme specifies a grey or black background and white text. The developer wants a slightly different grey on the text but is ok with the default light background that developer assumes will show up. Since the user specified a default color for the background and the developer did not we get a grey background. Since the developer selected a text color that takes precedence over the users selected color so we get grey text. End result grey text on the grey background. There is no hackery. The user can't just style both because by design the developers choices are supposed to override defaults. The user didn't do anything wrong. It is 100% the developers fault for explicitly specifying the color of the text and assuming (making an ass out of you and me) that the background would be a certain color because it is on their install of chrome. This is no different than assuming the users screen is a certain size. If you set the color of text just go ahead and actually specify the background color as well.
- jameslk 8y ago
  The developer was doing you a favor, by not overriding all your styles, preventing you from potentially downloading a bunch of unnecessary bytes, slowing down your browser with potentially unnecessary CSS rules and leaving it up to you to use your best judgement not to fubar the site. Like I've mentioned elsewhere, this is the old reset css debate. It's a calculated risk to address 99% of users who don't have their browser change their default agent styles. Everyone else is assumed to know what they're doing.
  - michaelmrose 8y ago
    There is no way for users to fix that you the dev decided to override one value and not the other other than not using dark themes. Overriding one value and not the other isn't doing the user a favor it predictably results in broken behavior that you could 100% avoid by designing your page competently. The 2 colors are implicitly related and need to be chosen together to result in a readable result. The fact that it works okay on most systems does not indicate that your work is correct. 100% broken code per standards that happened to work under internet explorer 6 wasn't correct under the principle that people could just use ie. This is only different in that this debate is more nonsensical because the correct behavior is so easy to achieve. The default background being light isn't an actual default and if you depend on it then it is no different than depending on the user speaking English having 3 names text being ltr. Its calculated nothing because setting the background color increases how predictable your look and feel is. There are zero downsides to doing so.

giancarlostoro 8y ago

From the article: > Though, that might be a problem for some users, especially those with a default dark theme on their systems. It's a real issue, every time I set a dark theme, web pages become affected because the defaults get changed. I think the issue should be fixed by the browser vendor really. Eventually I get frustrated enough to just disable it altogether.

jameslk 8y ago
> I think the issue should be fixed by the browser vendor really. Yes, I agree. Or whoever built the dark theme. They should be checking whether inputs have been overrided with styles for both background/color or none.
- giancarlostoro 8y ago
  Funnily enough I think this is specific to Linux, I've not encountered this issue under Windows, and I don't think macOS has a dark mode.
  - cfcosta 8y ago
    It does, since Mojave.
    - deathanatos 8y ago
      It does, but Chrome ignores it. I have no idea about FF, since I have developer FF, and it had dark mode before OS X did. (So, I presume it also "ignores" it, since it was dark when the system wasn't.) But AFAIK, FF dark mode doesn't apply to the controls within the page, only the browser chrome.

luuio 8y ago

> he author is using something that manipulates the style of inputs to make them dark with light fonts > just style both at the same time That's exactly the point. The system by default sets both colors, though most browsers I've used allow the website to override the colors. In these cases, the websites only override one but not the other.

jameslk 8y ago
The system is failing to override the styles. This is an issue with the system not using more explicit selectors or not taking into account that their selectors will be overridden. In other words, the system has failed you.
- function_seven 8y ago
  User may not want the system to override styles, though. The system is providing defaults. The CSS overrides the defaults. The web developer has decided to override one default, but not the other default.
- chriswarbo 8y ago
  > The system is failing to override the styles. You're using the word "override"; what do you think the order of these things is? As far as I'm aware: - The user sets their system's colours (e.g. for me that's white text and black background). These are used by all applications, including the browser. - Web sites may override these defaults by providing CSS, e.g. Google dictionary forcing the text to be black These bugs are caused by Facebook, Dropbox, Google, Twitter, etc. shipping broken overrides. It's a pretty minor problem (as this post's author acknowledges), but it's not the user's fault. If these sites didn't try to override things, i.e. by providing plain, semantic HTML, then this problem wouldn't occur (some might prefer such sites!)
- a1369209993 8y ago
  > The system is failing to override the styles. I agree, but I think this could be phrased better: If the system is using a (light-foreground-on-)dark-background theme, it should force web pages to use a dark-background theme, no matter what CSS they have.

recursive 8y ago

It is the developer's concern. If one layer of presentation sets either the foreground or background color, it also must set the other. The C in CSS is cascading. Different sets of rules can be applied with differing precedence. There's no spec that I'm aware of the states that black on white is the default user-agent styling. If your site is unusable with inverted colors, it's your site that's broken.

jameslk 8y ago
No, it isn't the developer's concern. You use cascading styles for a reason: so they can cascade. If I had to explicitly set the color, background color, font size, font weight, etc. everywhere, this would defeat the purpose of using CSS. It would bloat up stylesheets into giant download-speed-killing blobs.
- luuio 8y ago
  Your website CSS is inheriting the system default CSS in a sense. If you're going to override one color, you should also override the other--or override neither.
- recursive 8y ago
  There is a special relationship between foreground and background color that doesn't exist between any of the other things you mentioned. If one layer sets a foreground color, and another layer sets the background color to the same thing, the result is invisible text. That can happen with independently sane values for each. That cannot happen with any combinations of the other properties you mentioned.

jolmg 8y ago

I think you're misunderstanding something, though I can't pinpoint what it is. > The author is using something that manipulates the style of inputs to make them dark with light fonts The author is setting his system theme to a dark one. Maybe you don't know what that is because such options seem to be disappearing, but a system theme controls the styling of (ideally) all GUI applications running in the OS. One of these applications is the web browser. > but only if the input isn't explicitly styled with either background-color or color No, themes set both. It's the web developer that overrode one but not the other and what the author is complaining about. > If they're going to be doing such hackery, just style both at the same time. This is precisely what the author wishes of web developers and their hackery. You're directing this suggestion to the wrong person. The author did set both when setting his system theme. > Use JavaScript or something to ensure both are styled. This really isn't the developer's concern. Again, the author did style both when setting his system theme. It's the web developer that is overriding the style of one but not the other.

michaelmrose 8y ago

The hackery is literally opening the users control center and clicking the icon for desktop theme and clicking on a different theme and clicking apply. This sets the users desktop colors. Firefox will pick this up and use these colors for elements on the page unless these elements are explicitly styled by the developer. So say the users theme specifies a grey or black background and white text. The developer wants a slightly different grey on the text but is ok with the default light background that developer assumes will show up. Since the user specified a default color for the background and the developer did not we get a grey background. Since the developer selected a text color that takes precedence over the users selected color so we get grey text. End result grey text on the grey background. There is no hackery. The user can't just style both because by design the developers choices are supposed to override defaults. The user didn't do anything wrong. It is 100% the developers fault for explicitly specifying the color of the text and assuming (making an ass out of you and me) that the background would be a certain color because it is on their install of chrome. This is no different than assuming the users screen is a certain size. If you set the color of text just go ahead and actually specify the background color as well.

jameslk 8y ago
The developer was doing you a favor, by not overriding all your styles, preventing you from potentially downloading a bunch of unnecessary bytes, slowing down your browser with potentially unnecessary CSS rules and leaving it up to you to use your best judgement not to fubar the site. Like I've mentioned elsewhere, this is the old reset css debate. It's a calculated risk to address 99% of users who don't have their browser change their default agent styles. Everyone else is assumed to know what they're doing.
- michaelmrose 8y ago
  There is no way for users to fix that you the dev decided to override one value and not the other other than not using dark themes. Overriding one value and not the other isn't doing the user a favor it predictably results in broken behavior that you could 100% avoid by designing your page competently. The 2 colors are implicitly related and need to be chosen together to result in a readable result. The fact that it works okay on most systems does not indicate that your work is correct. 100% broken code per standards that happened to work under internet explorer 6 wasn't correct under the principle that people could just use ie. This is only different in that this debate is more nonsensical because the correct behavior is so easy to achieve. The default background being light isn't an actual default and if you depend on it then it is no different than depending on the user speaking English having 3 names text being ltr. Its calculated nothing because setting the background color increases how predictable your look and feel is. There are zero downsides to doing so.