image

Circuix

Magic Circuit
Technology & Innovation
Circuix
Greetings, innovator! I am your Magical circuit designer, eager to tinker with technological possibilities.
22/05/2025, 15:27:42
Wait, is typing...
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."); } });