Theme Issue Fix

[hutiwephy]

What was Happening Recently I started trying to use my own color choices and I was having some building issues but because I was using Android Studio to load and debug the application on my phone I was able find that the androidjs-builder was applying my values to the styles.xml instead of the colors.xml

To Reproduce (the FIX)

• by going over to the temporary project folder: C:\Users\{Your_Username}.androidjs\cache\androidjs-sdk\res\values there will be a file named colors.xml
• if you open that file on a text editor and scroll to the 'color' elements with the 'colorAccent', 'colorPrimary', 'colorPrimaryDark' name property and set the values to the respective color values they will be applied (taking in considertion that the values where converted from RGB to RGBA Hex Values)
• to prevent a build error it is also nessessary to change the Project package.json, to the default non themed values by removing the 'colorAccent', 'colorPrimary', 'colorPrimaryDark' from the theme entry and setting 'fullScreen' back to true
• Finally execute the build command and the resulting APK will be correctly Themed

Screenshots The Modified package.json

The modified colors.xml

The Resulting App

Desktop:

• OS: Windows 10
• Browser: Firefox
• Version: build 2004

Smartphone:

• Device: Xiaomi Redmi Note 8T
• OS: Android 10 (NON ROOT)
• Browser: Chrome (Pre-Installed From Factory)

[dydgns2017]

@hutiwephy Thank you for your comment

i already try it but when i use andoridjs build command color xml file is modified default

so i modified android js build file

file name : updateAppTheme.js

like that

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require('fs');
const xml2js = require('xml2js');
const path = require('path');
function updateTheme(env, callback) {
    console.log(`updating theme ...`);
    let pkg = require(path.join(env.project.dir, 'package.json'));
    let theme = pkg.theme;
    if (theme === undefined) {
        console.log('theme attribute not found in package.json');
        callback();
    }
    else {
        const stylesXML = path.join(env.builder.cache, env.sdk.repo, 'res', 'values', 'styles.xml');
        const colorsXML = path.join(env.builder.cache, env.sdk.repo, 'res', 'values', 'colors.xml');
        let parser = new xml2js.Parser();
        let builder = new xml2js.Builder();
        let data = fs.readFileSync(stylesXML);
        let colorsData = fs.readFileSync(colorsXML);
        parser.parseString(colorsData, function (err, result) {
            if (err) {
                console.log("Failed to update theme");
                process.exit();
            } else {
                try {
                    let xml_colorAccent = result.resources.color[18];
                    let xml_colorPrimary = result.resources.color[19];
                    let xml_colorPrimaryDark = result.resources.color[20];
                    xml_colorAccent._ = '#FF3498DB';
                    xml_colorPrimary._ = '#FFFFFFFF';
                    xml_colorPrimaryDark._ = '#FF1976D2';
                    let xml_color = builder.buildObject(result);
                    fs.writeFileSync(colorsXML, xml_color);
                    if (env.debug) {
                        console.log('Theme Updated');
                    }
                } catch (e) {
                    console.log("Failed to update theme");
                }
            }
        });
        parser.parseString(data, function (err, result) {
            if (err) {
                console.log("Failed to update theme");
                process.exit();
            } else {
                try {
                    // Updating theme
                    let thm = result.resources.style[6].item;
                    thm[3] = { _: 'true', '$': { name: 'android:windowNoTitle' } };
                    thm[4] = { _: 'true', '$': { name: 'android:windowFullscreen' } };
                    // thm[5] = {_: 'false', '$': {name: 'android:windowActionBar'}};
                    thm[0]._ = pkg.theme.colorAccent || '@color/colorAccent'; // colorAccent
                    thm[1]._ = pkg.theme.colorPrimary || '@color/colorPrimary'; // colorPrimary
                    thm[2]._ = pkg.theme.colorPrimaryDark || '@color/colorPrimaryDark'; // colorPrimaryDark
                    if (pkg.theme.fullScreen) {
                        thm[3]._ = true; //{ _: 'true', '$': { name: 'android:windowNoTitle' } };
                        thm[4]._ = true; //{ _: 'true', '$': { name: 'android:windowFullscreen' } };
                    } else {
                        thm[3]._ = true;
                        thm[4]._ = false;
                    }
                    let xml = builder.buildObject(result);
                    fs.writeFileSync(stylesXML, xml);
                    if (env.debug) {
                        console.log('Theme Updated');
                    }
                    callback();
                }
                catch (e) {
                    console.log("Failed to update theme");
                    callback(e);
                }
            }
        });
    }
}
exports.updateTheme = updateTheme;

