User Theme Switcher

[tim.young]

Of course!

1. Create a theme CSS file. In this example, I used the 2 themes posted here Community Created Themes

2. You need to host these files somewhere. For me, the easiest thing to do was create a data table in this example app and upload the CSS files to that data table. By clicking the DOWNLOAD link for an uploaded file, you can retrieve the URL for that file. I also took a screen shot of each theme running on an app and uploaded it to an image field.

3. In the Users table, create 2 fields

• Text field for holding the URL of the selected theme
• Connection to the data table where the themes are stored

4. Create 2 rules in the Users data table. Rule 1 sets the Light theme when a new user is created, Rule 2 get’s the theme URL every time a User selected a new theme from the connected data table storing the themes.

5. Now we need to build the structure for a User to select a theme. On the profile page, add the connected theme field from step 3. This is also where I pull in the screenshot of the them by adding connected fields -> theme screenshot image. When the User selects a theme from the dropdown, the screen shot will populate.

6. In order to get the app to use the selected theme, we have to do 2 things.

A. We need to append a stylesheet into the app . The code pulls the theme URL from the field we saved it to using the User Table Record Rules. We do this in the PAGE LAYOUT by using this code…

$('head').append($('<link href="{loggedInUser.theme src}" rel="stylesheet" type="text/css">'));

B. Next we go back to the Profile page, and add some more JS. This code refreshes the page when the Submit button is clicked and TA-DA, the theme has changed.

var submitButtonLoaded = false;
function checkIfSubmitButtonHasLoaded() {
    if(submitButtonLoaded === false) {
        if ($('#x_element_page_3_4 .form-submit button').html() !== undefined) {
            submitButtonLoaded = true;
        }
       window.setTimeout(checkIfSubmitButtonHasLoaded, 100);
    } else {
       $('#x_element_page_3_4 .form-submit button').click(function(){
    location.reload();
});
    }
}
checkIfSubmitButtonHasLoaded();

I think that's it, let me know if you can get it working, if you have any questions, or if I missed anything.