Helles Theme + Dark Mode

2002Andreas

Zitat von Hamlet

wenn ich mit der Maus irgendwo auf dem Bildschirm bin:

So wie der Code bei dir für die Scrollleiste ist, wirkt er nur in der Sidebar.

Du musst diesen Teil vom Code:

CSS

 /* Scrollbar - matching Firefox Dark Theme */
 :root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

 :root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }

außerhalb der Regel @-moz-document url...einfügen:

Hier mal zwecks Test in rot:

2002Andreas

Zitat von Hamlet

Die "Sprechblasen" wenn man mit dem Mauszeiger über einem Tab schwebt sind weiß.

Eben erst gesehen die Frage.

CSS

.tab-preview-text-container {
  background: black !important;
  color: white !important;
}

Und so mit unterschiedlichen Textfarben:

CSS

.tab-preview-uri {
  color: red !important;
}

.tab-preview-title {
  color :blue !important;
}

.tab-preview-text-container {
  background-color: black !important;
}

Alles anzeigen

Hamlet

Sprechblasen funktionieren einwandfrei.
Bei der Scroll-Leiste muss ich kapitulieren. Der Code soll ja gerade in der Sidebar wirken, weil die 08/15-Scrollbar sich bereits korrekt verhält.

Ich habe alle Varianten durchprobiert:

a) außerhalb der Regel @-moz-document -> Scrollbar innerhalb der Sidebar immer noch weiß

b) innerhalb und außerhalb der Regel -> Scrollbar innerhalb der Sidebar immer noch weiß

EDIT: Ich habe gerade festgestellt, dass die Haupt-Scrollbar sich nach der angezeigten Website richtet!
Wenn die Website hell ist wie z.B. Camp Firefox -> helle Scrollbar.
Wenn sie dunkel ist wie z.B. InfinityFX -> dunkle Scrollbar.

Hier mein aktueller Code:

CSS

/* Sprechblasen */
.tab-preview-text-container {
 background: #2B2A33 !important;
 color: white !important;
}
/* Sidebar elements - using Firefox Dark Theme colors */
#sidebar-search-container {
 background-color: #2B2A33 !important;
}
    
#sidebar-header {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
 border-bottom: 1px solid #5B5B66 !important;
}
 
#input[type="search"] {
 background-color: #42414D !important;
 color: #FBFBFE !important;
}
/* Bookmarks toolbar dropdown */
#PlacesToolbar menupopup {  
 --panel-color: #FBFBFE !important;
 --panel-background: #2B2A33 !important;
}
/* Tooltips */
tooltip {
 background-color: #2B2A33 !important; /* Dark background */
 color: #FBFBFE !important; /* Light text */
 border: 1px solid #52525E !important; /* Subtle border */
}
/* Hamburger-Rezept */
#appMenu-multiView {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup .panel-subview-body {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup menuitem,
#appMenu-popup menu {
 color: #FBFBFE !important;
}
#appMenu-popup menuitem:hover,
#appMenu-popup menu:hover {
 background-color: #52525E !important;
}
/* 08/15-Scrollbar Dark */
:root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

:root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }
/* Sidebar specific styles */
@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
 /* Sidebar-Scrollbar Firefox Dark */
:root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

:root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }
 /* Apply the dark background to the main sidebar box and all its children */
 #sidebar-box,
 #sidebar-box *,
 .sidebar-placesTreechildren,
 #sidebar-search-container,
 #placesList > treechildren {
   background-color: #2B2A33 !important; /* Default Dark Theme background */
   color: #FBFBFE !important; /* Default text color */
 }
 
 /* Style the text in the tree */
 .sidebar-placesTreechildren {
   color: #FBFBFE !important;
 }
 
 /* Style the search box inside the sidebar */
 #sidebar-search-box {
   background-color: #42414D !important; /* Darker field background */
   color: #FBFBFE !important;
   border-color: #52525E !important;
 }
 
 /* Change text color on hover */
 treechildren::-moz-tree-cell-text(hover) {
   color: #FBFBFE !important;
   background-color: #52525E !important; /* Hover background color */
 }
 
 /* Style the selected item */
 treechildren::-moz-tree-cell-text(selected) {
   color: #FBFBFE !important;
   background-color: #0F6BCB !important; /* Firefox blue selection color */
 }
 
 /* Style the separator lines */
 treechildren::-moz-tree-separator {
   color: #5B5B66 !important; /* Separator color */
 }
 
 /* Style the folder icons to be lighter */
 treechildren::-moz-tree-image(container) {
   fill: #FBFBFE !important;
   color: #FBFBFE !important;
 }
}

Alles anzeigen

2002Andreas

Zitat von Hamlet