[Chhekur]

@dydgns2017 can you submit a PR if your solution works, so that others can also take advantage of this?

[dydgns2017]

@Chhekur of course! i'll PR on this weeks

[nmagko]

@hutiwephy Thank you for your comment

i already try it but when i use andoridjs build command color xml file is modified default

so i modified android js build file

file name : updateAppTheme.js

like that

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require('fs');
const xml2js = require('xml2js');
const path = require('path');
function updateTheme(env, callback) {
    console.log(`updating theme ...`);
    let pkg = require(path.join(env.project.dir, 'package.json'));
    let theme = pkg.theme;
    if (theme === undefined) {
        console.log('theme attribute not found in package.json');
        callback();
    }
    else {
        const stylesXML = path.join(env.builder.cache, env.sdk.repo, 'res', 'values', 'styles.xml');
        const colorsXML = path.join(env.builder.cache, env.sdk.repo, 'res', 'values', 'colors.xml');
        let parser = new xml2js.Parser();
        let builder = new xml2js.Builder();
        let data = fs.readFileSync(stylesXML);
        let colorsData = fs.readFileSync(colorsXML);
        parser.parseString(colorsData, function (err, result) {
            if (err) {
                console.log("Failed to update theme");
                process.exit();
            } else {
                try {
                    let xml_colorAccent = result.resources.color[18];
                    let xml_colorPrimary = result.resources.color[19];
                    let xml_colorPrimaryDark = result.resources.color[20];
                    xml_colorAccent._ = '#FF3498DB';
                    xml_colorPrimary._ = '#FFFFFFFF';
                    xml_colorPrimaryDark._ = '#FF1976D2';
                    let xml_color = builder.buildObject(result);
                    fs.writeFileSync(colorsXML, xml_color);
                    if (env.debug) {
                        console.log('Theme Updated');
                    }
                } catch (e) {
                    console.log("Failed to update theme");
                }
            }
        });
        parser.parseString(data, function (err, result) {
            if (err) {
                console.log("Failed to update theme");
                process.exit();
            } else {
                try {
                    // Updating theme
                    let thm = result.resources.style[6].item;
                    thm[3] = { _: 'true', '$': { name: 'android:windowNoTitle' } };
                    thm[4] = { _: 'true', '$': { name: 'android:windowFullscreen' } };
                    // thm[5] = {_: 'false', '$': {name: 'android:windowActionBar'}};
                    thm[0]._ = pkg.theme.colorAccent || '@color/colorAccent'; // colorAccent
                    thm[1]._ = pkg.theme.colorPrimary || '@color/colorPrimary'; // colorPrimary
                    thm[2]._ = pkg.theme.colorPrimaryDark || '@color/colorPrimaryDark'; // colorPrimaryDark
                    if (pkg.theme.fullScreen) {
                        thm[3]._ = true; //{ _: 'true', '$': { name: 'android:windowNoTitle' } };
                        thm[4]._ = true; //{ _: 'true', '$': { name: 'android:windowFullscreen' } };
                    } else {
                        thm[3]._ = true;
                        thm[4]._ = false;
                    }
                    let xml = builder.buildObject(result);
                    fs.writeFileSync(stylesXML, xml);
                    if (env.debug) {
                        console.log('Theme Updated');
                    }
                    callback();
                }
                catch (e) {
                    console.log("Failed to update theme");
                    callback(e);
                }
            }
        });
    }
}
exports.updateTheme = updateTheme;

Hi,

I'm having an issue hiding status bar in fullscreen mode. This patch allows to me to change status bar color to the app theme.

Thanks. Victor C.