Themes

As of v1.2.0 KWebBrew supports themes!

Themes work almost exactly the same as apps, if you haven't, it is recommended you read the tutorial on making a KWebBrew app

Theme's differ in the sense that:

• They are placed in the kwebbrew/themes folder
• They do not use HTML or JS files
• Their manifest format differs

Below is an example of a theme's manifest format:

{
    "manifestVersion": 1,
    "themeVersion": "v1.0.0",
    "id": "com.kwebbrew.defaultTheme",
    "name": "Default",
    "author": "Bluebotlaboratories",
    "description": "The default theme for KWebBrew",
    "repo": "https://github.com/Bluebotlaboratories/KWebBrew",
    "entrypoint": "default.css"
}

The theme is located in kwebbrew/themes/com.kwebbrew.default and as you might have guessed, the corresponding CSS file is located at kwebbrew/themes/com.kwebbrew.default/default.css

The CSS file only overrides the KWebBrew dashboard, not any apps, to see what can be changed, look at the index.html file in the kwebbrew folder or the default.css file as mentioned above

For your convenience, attached are the contents of the default.css file as well:

/*===============================*/
/*                               */
/* Copyright Bluebotlaboratories */
/*                               */
/*===============================*/

.pageWrapper {
    padding: 0;
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border: none;
    border-spacing: 0;
    min-height: 100vH;
}

.pageWrapper tbody,
tr,
td {
    padding: 0;
    margin: 0;
}

.title {
    text-align: center;
    background-color: #333;
    color: #FFF;
    margin: 0;
    padding: 1em;
}

#loading {
    text-align: center;
}

.logSection {
    padding: 1em 0;
    min-height: 10%;
    max-width: 100%;
    background-color: #333;
}

.logSection button {
    background-color: #FFF;
    color: #000;
    padding: 1em;
    border: none;
    font-size: 0.5em;
}

.logSection button:active {
    background-color: #000;
    color: #FFF;
}

#log {
    color: #FFF;
}

.title h1 {
    margin-top: 0;
}

.appTable {
    table-layout: fixed;
    border-collapse: separate;
}

.appRow {
    width: 100%;
}

.app {
    padding: 1.5%;
    width: 25%;
    text-align: center;
}

.app img {
    object-fit: contain;
    width: 100%;
    /*border-radius: 5%;*/
}