Firefox 90 Theme: Wie dunkle Menüleiste, helle Tabs?

[Dickinson]

Hi,

vor dem Update auf das neue Proton-Design war die Menüleiste und die Freifläche neben den Tabs des Firefox dunkel und die Tabs hell. Jetzt im neuen bekomme ich es so nicht mehr hin, egal welches vorinstallierte Theme ich verwende. System-Theme und Hell sehen indentisch bei mir aus (Menüleiste hell, Freifläche neben Tabs hell, Tabs hell). Dunkel macht alles dunkel (Menüleiste, Freifläche neben den Tabs, Tabs und den Hintergrund).

Kann mir jemand helfen?

Beste Grüße
Dickinson

 

[Hauro]

Bitte einen Screenshot einfügen.

Alternativ bleibt ein Theme herunterzuladen oder ein eigenes Theme zu erstellen - dies ist nicht so schwierig:

Es wird (eigentlich) nur die manifest.json erstellt:

Spoiler: manifest.json

{
    "manifest_version": 2,
    "name": "濃い紫色の波",
    "version": "0.2.4",

    "applications": {
      "gecko": {
         "id": "koi-murasakiiro-no-nami@yukari"
      }
    },

    "theme": {
        "images": {
            "additional_backgrounds": [ "header.png" ]
        },
        "properties": {
            "additional_backgrounds_alignment": [ "center" ],
            "additional_backgrounds_tiling": [ "repeat" ]
        },       
        "colors": {
            "frame": "rgba(140,75,255, 1)",
            "frame_inactive": "lila",

            "bookmark_text": "rgba(255,20,147, 1)",

            "button_background_active": "rgba(140,75,255, 1)",
            "button_background_hover": "rgba(140,75,255, 1)",

            //"tab_line": "rgba(191, 102, 255, 1)",
            "tab_loading": "rgba(248, 48, 252, 1)",
            "tab_selected": "rgba(159, 26, 255, 0.6)",
            "tab_background_separator": "white",
            "tab_text": "rgba(255, 150, 255, 1)",
            "tab_background_text": "rgba(255, 20, 150, 1)",

            "icons": "rgba(255,0,255 , 1)",
            "icons_attention": "rgba(255,0,255 , 1)",

            "toolbar": "rgba(140,75,255, 0)",
            "toolbar_field": "rgba(140,75,255, 0)",
            "toolbar_top_separator": "rgba(255,20,147, 0)",
            //"toolbar_bottom_separator": "rgba(255,20,147, 0)",
            //"toolbar_vertical_separator": "black",
            //"toolbar_field_separator": "black",
            "toolbar_field_border": "rgba(140,75,255, 0)",
            "toolbar_field_border_focus": "rgba(255,20,147, 1)",
            "toolbar_field_text": "rgba(255,20,147, 1)",
            "toolbar_field_focus": "rgb(140,75,255, 1)",
            "toolbar_field_text_focus": "rgba(255,20,147, 1)",
            "toolbar_field_highlight": "rgb(149, 0, 255, 1)",
            "toolbar_field_highlight_text": "rgba(255, 225, 255, 1)",

            "popup": "rgb(140,75,255, 1)",
            "popup_border": "rgb(140,75,255, 1)",
            "popup_text": "rgba(255,20,147, 1)",
            "popup_highlight": "rgb(149, 0, 255, 1)",
            "popup_highlight_text": "rgba(255, 225, 255, 1)",

            "sidebar": "rgb(140,75,255, 1)",
            "sidebar_border": "rgb(140,75,255, 1)",
            "sidebar_text": "rgba(255,20,147, 1)",
            "sidebar_highlight": "rgb(149, 0, 255, 1)",
            "sidebar_highlight_text": "rgba(255, 225, 255, 1)",

            "ntp_background": "rgb(140,75,255, 1)",
            "ntp_text": "rgba(255,20,147, 1)"
        }
    }
}

 

[nullPtr]

Per userChrome.css kannst du Firefox aussehen lassen, wie du willst. Musst allerdings etwas Handarbeit anlegen. Wobei ich glaube, dass es auch Generatoren im Internet dafür gibt.

Generelle Infos findest du hier: https://www.userchrome.org/

 

[Morpheus3k]

Bitte einen Screenshot einfügen.

Alternativ bleibt ein Theme herunterzuladen oder ein eigenes Theme zu erstellen - dies ist nicht so schwierig:

Anhang anzeigen 1107699

Ich würde auch zu einem Theme greifen. Wenn du dieselben Farben wie vor dem Proton-Design haben möchtest, gibt es den Theme "Photon Colors".

 

[Dickinson]

@Hauro
Danke für die Antwort. Hier ein Screenshot:

