(function() { function hexToSolidLight(hex, opacity) { const num = parseInt(hex.replace("#", ""), 16); const r = num >> 16; const g = (num >> 8) & 0x00ff; const b = num & 0x0000ff; const finalR = Math.round(r * opacity + 255 * (1 - opacity)); const finalG = Math.round(g * opacity + 255 * (1 - opacity)); const finalB = Math.round(b * opacity + 255 * (1 - opacity)); return "#" + ((1 << 24) + (finalR << 16) + (finalG << 8) + finalB).toString(16).slice(1); } function adjustColor(hex, percent) { const num = parseInt(hex.replace("#", ""), 16); const amt = Math.round(2.55 * percent); const R = (num >> 16) + amt; const G = ((num >> 8) & 0x00ff) + amt; const B = (num & 0x0000ff) + amt; return ( "#" + ( 0x1000000 + (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 + (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 + (B < 255 ? (B < 1 ? 0 : B) : 255) ) .toString(16) .slice(1) ); } function generateColorVariants(baseColor) { return { light: hexToSolidLight(baseColor, 0.14), lightSoft: hexToSolidLight(baseColor, 0.4), lightHover: adjustColor(baseColor, 80), lightActive: adjustColor(baseColor, 60), base: baseColor, hover: adjustColor(baseColor, -10), active: adjustColor(baseColor, -20), dark: adjustColor(baseColor, -30), darkHover: adjustColor(baseColor, -40), darkActive: adjustColor(baseColor, -50), darker: adjustColor(baseColor, -60) }; } function generateSidebarGradient(baseColor) { return ( "linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), " + "linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), " + "linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), " + "linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), " + baseColor ); } function applyTheme(config) { if (!config || !config.theme || !config.theme.colors) return; const colors = config.theme.colors; const useGradient = config.theme.sidebarUseGradient === true; const root = document.documentElement; Object.keys(colors).forEach(function(key) { const value = colors[key]; if (typeof value === "string") { if (key === "sidebarBg") { root.style.setProperty("--baz-sidebar-bg", useGradient ? generateSidebarGradient(value) : value); } else { const variants = generateColorVariants(value); root.style.setProperty("--baz-" + key, variants.base); root.style.setProperty("--baz-" + key + "-hover", variants.hover); root.style.setProperty("--baz-" + key + "-active", variants.active); root.style.setProperty("--baz-" + key + "-light", variants.light); root.style.setProperty("--baz-" + key + "-light-soft", variants.lightSoft); root.style.setProperty("--baz-" + key + "-light-hover", variants.lightHover); root.style.setProperty("--baz-" + key + "-light-active", variants.lightActive); root.style.setProperty("--baz-" + key + "-dark", variants.dark); root.style.setProperty("--baz-" + key + "-dark-hover", variants.darkHover); root.style.setProperty("--baz-" + key + "-dark-active", variants.darkActive); root.style.setProperty("--baz-" + key + "-darker", variants.darker); } } }); // Store auth background in data attribute (critical for full-page backgrounds) // Logos use skeleton placeholders instead - simpler and better UX if (config.branding && config.branding.authBg) { root.setAttribute("data-auth-bg", config.branding.authBg); } } try { // Strategy 1: Try localStorage first (fastest for returning users) var cachedConfig = localStorage.getItem("config-storage"); if (cachedConfig) { var parsed = JSON.parse(cachedConfig); if (parsed && parsed.state && parsed.state.config) { applyTheme(parsed.state.config); return; // Success! Exit early } } // Strategy 2: Use server-injected config (for new users or if localStorage failed) var serverConfig = {"theme":{"colors":{"primary":"#D92128","secondary":"#000000","tertiary":"#FF6B6B","success":"#28a745","error":"#ffc107","sidebarBg":"#E3000F","sidebarLogoBg":"#fff"},"sidebarUseGradient":false},"branding":{"companyName":"Sterling Bank","logo":{"authForms":"/icons/svgs/sterling-logo-full.svg","sideBar":"/icons/svgs/sterling-logo-full.svg","general":"/icons/svgs/sterling-logo-full.svg"},"authBg":"/icons/svgs/sterling-auth-bg.svg","contact":{"phone":"0201 888 8822 / 0700 822 0000","email":"customercare@sterling.ng"},"termsAndConditionsUrl":"https://sterling.ng/privacy/","privacyPolicyUrl":"https://sterling.ng/privacy/"},"metadata":{"title":"SterlingPro X","description":"SterlingPro X is a Corporate Internet Banking Platform","favicon":"https://storage.googleapis.com/internet_banking_storage/documents/favicon.ico"}}; applyTheme(serverConfig); } catch (e) { // Silently fail - React will handle it with ConfigProvider console.error("Theme initialization error:", e); } })();