Ändern von CSS-Designs

Question

Ich habe eine nette kleine Anwendung mit Java und Javafx gemacht und habe vor kurzem begonnen, es mit CSS zu stylen. Ich dachte an die Idee, getrennte Themen zu haben (eine gelbe, eine blaue, etc.), aber dann erkannte ich, dass ich keinen guten Weg weiß, dies zu tun. In Java, wenn ich etwas ändern wollte, ändere ich einfach den Wert einer Variablen, aber in CSS glaube ich nicht, dass das möglich ist. Also zu meiner Frage, was ist der beste Weg, um Themen durch den Klick auf eine Schaltfläche (innerhalb der Anwendung) zu ändern? Ist es wie ich befürchtet habe, muss ich für jedes Thema ein eigenes Stylesheet erstellen und zwischen Stylesheets wechseln? Danke für jede Hilfe.

Answer 1

Ich kenne zwei Möglichkeiten zu tun, was Sie brauchen:

1.- ändern CSS-Link von einem Standard-Theme default.css zu einem Farbthema blue.css. 2.- Ändern Sie eine Klasse, die das Erscheinungsbild des Hauptcontainers ändert.

Der erste Weg: Änderung CSS Link

Sie nur zwei CSS-Dateien erstellen müssen, die nur in der Farbe verändern wird.

anschauliches Beispiel: http://seantheme.com/color-admin-v1.9/admin/html/index_v2.html

das Einstellungssymbol (COG) Klicken Sie auf das Farbthema Controller anzuzeigen.

Der zweite Weg: Fügen Sie eine Klasse mit dem Hauptbehälter

Lasst uns sagen, dass Sie drei Farbthemen für eine Website haben, haben Sie eine Klasse verwenden .red oder .red-theme, die mit dem Hauptbehälter hinzugefügt werden wie es jede Farbe unterhalb des Selektors ändert.

EX: machte ich einen Live-Test für eine klarere Antwort, aber ich werde ein Kontextzustand für eine Box mit Informationen zu verwenden, die je ändern wird darauf Status ist, so werden wir .warning, .info und .success Zustand und regelmäßige haben Thema welche Klasse ist .post-wrapper.

/* General Classes 
* First we will give theme bases that include padding, margin, font-size 
* or default colors, etc. 
*/ 
.post-wrapper{ /* Regular theme */ 
    padding: 15px; 
    margin-bottom: 30px; 
    border: 1px solid #ccc; 
    box-shadow: 2px 2px 2px rgba(0,0,0, 0.2); 
    border-radius: 5px; 
} 

Und unsere HTML wird wie folgt aussehen:

<article class="post-wrapper"> 
    ... 
</article> 

Dann haben wir unsere Farbthemen festgelegt:

/* CSS THEMES 
* Here we will set every color that will change with our current state. 
* It could change colors, widths, font-sizes, :hover, or anything that we need 
* to be changed. 
*/ 
.warning{ 
    color: #9A2C2C; 
    background-color: #FFE2E2; 
    border-color: #9A2C2C; 
} 

.info{ 
    color: #2D5E7D; 
    background-color: #CEEAF1; 
    border-color: #2D5E7D; 
} 

.success{ 
    color: #2D7D36; 
    background-color: #CEF1D2; 
    border-color: #2D7D36; 
} 

Und unser HTML ändert sich an den Staat abhängig:

<article class="post-wrapper info"> 
    ... 
</article> 

<article class="post-wrapper success"> 
    ... 
</article> 

<article class="post-wrapper warning"> 
    ... 
</article> 

Live ex reichlich:https://jsfiddle.net/xwazzo/Ls9f313g/2/

ich hier eine Bootstrap-Beispiel verlassen, die Kontext-bezogene Farben zeigt: http://getbootstrap.com/css/#helper-classes-colors

Schlussfolgerungen:

Ich mag die zweite Option und es verwenden, haben mehr, weil ich nicht gefunden haben, Eine Möglichkeit, einfach und schnell mehrere CSS-Dateien mit verschiedenen Farben zu erstellen und das Gewicht der Website nicht zu sehr zu erhöhen.

Ich nehme an, dass der erste Weg der beste ist, weil Sie weniger Klassen auf Ihrem Stylesheet haben werden und einige KB sparen werden.

Answer 2

Ist nicht die große Macht über CSS-Stylesheets, dass Sie sie einfach synonym verwenden können? Verwenden Sie separate Themen, indem Sie einfach die CSS-Datei ersetzen?

Wie auch immer, wenn Sie die Stile Ihrer Komponenten zur Laufzeit ändern möchten, wie ich annehme von:

Ist es, wie ich befürchtet habe, muss ich einen separaten Stylesheet für jedes Thema und wechseln zwischen Stylesheets?

Sie können jede Komponente zur Laufzeit neu formatieren. Jedes Objekt in JavaFX erstreckt sich von Node. Was wiederum Styleable implementiert. Welche gibt Ihnen mehrere Styling-Optionen.

Falls Sie ganze Stylesheets ändern MÖCHTEN, können Sie Stylesheets in Ihrer Szene hinzufügen und entfernen.

Answer 3

Der korrekte Ansatz in JavaFX-CSS ist die Verwendung von Farbvariablen (und vielleicht die Ableitungs-/Ladder-Funktionen). So haben Sie wahrscheinlich 3 CSS-Files:

• style.css - mit den Selektoren für Ihre Komponenten und Verweise auf Farbvariablen
• themen default.css - mit den Standardfarbvariablen
• Themen-

  .button { 
      -fx-background-color: my-button-background-color; 
  } 
  

  : - blue.css mit blauen Farbvariablen

Ihre style.css könnte wie folgt aussehen Und Ihre themen default.css würde

.root { 
    my-button-background-color: #f00; 
} 

sein und Ihr Thema-blue.css wäre:

.root { 
    my-button-background-color: #00f; 
} 

Wenn Sie Themen spiegeln möchten Sie das Thema-default.css einfach entfernen würde aus der Szene und fügen Sie die theme-blue.css (Zurückschalten würden Sie das Gegenteil tun) in Pseudocode:

Scene s = ... 
s.getStylesheet().addAll("style.css", "theme-default.css"); 

// ... 
button.setOnAction(e -> { 
    if(s.getStylesheet().contains("theme-default.css")) { 
    s.getStylesheet().remove("theme-default.css"); 
    s.getStylesheet().add("theme-blue.css"); 
    } else { 
    s.getStylesheet().remove("theme-blue.css"); 
    s.getStylesheet().add("theme-default.css"); 
    } 
});