Darkmode

[Bushisan]

Hallo zusammen,

hab mal gegoogelt und auch eine KI diesbezüglich gefragt. Vorschläge seitens der KI gab es viele - funktioniert hat keiner Habt Ihr schon Erfahrungen diesbezüglich ? Wollte herausfinden ob ich ne komplette "dunkle" Seite brauche und auf die verlinken muss oder ob es auch andere Wege gibt sowas zu realisieren.

Grüße

[Volker]

Schalter und dann entsprechende CSS


HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content" mbr-class="{'dark-mode-active': darkMode}">
    <mbr-parameters>
        <header>Design Modus</header>
        <input type="checkbox" title="Dark Mode aktivieren" name="darkMode">
        
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" value="10" step="1">
        
        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle">
        <input type="checkbox" title="Subtitle" name="showSubtitle" checked>
        
        <header>Hintergrund (Light Mode)</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-md-12 col-lg-{{textWidth}}">
                <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
                    <b>Article Title</b>
                </h3>
                <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">
                    Enter your subtitle here
                </h4>
                <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    You can use content blocks to arrange your articles, large texts, instructions. Combine these blocks with media blocks to add illustrations and video tutorials. You can use various content blocks to work with your text. Add quotations, lists, buttons. Select your text to change its formatting or add links. Mobirise is a simple website builder that helps you create amazing web pages without knowing any code.
                </p>
            </div>
        </div>
    </div>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
transition: all 0.3s ease-in-out;
&.dark-mode-active {
  background-color: #232323 !important;
  .mbr-section-title, .mbr-section-subtitle, .mbr-text {
    color: #ffffff !important;
  }
}
.mbr-section-title, .mbr-section-subtitle, .mbr-text {
  transition: color 0.3s;
}

[Volker]

Und wenn Du meinst das der User das selber schalten soll:


HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content" id="dark-block-1">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" value="10" step="1">
        
        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle">
        <input type="checkbox" title="Subtitle" name="showSubtitle" checked>
        
        <header>Standard-Hintergrund</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-end mb-4">
            <div class="col-auto d-flex align-items-center">
                <span class="mbr-fonts-style display-7 me-2">Dark Mode</span>
                <label class="switch">
                    <input type="checkbox" id="darkToggle">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-12 col-lg-{{textWidth}}">
                <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
                    <b>Article Title</b>
                </h3>
                <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">
                    Enter your subtitle here
                </h4>
                <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    Hier kann der User jetzt selbst entscheiden, ob er den Text hell oder dunkel lesen möchte. Der Schalter steuert das Design live auf der fertigen Website.
                </p>
            </div>
        </div>
    </div>
    <script>
document.getElementById('darkToggle').addEventListener('change', function() {
    // Sucht die Section, in der der Schalter liegt
    var section = this.closest('section');
    
    if(this.checked) {
        section.classList.add('user-dark-mode');
    } else {
        section.classList.remove('user-dark-mode');
    }
});
</script>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
transition: background-color 0.4s, color 0.4s;
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #232323;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
&.user-dark-mode {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  .mbr-section-title, .mbr-section-subtitle, .mbr-text {
    color: #ffffff !important;
  }
}

Hier mal eben eingebaut: https://www.niederastroth.de/farbicons1/

ganz unten der Block

[Bushisan]

Hallo Volker - Danke erstmal - aber da passiert nichts - in keiner Variante

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;

diese Parameter sind undefiniert und wenn ich auf das Kästchen klicke passiert nichts

[Volker]

Hä ?

Der Code ( beide) klappt 100 % Du musst einen Artikel Block nehmen KEIN HTML Block !!!!!

IMMER !!!!!

Meinen Code da rein alles andere löschen !

[Bushisan]

Ja - sorry - klappt - allerdings nur für den einen Block - ich möchte natürlich die ganze Seite dunkel haben !

[Tommy Herrmann]

Hubi,

diese Meldung [Parameter sind undefiniert] kommt immer dann, wenn es im CSS-Editor Variablen gibt, die noch gar nirgends definiert wurden. Dafür hatte ich dann auch u.a. meine Seite erstellt, bei der man das gut erkennen kann:

https://www.mobirise-tutorials.com/Tuto ... odify.html

Zum Beispiel - dieser Schieber gründet die Variable, die ich "myWidth" ("meineBreite") genannt habe:

name="myWidth"

<input type="range" name="myWidth" title="Border Width" min="1" max="50" value="8" step="1">

Angesprochen wird diese Varibale dann als @myWidth im CSS. Dort wird sie mit 1 multipliziert, d.h. man kann den Schieber um mindestens 1px verschieben:

border-top: (@myWidth * 1px) @lineColor;

