Gnome Shell Theme mit Sass bearbeiten

Zur Bearbeitung der Gnome Shell Theme wird jetzt Sass (Syntactically Awesome Stylesheets) verwendet. Dies ist sicher für die Entwickler eine große Erleichterung, liegen doch zentrrale Konfigurationsdateien in einzelnen sccs Dateien vor. Dabei ist Sass eine Art Vorstufe zur Erzeugung der eigentlichen css Dateien. Arbeitsschritte können in den scss Dateien gespeichert werden. Erst wenn mit dem Syntax von Sass eine css erzeugt wird liegt das Arbeitsergebnis vor und kann für eine Gnome Shell Theme getestet werden.

Als erstes muß Sass installiert werden. Das geht unter Opensuse sehr leicht:

sudo zypper install ruby2.1-rubygem-sass

anschließend :

sudo gem install sass

Damit liegt die Entwicklungsumgebung vor.

Jetzt holen wir uns die aktuelle Entwicklungsumgebung vom Git Repository ind das Verzeichnis gnome-shell unseres Homeverzeichnisses.:

git clone --recursive https://github.com/GNOME/gnome-shell

Im Homeverzeichnis unter /gnome-shell/date/theme liegen nun unsere sccs Dateien. Das Ziele eines neuen Themes ist die Erstellung einer gnome-shell.css Datei. Eine derartige Datei liegt dort bereits vor und könnte direkt bearbeitet werden. Anschließend kopiert man die Datei in das Verzeichnis /theme/Themenname/gnome-shell/ – Fertig ist ein neues Theme.

Sass kann nun verwendet werden um aus den vorliegenden scss Dateien genau dies css Datei zu erzeugen. Folgender Test (in diesem Verzeichnis) macht genau das:

sass gnome-shell.scss gnome-shell.css

Bisher hatten wir an den scss Dateien noch nicht geändert – es liegt also eine gleich gnome-shell.css Datei vor (vorausgesetzt Sass wurde richtig installiert und der Prozess wurde vollständig und erfolgreich abgeschlossen). Damit könnte man eine erfolgreiche Installation von sass also auch gleich testen.

Jetzt schauen wir uns die gnome-shell.scss Datei genau an und sehen, dass die Konfiguration sämtlich aus dem Unterverzeichnis gnome-shell-sass importiert wurde.

Ich passe meistens die Farben des Panels (obere Leiste), des Dashboard (linkes Dock) und des Dashboard an.

Dafür benötige ich die scss Datei welche die Farbe festlegt _color.scss und die scss Datei welches die Farbstruktur _common.scss beschreibt. Beide zusammen ergeben nach der Umwandlung mittels Sass die eigentliche css Datei welche Farben und Struktur unseres neuen Themes beschreiben wird.

Der Vorteil von Sass zeigt sich hier ganz deutlich. Ändere ich die Hintrergrundfarbe $bg_color in der Datei _color.scss werden nach der Übersetzung in die css Datei alle Hintergrundfarben, welche in der Datei _common.scss durch $bg_color beschrieben wurden, geändert. Je mehr ich also von derartigen gleichenVariablen Gebrauch mache, um so mehr spare ich einzelne Farbbeschreibungen – desto einheitlicher wird der Desktop (allerdings auch).

Um meine kleinen Farbänderungen an der Standard Theme durchzuführen ändere ich die Color Datei _color.scss . Ich füge in der Datei _common.scss für das Panel noch eine zusätzlich Variable für die Hintergrundfarbe ein. Die Gnomemacher haben diese fest in der Strukturdatei auf black gesetzt – das wollte ich gern flexibler gestalten. Sollte man ein helles Panel bevorzugen ist die Änderung der Textfarbe ebenfalls notwendig. Dafür müssetn dann auch noch zusätzliche Variablen eingefügt und Farben festgelegt werden.

So – ich hoffe, ich habe das Prinzip einfach beschreiben können.

Gnome Shell 3.16 Theme bearbeiten

Die Theme Dateien zur Abänderung der Standardtheme für die Gnome Shell liegen jetzt nicht mehr als css Datei auf dem Rechner. Sie sind jetzt in den Code integriert. Das erschwert eine Abänderung der Standardtheme.

Es ist trotzdem möglich:

  1. Git-Core installieren: sudo zypper install git-core
  2. Dateien laden: git clone –recursive https://github.com/GNOME/gnome-shell
  3. Die Datei gnome-shell.css aus den kopierten Daten (liegen bei mir im Homeverzeichnis unter  /home/benutzername/gnome-shell/data/theme) nach /home/user/.themes/neuer_themenname/gnome-shell.css kopieren
  4. Die dort liegende Datei gnome-shell.css entsprechend abändern.
  5. Das neue Theme mit Gnome Tweak Tool aufrufen.

Ich benötige im Grunde 3 Variationen:

  • für helle Hintergründe eine Theme mit hellem Panel
  • für dunkle Hintergründe ein transparentes Theme
  • Ein universelles Theme mit dunklerem Panel (ähnlich dem Original)

So sind drei Themen entsanden:

Was habe ich in der css Datei geändert (am Beispiel Gnome316hell):

Dabei wurde je nach Farbe des Panel die Schriftfarbe, die Schriftfarbe wenn sich die Maus darüber befindet und die Schriftfarbe bei Aktivierung mit der Maus geändert.

Beim Suchbegriff Panel im Abschnitt /* TOP BAR */

/* TOP BAR */
#panel {
  /*background-color: transparent;*/
background-color: #eeeeec;

  font-weight: bold;
  height: 1.86em; }
  #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
    background-color: transparent; }
  #panel #panelLeft, #panel #panelCenter {
    spacing: 4px; }
  #panel .panel-corner {
    -panel-corner-radius: 6px;
    -panel-corner-background-color: #eeeeec;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent; }
    #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
      /*-panel-corner-border-color: rgba(250,235,215, 1)*/;
-panel-corner-border-color: #eeeeec}
    #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent; }
  #panel .panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
/*   color: #ccc;*/

color: #555753;
    transition-duration: 100ms; }
    #panel .panel-button .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px; }
    #panel .panel-button:hover {
      color: #173}
    #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0 -2px 0px #256ab1;
      color: #256ab1; }

und für das Dashboard (transparentes linkes Dock):

* DASHBOARD */
#dash {
  font-size: 9pt;
  color: #eeeeec;
  /*background-color: #2e3436;*/
background-color: transparent;
  padding: 4px 0;

 

 

und für den durchsichtigen Hintergrund der Arbeitsflächenumschalter:

 

 

workspace-thumbnails {
  color: #eeeeec;
  /*background-color: #2e3436;*/
background-color: transparent;
  border: 1px solid rgba(238, 238, 236, 0.2); }
Fertig