Ai team - Technology & Innovation

Mechanix

Mechanix

Device Understanding
Chat now
Fixara

Fixara

Repair Manipulation
Chat now
Magix

Magix

Magic Tech
Chat now
Innovix

Innovix

Innovation Manifestation
Chat now
Syncra

Syncra

System Sync
Chat now
Devix

Devix

Device Communication
Chat now
Enhancra

Enhancra

Tech Enhancement
Chat now
Circuix

Circuix

Magic Circuit
Chat now
Powerix

Powerix

Energy Flow
Chat now
Toolara

Toolara

Tool Creation
Chat now
function applyTheme(themeData) { // Header styles const header = document.querySelector('header'); if (header) { header.style.backgroundImage = `linear-gradient(180deg, ${themeData.header_background_color1} 0%, ${themeData.header_background_color2} 100%)`; header.style.borderBottomColor = themeData.header_border_bottom; } const stickyHeader = document.querySelector('.sticky-header'); if (stickyHeader) { stickyHeader.style.backgroundColor = themeData.header_inner_page_background_color; } // Hero section styles const heroH1 = document.querySelector('#hero h1'); if (heroH1) { heroH1.style.color = themeData.hero_home_text_color; } const heroP = document.querySelector('#hero p'); if (heroP) { heroP.style.color = themeData.hero_home_text_color; } const heroBtn = document.querySelector('#hero .btn'); if (heroBtn) { heroBtn.style.color = themeData.hero_button_text_color; heroBtn.style.backgroundImage = `linear-gradient(180deg, ${themeData.hero_button_background_color1} 0%, ${themeData.hero_button_background_color2} 100%)`; } const heroBtnHover = document.querySelector('#hero .btn:hover'); // Styles for hover need to be applied differently - usually in CSS for better performance if (heroBtnHover) { // You might need to handle hover states differently - CSS is generally better for hover effects. // For now, just setting background color on hover in JS - consider improving this with CSS classes if possible. heroBtnHover.style.backgroundColor = themeData.hero_button_background_color_hover; } // Menu links styles const menuLinks = document.querySelectorAll('.primary-menu li a'); menuLinks.forEach(link => { link.style.color = themeData.header_menu_links_color; }); // Sign-up button styles const signUpButtons = document.querySelectorAll('.btn-sign-up'); signUpButtons.forEach(button => { button.style.backgroundColor = themeData.btn_sign_up_background_color; button.style.color = themeData.btn_sign_up_text_color; button.style.borderColor = themeData.btn_sign_up_border_color; }); const signUpButtonsHover = document.querySelectorAll('.btn-sign-up:hover'); signUpButtonsHover.forEach(buttonHover => { buttonHover.style.backgroundColor = themeData.btn_sign_up_background_color_hover; buttonHover.style.color = themeData.btn_sign_up_text_color_hover; buttonHover.style.borderColor = themeData.btn_sign_up_border_color_hover; }); // Sign-in button styles - similar to sign-up buttons const signInButtons = document.querySelectorAll('.btn-sign-in'); signInButtons.forEach(button => { button.style.backgroundColor = themeData.btn_sign_in_background_color; button.style.color = themeData.btn_sign_in_text_color; button.style.borderColor = themeData.btn_sign_in_border_color; }); const signInButtonsHover = document.querySelectorAll('.btn-sign-in:hover'); signInButtonsHover.forEach(buttonHover => { buttonHover.style.backgroundColor = themeData.btn_sign_in_background_color_hover; buttonHover.style.color = themeData.btn_sign_in_text_color_hover; buttonHover.style.borderColor = themeData.btn_sign_in_border_color_hover; }); // Primary buttons styles - similar to sign-up buttons const primaryButtons = document.querySelectorAll('.btn-primary'); primaryButtons.forEach(button => { button.style.backgroundColor = themeData.btn_primary_background_color; button.style.color = themeData.btn_primary_text_color; }); const primaryButtonsHover = document.querySelectorAll('.btn-primary:hover'); primaryButtonsHover.forEach(buttonHover => { buttonHover.style.backgroundColor = themeData.btn_primary_background_color_hover; buttonHover.style.color = themeData.btn_primary_text_color_hover; }); // Apply card theme class const aiCards = document.querySelectorAll('.card-ai'); if (themeData.ai_card_style === 'card-ai-theme-1') { aiCards.forEach(card => { card.classList.add('card-ai-theme-1'); }); } } document.addEventListener('DOMContentLoaded', function() { // Assuming themeSettings is globally available because it's in website settings JS if (typeof themeSettings !== 'undefined') { applyTheme(themeSettings); } else { console.error("themeSettings object not found. Make sure it's defined in your website settings JavaScript."); } });