Adressleiste dunkel färben

captain chaos

Moin Leute,

ich nutze das dunkle Theme in Windows und das Theme Strange Blue in Firefox, zusätzlich die Erweiterung Dark Reader.

Bei dem Firefox-Theme wird leider die Adressleiste nicht gefärbt, sondern bleibt weiß, was besonders beim Aufklappen ziemlich grell wirkt.

Ich würde sie gerne dunkel färben, also weißer Text auf dunklem Grund, wie im Standard-Dark-Theme von Firefox.

Kann mir jemand mit einem Code für die userchrome.css o.ä. aushelfen?

Msfreak

Dieser Code funktioniert bei mir

CSS

/* Farbe Adressleiste */
#urlbar-input-container {background: #44434B !important;}

captain chaos

Danke dir.

Text müsste dann noch hell gefärbt werden und beim Aufklappen ist sie auch noch weiß:

Msfreak

Da kann ich dir leider nicht weiterhelfen, da ich in der Erstellung von CSS-Codes nicht fit bin. Kann mir aber auch vorstellen, dass deine benutze Theme da querschießt.

Stoiker

Ich kann dir das Theme Dark_Pure empfehlen, das mir seit einiger Zeit mit Abstand am besten gefällt. Da ist u.a. auch das Aufklappmenü schööön darkig.

2002Andreas

Zitat von captain chaos

Text müsste dann noch hell gefärbt werden und beim Aufklappen ist sie auch noch weiß:

Teste bitte mal:

CSS

:is(#urlbar-background, 
#urlbar-input-container,
.urlbarView-body-inner) {
  background-color: black !important;
  color: white !important;
}

captain chaos

Danke, das sieht schon sehr gut aus. Die Farben kann ich ja mit Hex Codes noch etwas anpassen.

Nur der Text in der Liste ist teilweise noch schwarz:

2002Andreas

Zitat von captain chaos

Nur der Text in der Liste ist teilweise noch schwarz:

Das könnte an deinem Theme oder einem deiner CSS Codes liegen.

In meinem Screenshot ist der Text weiß.

Ansonsten, teste bitte mal:

CSS

.urlbarView-title {
  color: white !important;
}

captain chaos

Danke 2002Andreas

Mit Standard-Theme bleibt der Text hier auch schwarz.

Ich benutze keinen anderen Code für die Adressleiste / urlbar. Hier meine userchrome.css:

Spoiler anzeigen

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


/* Lautsprecher-Icon auf Tabs vergrößern
https://www.camp-firefox.de/forum/thema/132680-lautsprecher-symbol-vergr%C3%B6ssern/ */
.tab-icon-overlay {
  transform: scale(2, 2) !important;
}


/* Statusleiste Farbe und Rahmen ändern (hell trotz dunklem Windows-Farbschema)
https://www.camp-firefox.de/forum/thema/130350-farbe-von-statusbar-%C3%A4ndern/ */
#statuspanel-label {
    background: #f9f9fa !important;
    color: black !important;
    border: 0px solid black !important;
    }


/* Scrollbuttons in Tableiste verkleinern
https://www.camp-firefox.de/forum/thema/123931-scrollpfeile-in-tableiste-verkleinern/ */
#scrollbutton-up,
#scrollbutton-down {
padding: 0 !important;
width: 5px !important;}
#scrollbutton-up .toolbarbutton-icon,
#scrollbutton-down .toolbarbutton-icon {
display: none !important;}


/* Search Tabs, New Container Tab und Hidden Tabs in Tabs-Liste entfernen
https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=124821 */
#allTabsMenu-searchTabs,
#allTabsMenu-tabsSeparator,
#allTabsMenu-containerTabsButton,
#allTabsMenu-containerTabsSeparator,
#allTabsMenu-hiddenTabsButton,
#allTabsMenu-hiddenTabsSeparator{
display:none!important;     }


/* Leerfläche in Tableiste entfernen */
#TabsToolbar .titlebar-spacer {display: none !important;}


/* Schatten am Ende von Tabtitel entfernen
https://www.camp-firefox.de/forum/viewtopic.php?p=1069311#p1069311 */
.tab-label-container {mask-image: none !important}


/* Pfeile in Suchleiste direkt beim Eintippen anzeigen
https://www.camp-firefox.de/forum/viewtopic.php?f=16&t=125024 */
.findbar-container > *, .findbar-container > hbox > * { display: -moz-box !important; }


/* Änderungsanzeige (Blauer Punkt) auf angepinnten Tabs entfernen */
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
    background-image: none !important; }


/* Lesezeichen- und Chronik-Sidebar weißer Text auf dunklem Hintergrund
https://www.camp-firefox.de/forum/thema/130481-bibliothek-im-dark-mode/?postID=1148415#post1148415 */
@-moz-document url("chrome://browser/content/browser.xhtml"),
               url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
               url("chrome://browser/content/places/historySidebar.xhtml") {
#bookmarks-view, sidebarheader, #sidebar-box, .sidebar-placesTreechildren, #sidebar-search-label, #sidebar-search-container, #placesList > treechildren {
    -moz-appearance: none !important;
    color: white !important;
    background: #58687F !important;
  }
}