Eigentlich sollte das System-Theme genau das machen, wie es vorher war. Aber wie man sieht, ist oben alles hell.

@nullPtr
Danke, sehe ich mir eventuell mal an. Wollte eigentlich nicht so tief einsteigen. :-)

@Morpheus3k
Auch dir danke. Das sieht auf den ersten Blick so aus, wie ich es haben wollte. Leider werden aber hier die Kontextmenüs auch dunkel eingefärbt.

 

[Hauro]

Leider werden aber hier die Kontextmenüs auch dunkel eingefärbt.

Bei mir

Das manifest ist sehr einfach:

{
  "manifest_version": 2,
  "version": "1.3",
  "name": "Photon Colors",
  "theme": {
    "images": {},
    "properties": {},
    "colors": {
      "frame": "rgb(32, 35, 64)",

      "tab_line": "rgb(10, 132, 255)",
      "tab_loading": "rgb(10, 132, 255)",
      "tab_background_seperator": "rgb(97, 99, 120)",
      "tab_background_text": "rgb(255, 255, 255)",

      "toolbar_bottom_separator": "rgb(225, 225, 226)",
      "toolbar": "rgb(249, 249, 250)",
      "toolbar_text": "rgb(0, 0, 0)",
      "toolbar_field": "rgb(255, 255, 255)",
      "toolbar_field_text": "rgb(0, 0, 0)",
      "toolbar_field_border": "rgb(166, 166, 167)",
      "toolbar_field_border_focus": "rgb(0, 120, 215)",
      "toolbar_field_highlight_text": "rgb(0,0,0)",

      "popup": "rgb(255, 255, 255)",
      "popup_text": "rgb(0, 0, 0)",

      "ntp_text": "rgb(0, 0, 0)"
    }
  }
}

@Dickinson

Welche Farben passen nicht, dann erstelle ich ein Theme und stelle es hier bereit.

P.S.
Den Inhalt eines Add-ons kann überprüft werden, einfach .zip an die xpi-Datei anfügen, dann lässt es sich öffnen.

photon_colors-1.3-an+fx.xpi.zip

Der Ordner META-INF wird von Mozilla bei der Signierung angelegt und enthält die entsprechenden Dateien:

 

[Dickinson]

Das rechts ist kein Kontext-Menü, sondern das Firefox-Menü. Klick mal mit der rechten Taste auf eine freie Fläche im Browser. Dann erscheint ein/das Kontext-Menü.

Ergänzung (31. Juli 2021)

Welche Farben passen nicht, dann erstelle ich ein Theme und stelle es hier bereit.

Das Problem ist, dass das Kontextmenü nicht bei diesen ganzen Parametern aufgeführt wird.

 

[Hauro]

Dann erscheint ein/das Kontext-Menü.

Das Problem ist, dass das Kontextmenü nicht bei diesen ganzen Parametern aufgeführt wird

Dies passt Firefox an das Theme an, ist das Theme dunkel, ist das Kontext-Menü hell und anders herum:

Mit meinem Thema von oben

mit dem Proton-Theme

Damit wird sichergestellt, dass es sich hervorhebt.


Dies lässt sich (nur) über die oben genannte userChrome.css ändern.

 

[Dickinson]

Ok, schade. Dann wird man das mit dem Proton-Desgin wohl nicht mehr hinbekommen, wie ich es möchte...

Ergänzung (31. Juli 2021)

Aber wieso macht das System-Theme es eigentlich nicht so, wie es dort angezeigt wird? Das ist ja trotzdem komisch, oder?

Ergänzung (31. Juli 2021)

Dies lässt sich (nur) über die oben genannte userChrome.css ändern.

Kann es sein, dass eine userChroms.css erst erstellt werden muss? In meinem Profilordner finde ich keine. Wo muss die hin und was muss ich dort eintragen, damit ich zum Beispiel das Proton-Theme mit hellen Kontextmenüs bekomme?

 

[Hauro]

Dies wurde (vermutlich) vom Design-Team so entschieden. Ein dunkles Kontext-Menü, bei einem dunklem Theme hebt sich halt nicht so vom Kontext ab:

Kann es sein, dass eine userChroms.css erst erstellt werden muss?

Korrekt. Wie der Name bereits aussagt, ist es eine vom User erstellte Datei um die Oberfläche zu ändern.

Wo muss die hin und was muss ich dort eintragen, damit ich zum Beispiel das Proton-Theme mit hellen Kontextmenüs bekomme?

In diesem Thema bin ich nicht drin, wie es geht steht auf der von nullPtr verlinkten Seite userChrome.org und
Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css | camp-firefox.de. In diesem Forum sind auch die richtigen Ansprechpartner, wie 2002Andreas, unterwegs, der eventuell hier unterstützen kann.

 

