Reply to topic

Breeze Dark theme and Firefox input colors problem

ik.kde
Registered Member
Posts
27
Karma
0
OS
Hi,

I am using Neon with:
Look and Feel: Breeze Dark
Desktop Theme: Breeze Dark
Application Style -> GNOME Application Style (GTK) -> Select a GTK3 Theme: Breeze Dark
and I see a lot of websites in which when you type in input in Firefox text is barely visible.
Examples:
Search box on https://myanimelist.net/anime/genre/1/Action
Here is example html file:
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Test inputs colors</title>
   <style>
      #container{
         margin: 70px auto;
         width: 400px;
      }
      #container label{
         display: inline-block;
         width: 150px;
      }
      #container input{
         width: 200px;
         background: #FFF;
         border: 1px solid #CCC;
         /*color: #000;/*will fix the problem*/*/
      }
   </style>
</head>
<body>
   <div id="container">
      <h1>Test inputs colors</h1>
      <label for="email">E-mail:</label>
      <input type="text" id="email" name="email" value="test@gmail.com" /><br/>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" /><br/>
      <button type="submit">Login</button>
   </div>
</body>
</html>

If you open it in Firefox and try to type anything you will see that text you type has almost white color and it is very difficult to read it.
Chromium doesn't have this problem.

I understand that this may be considered as a problem of website which haven't specified text color, but still the problem is there. There are a lot of such websites. And it is very difficult to type logins/passwords on such websites.

Does anyone know how to fix it without switching to Breeze theme?

Thanks,

Last edited by ik.kde on Tue Feb 28, 2017 1:13 am, edited 2 times in total.
marquitusus
Registered Member
Posts
16
Karma
0
Same problem here.
NoNameNoBlame
Registered Member
Posts
256
Karma
2
OS
Try
Look and Feel: Breeze
Desktop Theme: Breeze Dark

Does it get better?
joninchaurbe
Registered Member
Posts
10
Karma
0
OS
I'm using KDE Neon (LTS 5.8 ) with Breeze Dark (as Look and Feel) and I don't see in Firefox what you have told. I've look your example too and I can see Ok.
I had a similar problem in Kubuntu 14.04 and I solved it using Colours configuration, in System Settings. At there you can choice another pattern or edit one pattern.
Good luck :-)
ik.kde
Registered Member
Posts
27
Karma
0
OS
NoNameNoBlame wrote:Try
Look and Feel: Breeze
Desktop Theme: Breeze Dark

Does it get better?


It solved the problem, but made my window background white which I don't like. I would like to leave:
Look and Feel: Breeze Dark
Desktop Theme: Breeze Dark
ik.kde
Registered Member
Posts
27
Karma
0
OS
I think I have found the culprit:
Application Style -> GNOME Application Style (GTK) -> Select a GTK3 Theme: Breeze Dark

Any suggestions how to fix it?

P.S. changing Colours doesn't help
NoNameNoBlame
Registered Member
Posts
256
Karma
2
OS
I think, You identified the culprit, indeed.

As a workaround, maybe a user_style_sheet in firefox may help:

#container input{
width: 200px;
background: #FFF;
border: 1px solid #CCC;
/*color: #000;/*will fix the problem*/*/
color:black
}
ik.kde
Registered Member
Posts
27
Karma
0
OS
NoNameNoBlame wrote:I think, You identified the culprit, indeed.

As a workaround, maybe a user_style_sheet in firefox may help:

#container input{
width: 200px;
background: #FFF;
border: 1px solid #CCC;
/*color: #000;/*will fix the problem*/*/
color:black
}

How do I add it? Don't see such option in Firefox.
NoNameNoBlame
Registered Member
Posts
256
Karma
2
OS
You could start here, for example:

https://support.mozilla.org/t5/Firefox/ ... -p/1351147

That's a user problem marked as 'solved'.
NoNameNoBlame
Registered Member
Posts
256
Karma
2
OS
User Style Sheet
==============

Explanation in Mozilla's Knowledge Base:

http://kb.mozillazine.org/UserContent.css
NoNameNoBlame
Registered Member
Posts
256
Karma
2
OS
There's a firefox plugin called: 'stylish'. Take a look.
ik.kde
Registered Member
Posts
27
Karma
0
OS
Thanks for all the help. Looks like the solutions is to change default style sheet for Firefox either by changing userContent.css or by using one of Firefox addons.

Also found solution for same problem on Arch Wiki:
https://wiki.archlinux.org/index.php/fi ... .2B_themes

Here is a bash script to change default Firefox style from command line:
Code: Select all
profile=`cat ~/.mozilla/firefox/profiles.ini | grep Path | sed s/^Path=//` && mkdir -vp ~/.mozilla/firefox/"$profile"/chrome && cat << EOF > ~/.mozilla/firefox/"$profile"/chrome/userContent.css
input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

#downloads-indicator-counter {
    color: white;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}
EOF
Kostas
Registered Member
Posts
1
Karma
0
Great!
And, in case of multiple profiles, use this script instead (use with bash, not sh):
Code: Select all
#!/bin/bash

profiles=`cat ~/.mozilla/firefox/profiles.ini | grep Path | sed s/^Path=//`

cat << EOF > /tmp/userContent.css
input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

#downloads-indicator-counter {
    color: white;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}
EOF

while IFS= read -r p;
do
mkdir -vp ~/.mozilla/firefox/"$p"/chrome
cp /tmp/userContent.css  ~/.mozilla/firefox/"$p"/chrome/;
done <<< "$profiles"

rm /tmp/userContent.css
User avatar abury
Registered Member
Posts
97
Karma
0
OS
ik.kde wrote:I am using Neon with:
Look and Feel: Breeze Dark
Desktop Theme: Breeze Dark
Application Style -> GNOME Application Style (GTK) -> Select a GTK3 Theme: Breeze Dark
...
Does anyone know how to fix it without switching to Breeze theme?

Great post for anyone working with these configs!
Eventually however this solution worked for me...
Thanks!


KDE neon user in Zoolooland, ZA
User avatar msdobrescu
Registered Member
Posts
73
Karma
0
OS
Thanks, I know this solution in Firefox, but it is Breeze Dark theme issue, I believe, because I have issues with GTK apps tooltips all over. For instance, in Inkscape, tools have unreadable tooltips. Any ideas?

 
Reply to topic

Bookmarks



Who is online

Registered users: alavarre, Baidu [Spider], Bing [Bot], claydoh, dbergstein, Exabot [Bot], Google [Bot], LilZebra, Mamarok, nboskov, vpinon