Default App to Dark Mode

General Q&A
1

Is there an easy way to default all users to dark mode when they log into the app? I guess I could swap all the colors between light and dark in the theme editor which would accomplish this, but I don’t even see a way to rename the themes so this would be a bit confusing on the app side. The theme editor in general seems rather limiting unless I’m missing an editable file somewhere:

image
image795×851 25.1 KB

2

To set the app in dark theme by default when the app is opened, you can do the following:

  1. Update your main view init function and do the following:
function init () {
    journey.theme = "dark";
}

Every time the app is opened the dark theme will be enabled by default.

If you want to persist this state to the user (the user selected theme is saved) do the following:

  1. Add a new field to the user model e.g.
<field name="theme" label="Theme" type="text" />
  1. Update the init to read the selected theme from the current user object e.g.
function init () {
    journey.theme = user.theme;
}
  1. Update your nav.js to save the selected theme state to the user when the user toggles between states.

XML

<navigation logo="images/logo.png" style-header-background="#1A252A">
    <general-section>
         <item label="{$:themeLabel()}" icon="$:themeIcon()" on-press="$:toggleTheme()" />
    </general-section>
</navigation>

JS

/**
 * Toggle the theme label based on the current theme
 */
function themeLabel() {
    var currentTheme = journey.theme;
    return currentTheme == 'dark' ? 'Day' : 'Night'
}

/**
 * Toggle the theme icon based on the current theme
 */
function themeIcon() {
    var currentTheme = journey.theme;
    return currentTheme == 'dark' ? 'fa-sun' : 'fa-moon';
}

/**
 * Toggle the theme based on the current theme
 */
function toggleTheme() {
    var currentTheme = journey.theme;
    if (currentTheme == 'dark') {
        journey.theme = 'light';
        user.theme = 'light';
    } else {
        journey.theme = 'dark';
        user.theme = 'dark';
    }
    user.save();
}