/* Clear Downloads-Button in Bibliothek ganz rechts anzeigen
https://www.camp-firefox.de/forum/thema/130481-bibliothek-im-dark-mode/?postID=1144695#post1144695 */
@-moz-document url("chrome://browser/content/places/places.xhtml") {

#clearDownloadsButton{
       -moz-box-ordinal-group: 10 !important;
    }
}


/* Context Search-Icon aus Kontextmenü entfernen
https://www.camp-firefox.de/forum/thema/131356-icon-von-erweiterung-aus-kontextmen%C3%BC-entfernen/?postID=1155194#post1155194 */
#_5dd73bb9-e728-4d1e-990b-c77d8e03670f_-menuitem-_search_engine_menu > hbox:nth-child(1) > image:nth-child(1) {
  visibility: hidden !important;}*/

Alles anzeigen

Da ich den Adressleisten-Hintergrund aber nicht schwarz sondern grau färbe, ist schwarze Schrift für mich auch ok.

2002Andreas

Zitat von captain chaos

bleibt der Text hier auch schwarz.

Eigenartig

Hier mal in rot:

Dein Code + meinem ergibt hier:

2002Andreas

Und so mit deinem Theme und meinem Code:

captain chaos

Danke 2002Andreas

Dann hat das bestimmt mit einer meiner Einstellungen zu tun.

Deine Adressleiste sieht auch leicht anders aus als bei mir, URL und Text sind bei mir in einer Zeile.

2002Andreas

Zitat von captain chaos

URL und Text sind bei mir in einer Zeile.

Mit welchem Code machst du das denn dann?

Sören Hentzschel

Zitat von 2002Andreas

Mit welchem Code machst du das denn dann?

Das ist Standard. Zweizeilig wird es nur, wenn die Fensterbreite / Adressleiste schmal ist.

2002Andreas

Zitat von Sören Hentzschel

wenn die Fensterbreite / Adressleiste schmal ist.

Danke

Ohne die Suchleiste rechts ist das hier dann auch so.

Dann sieht das mit meinem Code so aus:

2002Andreas

Und so sieht das hier aus, wenn ich deinen und meinen Code nehme, und zusätzlich den Code aus Beitrag Nr. 8 nehme mit gelber Farbe:

Wenn das bei dir nicht so ist, dann funkt dir evtl. etwas anderes dazwischen

Mira_Belle

Entschuldigt, wenn ich hier so reinplatze.

Aber ich nutze einen etwas anderen Code,

der mich vom verwendeten Theme unabhängig macht.

CSS

:root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }    /* Farbe Hintergrund (Dunkelgrau)*/

um DAS Feld einzufärben.

CSS

:root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }    /* Farbe Schrift (Hellgrau) */

um die Schriftfarbe einzustellen.

Und weil ich die Felder im Grundzustand transparent haben wollte

CSS

:root{ --lwt-toolbar-field-background-color: rgba( 0, 0, 0, 0)!important }    /* Farbe der Felder (transparent) */

CSS

    /* Farbe Url (Helles Orange)*/
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 204, 0, 0.7)!important;
    }

um die Farbe der URL einzustellen (bei Euch war/ist sie ja blau)

und zu guter Letzt, damit im Suchfeld und im Adressfeld die Farben anpassbar sind

CSS

    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
        background-color: rgb(225, 225, 225)  !important;        /* Hellgrau */
        color: #e1e1e1 !important;        /* Hellgrau */
    }

Komplett sieht der Code für dieses "Projekt" also so aus:

CSS

/*---------------------------------------------------*/
/********** Anpassungen an der Adressleiste **********/
/*---------------------------------------------------*/
    :root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }    /* Farbe Hintergrund (Dunkelgrau)*/

    :root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }    /* Farbe Schrift (Hellgrau) */

    :root{ --lwt-toolbar-field-background-color: rgba( 0, 0, 0, 0)!important }    /* Farbe der Felder (transparent) */

    /* Farbe Url (Helles Orange)*/
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 204, 0, 0.7)!important;
    }
    
    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
        background-color: rgb(225, 225, 225)  !important;        /* Hellgrau */
        color: #e1e1e1 !important;        /* Hellgrau */
    }

Alles anzeigen

Ist nur eine Idee.

captain chaos

Mira_Belle

Dein Code hat bei mir keine Auswirkungen.

2002Andreas

Ich habe deinen Code in einem neuen Profil getestet (als einziger Code in der userchrome.css) und habe immer noch das Problem mit dem schwarzen Text. Was könnte ich noch testen?

2002Andreas

Zitat von captain chaos

das Problem mit dem schwarzen Text.

Eigenartig.

Liegt es evtl. an einem deiner genutzten Scripte, oder doch an deinem Theme?

Mira_Belle

Zitat von captain chaos

Mira_Belle
Dein Code hat bei mir keine Auswirkungen.

Das ist merkwürdig, denn egal welches Theme ich auch auswähle,

das "userChrome.css" legt die Veränderungen fest!

Es muss also an irgendetwas an Deiner Konfiguration liegen.