dass die Haupt-Scrollbar sich nach der angezeigten Website richtet!

Sieht hier so aus:

Forum

Infinity:

Welches Theme nutzt du?

Und so mit der Sidebar rechts:

Hamlet

Ich benutze das Theme Firefox C
Ein helles Theme. Dies hat Auswirkungen auf die Sidebar, Scrollbar und die beiden Schalter
browser.theme.content-theme
browser.theme.toolbar-theme

2002Andreas

Zitat von Hamlet

Ich benutze das Theme

Sieht hier so aus mit deinem Code:

Zitat von Hamlet

und die beiden Schalter

Welche Werte hast du dort eingetragen?

Hamlet

Ich kapier's auch nicht. Vielleicht liegt es daran, dass ich Windows 11 nutze?
Hier nochmal mein aktueller Code:

Spoiler anzeigen

CSS

/* Sprechblasen */
.tab-preview-text-container {
 background: #2B2A33 !important;
 color: white !important;
}
/* Sidebar elements - using Firefox Dark Theme colors */
#sidebar-search-container {
 background-color: #2B2A33 !important;
}
    
#sidebar-header {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
 border-bottom: 1px solid #5B5B66 !important;
}
 
#input[type="search"] {
 background-color: #42414D !important;
 color: #FBFBFE !important;
}
/* Bookmarks toolbar dropdown */
#PlacesToolbar menupopup {
 --panel-color: #FBFBFE !important;
 --panel-background: #2B2A33 !important;
}
/* Tooltips */
tooltip {
 background-color: #2B2A33 !important; /* Dark background */
 color: #FBFBFE !important; /* Light text */
 border: 1px solid #52525E !important; /* Subtle border */
}
/* Hamburger-Rezept */
#appMenu-multiView {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup .panel-subview-body {
 background-color: #2B2A33 !important;
 color: #FBFBFE !important;
}
#appMenu-popup menuitem,
#appMenu-popup menu {
 color: #FBFBFE !important;
}
#appMenu-popup menuitem:hover,
#appMenu-popup menu:hover {
 background-color: #52525E !important;
}
/* 08/15-Scrollbar Dark */
:root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

:root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }
/* Sidebar specific styles */
@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
 /* Sidebar-Scrollbar Firefox Dark */
:root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

:root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }
 /* Apply the dark background to the main sidebar box and all its children */
 #sidebar-box,
 #sidebar-box *,
 .sidebar-placesTreechildren,
 #sidebar-search-container,
 #placesList > treechildren {
   background-color: #2B2A33 !important; /* Default Dark Theme background */
   color: #FBFBFE !important; /* Default text color */
 }
 
 /* Style the text in the tree */
 .sidebar-placesTreechildren {
   color: #FBFBFE !important;
 }
 
 /* Style the search box inside the sidebar */
 #sidebar-search-box {
   background-color: #42414D !important; /* Darker field background */
   color: #FBFBFE !important;
   border-color: #52525E !important;
 }
 
 /* Change text color on hover */
 treechildren::-moz-tree-cell-text(hover) {
   color: #FBFBFE !important;
   background-color: #52525E !important; /* Hover background color */
 }
 
 /* Style the selected item */
 treechildren::-moz-tree-cell-text(selected) {
   color: #FBFBFE !important;
   background-color: #0F6BCB !important; /* Firefox blue selection color */
 }
 
 /* Style the separator lines */
 treechildren::-moz-tree-separator {
   color: #5B5B66 !important; /* Separator color */
 }
 
 /* Style the folder icons to be lighter */
 treechildren::-moz-tree-image(container) {
   fill: #FBFBFE !important;
   color: #FBFBFE !important;
 }
}

Alles anzeigen

Helle Website:

Dunkle Website:

Helle Website, aber diesmal befindet sich der Mauszeiger genau über der Scroll-Leiste in der Sidebar:

...so sollte das eigentlich immer aussehen

2002Andreas

Zitat von Hamlet

dass ich Windows 11 nutze?

Nutze ich auch.

Hast du sonst noch etwas bei dir verändert?

config Einträge:

Zitat von Hamlet

browser.theme.content-theme
browser.theme.toolbar-theme

welche Werte hast du hier?

2002Andreas

Zitat von Hamlet

dass die Haupt-Scrollbar sich nach der angezeigten Website richtet!

Sie richtet sich nach den Einstellungen deines Betriebssystems:

Standard ohne jegliche Anpassung dunkel:

hell:

Und so Forum bzw. der Explorer:

Sören Hentzschel

Zitat von 2002Andreas

Zitat von Hamlet

dass die Haupt-Scrollbar sich nach der angezeigten Website richtet!

Sie richtet sich nach den Einstellungen deines Betriebssystems:

Die Farbe des Scrollbalkens richtet sich nach der Website. Die Website kann sich wiederum nach den Einstellungen des Betriebssystems richten, muss das aber nicht. Du kannst das auf Websites mit manuellem Theme-Wechsler wie zum Beispiel auf https://developer.mozilla.org/de/ nachvollziehen. Oder, indem du einfach per Entwicklerwerkzeuge die Hintergrundfarbe von einer hellen auf eine dunkle Farbe oder umgekehrt stellst.

Hier am Beispiel des Codes von macOS, für andere Betriebssysteme muss es eine ähnliche Logik geben:

ScrollbarDrawingCocoa.cpp - mozsearch

2002Andreas

Zitat von Sören Hentzschel

muss das aber nicht.

Danke für den Hinweis, das wusste ich nicht

Trotzdem wundert es mich, dass es bei ihm nicht funktioniert:

Systemstandard:

Light:

Dark:

Getestet mich seinem letzten Code

2002Andreas

Zitat von Hamlet

Ich kapier's auch nicht.

Nur ein Versuch

Trag doch bitte mal diesen Code:

CSS

/* 08/15-Scrollbar Dark */
 :root { 
   scrollbar-color: #78789B #2B2A33 !important; /* Thumb color, Track color */
 }

:root:active { 
   scrollbar-color: #9292BB #2B2A33 !important; /* Brighter thumb when active */
 }

auch in die userContent.css ein, und teste es dann mal.

Hamlet

Ich habe eine userContent.css im chrome-Ordner angelegt, Code eingefügt, neu gestartet.
Sieht genau so aus wie vorher.

2002Andreas

Zitat von Hamlet

Sieht genau so aus wie vorher.

Dann weiß ich es auch langsam nicht mehr

Hamlet

Moment! Ich nehme das zurück.
Auf Camp Firefox wechselt die Haupt-Scrollbar jetzt von weiß zu dunkel, wenn ich mit der Maus drüberfahre - das hat sie vorher nicht gemacht.

Die Scroll-Leiste in der Sidebar grinst mich nach wie vor in weiß an.

2002Andreas

Zitat von Hamlet

Die Scroll-Leiste in der Sidebar grinst mich nach wie vor in weiß an.

Keine Ahnung was bei dir dazwischen funkt

Für die Sidebar gibt es ja sogar die zusätzliche Regel in deinem Code, obwohl es ohne die auch funktioniert hier.

Auf jeden Fall muss der Code für die Scrollleiste auch in der userContent.css stehen.

Evtl. kann ein anderer User das bitte auch mal mit deinem Code testen, incl. dem Teil in der userContent.css.

2002Andreas

Zitat von Hamlet

nach wie vor in weiß an.

Welche Firefox Version nutzt du eigentlich?

In Fx 143 + 144 funktioniert das nämlich so nicht mehr habe ich eben bemerkt.

Da musst du dir neue Einträge in about:config erstellen.

Hier die Beschreibung dazu:

firefox scrollbar color | Firefox Support Forum | Mozilla Support

Teste das doch bitte mal.

Ich habe die mal mit deinen Farben erstellt, musst du nur in die user.js so einfügen und neu starten:

Code

user_pref("widget.non-native-theme.scrollbar.style", 4);//Breite der Scrolleiste muss größer als 0 sein
user_pref("ui.themedScrollbar", "#2B2A33");//Hintergrundfarbe der Scrollleiste
user_pref("ui.themedScrollbarThumb", "#78789B");//Thumbfarbe
user_pref("ui.themedScrollbarThumbActive", "#9292BB");//Activ
user_pref("ui.themedScrollbarThumbHover", "red");//hover

Die Werte musst/kannst du dir dann anpassen.

PS:

Ob es eine Lösung auch per CSS gibt, habe ich jetzt nicht weiter überprüft.

Solltest du die Version 143/144 nutzen, dann hat Sören den Fehler schon gemeldet:

Beitrag

RE: Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Hallo,

das tritt seit einer Änderung in diesem Bereich auf:

https://hg-edge.mozilla.org/mozilla-centra…a643a3b7158a8eb

Ich habe es mal gemeldet:

https://bugzilla.mozilla.org/show_bug.cgi?id=1985558

Sören Hentzschel

27. August 2025 um 16:31

Helles Theme + Dark Mode

RE: Scrollbar Farbe ändern in Fx 143 - 144 funktioniert nicht mehr richtig

Ähnliche Themen

Adressleiste dunkel färben

Hintergrundfarbe festlegen

Hoverfarbe dauerhaft für unloaded Tabs benutzen und danach ändern

Google-Suche

89.0 - aber bitte (wie ?) mit der Oberfläche von 88.0.1 ?

Firefox 89 rückgängig machen