[Dickinson]

Ich meinte das System-Theme. Das sieht ja in der Theme-Übersicht eigentlich so aus, wie das Proton-Theme. Das wird bei mir aber hell in hell dargestellt. Da wüsste ich auch gerne, warum das so ist und wo der Fehler ist.

 

[netzgestaltung]

Ich bin ein bisserl spät zur Party aber bevor ich die userChrome.css anschaue reicht ev Firefox color (erstellt vermutlich auch eine manifest.json) da lässt sich das Burgermenü-Dropdown ebenfalls einfärben. Die Kontextmenüs sind aber soweit ich weiss Sache des OS (zumindest auf Linux).

 

[2002Andreas]

dass eine userChroms.css erst erstellt werden muss?

Ja.

Sollte der Ordner chrome nicht vorhanden sein musst du ihn dir erst erstellen, und in ihm dann eine userChrome.css
Du mußt dir im Profilordner einen neuen Ordner chrome erstellen und in diesem dann eine Textdatei ( mit einem Editor ) in die du den Code kopierst, bzw. einträgst.

Dann schließt du die Datei und speicherst sie als userChrome.css ab.
Danach mußt du den Firefox neu starten.

PS:
Du musst dir dazu die versteckten Dateiendungen anzeigen lassen.

Um das einzustellen klickt man im Windows 10 Explorer (wenn man einen Ordner offen hat) erst oben links auf Ansicht..dann rechts oben auf

"Optionen" > "Ordner und Suchoptionen ändern" > "Ansicht"

und entfernt das Häkchen bei "Erweiterungen bei bekannten Dateitypen ausblenden"

Wo finde ich meinen Profilordner

Eine genaue Beschreibung dazu befindet sich auch unter diesem Link:

Videoanleitung für die userChrome.css und mehr

Zusätzlich muss in about:config der Eintrag:

toolkit.legacyUserProfileCustomizations.stylesheets

auf true stehen.

 

[Hauro]

Ich meinte das System-Theme. Das sieht ja in der Theme-Übersicht eigentlich so aus, wie das Proton-Theme.

Wie sind die Windows-Einstellungen?





Dann ist aber auch die Tab-Leiste dunkel.



Wie ein helles Thema mit dunklem Kontext-Menü funktioniert, erklärt 2002Andreas im Beitrag #13.

 

[2002Andreas]

die Menüleiste und die Freifläche neben den Tabs des Firefox dunkel und die Tabs hell.

Meinst du das so?

Wenn ja, dann geht das mit diesem CSS Code:

#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#TabsToolbar {
  background: #dddddd !important;
}

 

[Dickinson]

Hi @2002Andreas

Vielen Dank schon einmal! Wie es aussieht, würde für mich schon der code #TabsToolbar genügen. Allerdings werden dann auch rechts die Symbole für minimieren, verkleinern und schließen mit eingefärbt. Welchen code braucht es noch, damit die hell bleiben?

Ergänzung (31. Juli 2021)

Oder auch anders... Gibt es einen Code, der die Kontextmenüs (bei rechtsklick) hell belässt?

 

[2002Andreas]

rechts die Symbole für minimieren, verkleinern und schließen mit eingefärbt.

Sieht hier so aus:

mit diesem Code:

#TabsToolbar {
  background: #dddddd !important;
}

 

[Dickinson]

Ich habe einen anderen Farbcode genommen, der wesentlich dunkler ist (rgb(32, 35, 64)), weil mir die Farbe aus dem Proton-Theme gut gefällt.

Ich würde auch gerne das Proton-Theme nutzen und wollte dort nur die standardmäßig hellen Kontextmenüs, welche bei Rechtsklick oder bei Klick auf Ordner auf der Symbolleiste erscheinen. Sorry, ich wollte nicht alles durcheinander bringen. 😇

 

[2002Andreas]

Gibt es einen Code, der die Kontextmenüs (bei rechtsklick) hell belässt?

Ich habe mal ein dunkles Theme genommen:

menupopup > menuitem,
menupopup > menu  {
  color: black !important;
  background-color: white !important;
}

menuseparator {
  appearance: none !important;
  margin: 0 !important;
}

 

[Dickinson]

DANKE! Das sieht bei mir dann jetzt so aus (links im Bild):

Bekommt man den dunklen Rand oben und unten auch noch weg? Und bekommt man den Hintergrund bei Pfeil links, rechts, aktualisieren und Lesezeichen setzen auch noch hell?

Ergänzung (31. Juli 2021)

Und die Zeilenmarkierung beim Überfahren mit der Maus ist durch das hell machen auch weg. Kann das bleiben?