Switch Site Colour Themes

Wappler General How To
#1

I have a value in my database that is queried on all pages of my dynamic 1 page website (if that makes sense), the data has one of 3 possibilities which change the colour theme of my website.

The 3 possible values are BLUE | GREEN | BOTH

There are some pages that must show the BLUE theme, others that must show the GREEN theme and others where it does not matter which it displays, preferably if the user was just viewing a bunch of GREEN pages and then navigates to a BOTH page then I would like the theme to remain GREEN as per whatever they were viewing last.

On a static website
With normal PHP i would have done something like this on a BLUE page

<?php 
    session_start();
    $_SESSION['themeSwitching']='BLUE';
?>

And a GREEN page

<?php 
    session_start();
    $_SESSION['themeSwitching']='GREEN';
?>

And for a BOTH page I would need to do a check first and if it is already set to BLUE or GREEN do nothing otherwise set it to a default of whichever, in my case GREEN

<?php 
    session_start();
    if(!isset($_SESSION['themeSwitching'])) { $_SESSION['themeSwitching']='GREEN'; }
?>

How would I replicate this sort of functionality within my new dynamic one page website, and should I consider using datastore or stick with sessions?

#2

I have managed to get this working in a fully Wappler way, hehe, with this particular job my entire goal has been to complete it using as little custom code as possible, and so far, besides having cropper/croppie functionality there is nothing i have not managed to do by just using standard Wappler components.

This application is truly amazing.

2 Likes
#3

Can you share with us what approach did you use in Wappler?
Sessions are just fine to use, doesn’t matter they are not a part of Wappler UI :slight_smile:

#4

I did land up using sessions, through the Wappler UI, this is a true Wappler built site.

Added a session manager called “themeSwitcher” and defined a variable inside it called “themeswitch”

<dmx-session-manager id="themeSwitcher"></dmx-session-manager>

All my page viewing is controlled by a single page id, in my database, which gets queried and stored into a variable on the page, so all the App Connect side can use it as needed.

<dmx-value id="var_page_creation_id"></dmx-value>

I added a dmx on updated event like this

<dmx-value id="var_page_creation_id" dmx-on:updated="themeSwitcher.set('themeswitch',scPPPc.data.queryDbNav[0].pc_session != 'both' ? scPPPc.data.queryDbNav[0].pc_session : themeSwitcher.data.themeswitch)">
</dmx-value>

All this does is say if the database query returns ‘both’ then use whats already stored in the session variable, however if it returns anything else like BLUE or GREEN then rather use that.

The last part of this process was to adjust the actual theme, all that entailed was having my main css file which is always linked and generally shows the GREEN version of the site

<link rel="stylesheet" href="/styles.css" />

And adding a second style sheet after with a few over rides on the same classes

<div is="dmx-if" dmx-bind:condition="themeSwitcher.data.themeswitch == 'BLUE'">
    <link rel="stylesheet" href="/styles-blue.css" />
</div>

And that was pretty much it, if i open a page set to GREEN its GREEN, from that GREEN page I open a both page and its still GREEN, I open a BLUE page and it turns BLUE, I click back to get the previously shown both/GREEN page is now both/BLUE

I hope that makes some sense.

1 Like
#5

You can also change the body class if you don’t want to include multiple css files :slight_smile:

<body dmx-class:blue="themeSwitcher.data.themeswitch == 'BLUE'">

and add styles in your CSS then for body.blue h2.section-title { ... }

2 Likes
#6

I think this idea here is causing some issue, and I am not really sure why because it worked at first with multiple refreshes etc. and now i keep running into this console error.
Screenshot 2020-02-23 at 02.11.59

The offending line is

<dmx-value id="var_page_creation_id" dmx-on:updated="themeSwitcher.set('themeswitch',scPPPc.data.queryDbNav[0].pc_session != 'both' ? scPPPc.data.queryDbNav[0].pc_session : themeSwitcher.data.themeswitch)">
</dmx-value>

If removed it works fine, but obviously my theme does not switch.

If I keep the line and go into the page the very first time it works fine, if I refresh the page then it throws this error. The strange thing is where I was working on the theme switcher idea I must have refreshed to page 100 times and it always worked, so not really sure why i have this issue suddenly.

Any Ideas?

#7

I have been laying in the bath thinking about this one and I suppose the error does make sense.
I am basically saying

If the db query returns anything but both, then set it as per the value of the db query, ie blue or green.
Else read the value from the session, however there will be instances where the user has started their browsing on a page set to both and then there is no session already set.
I am going to try add a .default formatter to the else parameter and see if that fixes the issue I am having.
Will update here with my findings once I attempt it.