This forum has been archived. All content is frozen. Please use KDE Discuss instead.

Breeze Dark theme and Firefox input colors problem

Page 1 of 1 (15 posts)

Tags: None
(comma "," separated)
ik.kde
Registered Member
Posts
31
Karma
0
OS

Breeze Dark theme and Firefox input colors problem

Mon Feb 27, 2017 7:11 am
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

Re: Breeze Dark theme and Firefox input colors problem

Mon Feb 27, 2017 1:14 pm
Same problem here.
NoNameNoBlame
Karma
0

Re: Breeze Dark theme and Firefox input colors problem

Mon Feb 27, 2017 3:18 pm
Try
Look and Feel: Breeze
Desktop Theme: Breeze Dark

Does it get better?
joninchaurbe
Registered Member
Posts
32
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem

Mon Feb 27, 2017 10:30 pm
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
31
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 12:50 am
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
31
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 1:17 am
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
Karma
0

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 2:50 am
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
31
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 3:06 am
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
Karma
0

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 3:18 am
You could start here, for example:

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

That's a user problem marked as 'solved'.
NoNameNoBlame
Karma
0

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 3:48 am
User Style Sheet
==============

Explanation in Mozilla's Knowledge Base:

http://kb.mozillazine.org/UserContent.css
NoNameNoBlame
Karma
0

Re: Breeze Dark theme and Firefox input colors problem

Tue Feb 28, 2017 4:48 am
There's a firefox plugin called: 'stylish'. Take a look.
ik.kde
Registered Member
Posts
31
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem  Topic is solved

Wed Mar 01, 2017 5:31 am
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

Re: Breeze Dark theme and Firefox input colors problem

Sun Oct 29, 2017 3:48 am
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
190
Karma
1
OS

Re: Breeze Dark theme and Firefox input colors problem

Tue May 01, 2018 8:19 am
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 5.20 - Plasma 5.20.5 - Frameworks 5.78 - Qt 5.15.2 - Kernel 5.4.0-65
User avatar
msdobrescu
Registered Member
Posts
119
Karma
0
OS

Re: Breeze Dark theme and Firefox input colors problem

Thu Nov 01, 2018 6:58 pm
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?

Page 1 of 1 (15 posts)

Bookmarks


Who is online

Registered users: Bing [Bot], Google [Bot], Yahoo [Bot]