Im <input> Feld (oben) habe ich noch andere Parameter mitgegeben, so kann man die Breite z.B. maximal auf 50px ändern, das könnte man auch in jede andere Zahl ändern (seinen Bedürfnissen anpassen).

[Bushisan]

Hallo Tommy, ja das hab ich gesehen. Es war allerdings ein valuewert eingetragen.

[Tommy Herrmann]

Der Wert "name" setzt die Variable. "value" zeigt nur den gerade eingestellten Wert an (in meinem Beispiel "8"). Mit "value" kann man also einen Wert auch vorbelegen (Stellung vom Schieber).

<input type="range" name="myWidth" title="Border Width" min="1" max="50" value="8" step="1">

[Bushisan]

Hi Tommy, das hab ich auch so verstanden - daher war ich über diese Fehlermeldungen so überrascht. Schließlich war ja ein Wert definiert (denke ich)

[Tommy Herrmann]

Der Parameter "name" war aber sicher nicht definiert. Der Parameter "value" spielt keinerlei Rolle für die CSS-Variable.

[Bushisan]

Alles klar - ich Danke Dir Tommy!

Schon Ostersonntag noch

[Volker]

Ja - sorry - klappt - allerdings nur für den einen Block - ich möchte natürlich die ganze Seite dunkel haben !

Das ist nicht so ganz einfach, weil du dann überall in jedem Block die CSS ändern musst und eine globale CSS erstellen müsstest.

Die CSS müsste dann in die Seiteneigenschaften inside head:

Code: Alles auswählen

<style>
:root {
    --bg-color: #ffffff;
    --text-color: #232323;
    --title-color: #000000;
}

/* Wenn der Dark-Mode aktiv ist, ändern sich NUR die Werte der Variablen */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #bbbbbb;
    --title-color: #ffffff;
}

/* Damit die Farben weich überblenden */
body {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--bg-color);
    color: var(--text-color);
}
</style>

Für die Blöcke dann die CSS so in der Art ändern:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);

/* Wir nutzen die Variablen von oben */
background-color: var(--bg-color) !important;

.mbr-section-title {
    color: var(--title-color) !important;
}
.mbr-text {
    color: var(--text-color) !important;
}

Das Javascrip auch in die Globalen Seiteneigenschaften end of body:

Code: Alles auswählen

<script>
function toggleDarkMode() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    document.documentElement.setAttribute('data-theme', targetTheme);
    
    // Optional: Auswahl im Browser speichern
    localStorage.setItem('theme', targetTheme);
}

// Beim Laden der Seite gespeichertes Theme abrufen
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
}
</script>

Und zu guter Letzt noch den Schalter in das Menü oben oder im ersten Block:

Code: Alles auswählen

<button onclick="toggleDarkMode()" class="btn btn-primary">
    Modus wechseln
</button>

Das müsste so gehen, aber wie gesagt musst Du dann in jedem Block die CSS anpassen auf die Variablen.
Sehr aufwendig.

Alternativ:

Aus allen Blöcken die CSS raus nehmen, eine globale CSS erstellen und verlinken. Geht auch

[Tommy Herrmann]

... na ja - in Mobirise wird das auch über die globale CSS nicht funktionieren, da diese ja mit der CSS eines jeden Blocks wieder überschrieben wird - das auch noch oft mit !important (!wichtig) was Vorrang über alle anderen Regeln hat.

[Volker]

Ja Tommy,
aber für reine Textblöcke sollte das gehen denke ich.

Geht

https://www.niederastroth.de/farbicons1/

[Tommy Herrmann]

Meiner Ansicht nach ginge das mit Mobirise ausschließlich über einen kompletten Neubau der gesamten Website - ob es das dann bringt??? Glaube eher nicht - zumal dieser Darkmode (Dunkeltuten) sehr veraltet oder besser gesagt sehr überstrapaziert ist. Der breite Trend, Webseiten und Apps mit einem dunklen Modus auszustatten, begann Ende der 2010er Jahre.

[Bushisan]

Mal sehen wie es weitergeht - ich Danke Euch für Eure Zeit. Bin halt von der Vorstandschaft angesprochen worden. Wie ich - überwiegend alte Leute die es vielleicht etwas dunkler mögen. Ich halt Euch auf dem Laufenden

[Bushisan]

Hallo zusammen, hab das mit dem DarkMode mit ner zweiten verlinkten Seite gemacht. Da hatte ich mehr Spielräume was die Farbgebung angeht denke ich. War ja auch recht einfach - Seite geklont, neue Farben vergeben und Links geändert-

https://www.shotokan-karate-dojo-neukir ... index.html

Grüße

[struggle]

Ich finde den Dark-Modus gut !(bin ja auch schon älter )

[Rancher]

Ich versteh' den Sinn nicht. Was hat das mit älter zu tun?
Eher mit Seheinschränkungen, oder?