Bubble.io Tutorial - Dark Mode Funktionalität selbst in Bubble entwickeln

In diesem Video lernt ihr ohne Plugins mit den Standard-Features von Bubble einen Dark Mode zu erstellen. Dark Mode Features werden von vielen Nutzern mittlerweile gewünscht und sind ein wichtiger Teil der User Experience. Ein empfehlenswerter Blogpost zum Thema von Superhuman: Hier

Transkript:
Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir im Bubble ein Dartmouth Feature selber entwickeln können. Dartmouth wird gerne genutzt von vielen Apps, ob das YouTube, Spotify oder Twitter ist, weil eben die Nutzer manchmal lieber hell die Seiten nutzen mit viel Kontrast oder zum Browsen lieber eine dunkle Seite haben. Wir legen direkt mal los.

Ich habe ein paar Elemente bereits vorbereitet Navigationsleiste und das allgemeine Website Layout. Wir brauchen jetzt aber ein Icon in der Navigationsleiste. Sie benutzen hier das Icon Tool of. Und als Farbe nehmen wir Schwarz als STANDARD Farbe dafür. Darüber positionieren wir ein zweites Icon. Nennen das. Nämlich Mon. Und platzieren das darüber. Und wir gehen als nächstes in die Workflows und machen, wenn Page is loaded steht, state of und Element. Und wir nehmen die Seite Dark Mode.

Wir stellen einen neuen Custom State, nennen diesen Dark Mode und das ist ein Yes oder No fällt. Standardmäßig setzen wir diesen auf Nein. Anschließend klicken wir hier auf das Toggle, machen einen Workflow und sagen Dieser Workflow tab ist nur, wenn Dark Mode Dark Mode ist. Nein. Also quasi der helle Modus. Dann. SED-Staates von Element Dark Mode Dark Mode auf Java Wie kopieren einmal den Workflow und mach das einmal grün. Einmal rot, um quasi den Kontrast zu sehen. Jetzt sagen wir, wenn Dartmouth jetzt ist. Also wir sind im Dartmouth. Dann setzen wir den Dartmouth auf No Code.

Anschließend legen wir nun fest, was passiert denn im Dartmouth? Und wir gehen in einen Conditional und sagen Wenn. Dark Mood Dark Mode ist. Ja, dann ändern wir die Farbe auf Weiß, kopieren dieses Conditional. Und ändern nun aber die von Color auf Weiß. Hier haben das Conditional bereits kopiert. Geh noch mal rein! Sagen hier nun einerseits die Icon Google auf weiß und zweitens das Icon selber ist Toggle und. Kopien auch hier noch mal das Conditional. Fügen das hinzu. Und ändern hier nun auf die Sonne, also quasi.

Es geht wieder zurück. Auch hier sagen wir wenn Dark Nocode. Jetzt. Kaller Keys. Als nächstes gehen wir jetzt noch in den Text, legen wiederum das Conditional an. Auch hier wiederum die von Kalle auf Weiß kopieren hier das Conditional von Martin und fügen es hinzu. Der letzte Punkt ist nur noch die Seite selbst. Auch hier fügen wir das Conditional hinzu. Wenn Dartmouth Dartmouth ist. Yes! Dann bitte die Hintergrundfarbe auf schwarz. Und wir gehen jetzt einmal ins Preview, um uns das Ganze anzuschauen. Klicken auf Dark Mode. Wir sehen alles ist hell, Sonne hat sich geändert. Und gehen wieder zurück.

So habt ihr gesehen, wie wir unseren eigenen Dartmouth im Bubble entwickeln können, ohne Plugins oder andere Tools, ganz einfach mit den STANDARD Features von Bubble.

Wenn euch dieses Video gefallen hat, klickt gerne auf den Like-Button oder subscribe den Channel. Wenn ihr Fragen habt zu Bubble gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.