Overview
This tutorial walks you through customizing your application's user interface using a JSON configuration file. You will learn the structure of the config, how to apply it, and see a live demo that updates instantly as you edit the JSON.
Configuration Structure
{
"theme": "light",
"primaryColor": "#4a90e2",
"components": {
"header": {
"title": "My App",
"logoUrl": "/assets/logo.png"
},
"sidebar": {
"items": [
{ "label": "Home", "icon": "home", "link": "/" },
{ "label": "Dashboard", "icon": "dashboard", "link": "/dashboard" }
]
}
}
}
The top‑level keys control the global theme and primary color. The components object defines individual UI parts. Use the following values:
- theme:
"light"or"dark" - primaryColor: any valid CSS color
- components.header.title: text displayed in the header
- components.header.logoUrl: path to the logo image
- components.sidebar.items: array of navigation items
Applying the Configuration
Load the configuration at runtime and merge it with the default UI settings. Below is a minimal JavaScript snippet you can place in app.js:
async function loadUIConfig(url){
const res = await fetch(url);
const config = await res.json();
applyTheme(config.theme);
setPrimaryColor(config.primaryColor);
renderHeader(config.components.header);
renderSidebar(config.components.sidebar);
}
loadUIConfig('/config/ui.json');
The helper functions applyTheme, setPrimaryColor, renderHeader, and renderSidebar are part of the UI library. They read the config and update the DOM accordingly.