themes.js

var themes = [
  // {
  //   // Template
  //   logo: {
  //       path: "/assets/bitcoin-design-community-banner.svg",
  //       fillColor: "",
  //       outlineColor: "#000"
  //   },
  //   title: {
  //       fillColor: "#FFF",
  //       outlineColor: "#000"
  //   },
  //   description: {
  //       fillColor: "#000"
  //   },
  //   button1: {
  //       fillColor: "",
  //       outlineColor: "#000",
  //       labelFillColor: "#000"
  //   },
  //   button2: {
  //       fillColor: "",
  //       outlineColor: "#000",
  //       labelFillColor: "#000"
  //   },
  //   background: {
  //       path: '',
  //       pathRetina: '',
  //       pathMobile: '',
  //       pathMobileRetina: '',
  //       backgroundColor: ''
  //   },
  //   copy: {
  //       backgroundColor: ""
  //   },
  //   image: {
  //       path: 'url("/assets/images/home/banner/template.jpg")',
  //       pathRetina: 'url("/assets/images/home/banner/template@2x.jpg")',
  //       pathMobile: 'url("/assets/images/home/banner/template-mobile.jpg")',
  //       pathMobileRetina: 'url("/assets/images/home/banner/template-mobile@2x.jpg")',
  //       backgroundColor: "#fbfbfb"
  //   },
  //   flipLayoutOnMobile: false,
  //   author: {
  //       name: "Template",
  //       link: "https://github.com/BitcoinDesign/Guide/pull/27"
  //   }
  // },
  /* --- Themes temporarily disabled for Impact Initiatives 2026 ---
  {
    // Bridging bitcoin
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#FFF",
        outlineColor: "#000"
    },
    title: {
        fillColor: "#000",
        outlineColor: "transparent"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#FFF",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    button2: {
        fillColor: '',
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    background: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: ''
    },
    copy: {
        backgroundColor: "#F7931A"
    },
    image: {
        path: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin.png")',
        pathRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/header-theme-1-bridging-bitcoin-mobile@2x.png")',
        backgroundColor: "#F7931A"
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Alexa Aker",
        link: "https://github.com/BitcoinDesign/Guide/issues/45"
    }
  },
  {
    // Rutuja bitcoin page theme banner
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#FEE78D",
        outlineColor: "#5A4C4C"
    },
    title: {
        fillColor: "#FEE78D",
        outlineColor: "#FEE78D"
    },
    description: {
        fillColor: "#E4CBCB"
    },
    button1: {
        fillColor: "#FEE78D",
        outlineColor: "#FEE78D",
        labelFillColor: "#5A4C4C"
    },
    button2: {
        fillColor: "#5A4C4C",
        outlineColor: "#FEE78D",
        labelFillColor: "#FEE78D"
    },
    image: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: ''
    },
    copy: {
        backgroundColor: ''
    },
    background: {
        path: 'url("/assets/images/home/banner/rutuja_bitcoin_theme_banner_web.jpg")',
        pathRetina: 'url("/assets/images/home/banner/rutuja_bitcoin_theme_banner_web@2x.jpg")',
        pathMobile: 'url("/assets/images/home/banner/themeBG_mobile.jpg")',
        pathMobileRetina: 'url("/assets/images/home/banner/themeBG_mobile@2x.jpg")',
        backgroundColor: "#5A4C4C"
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Rutuja Kelkar",
        link: "https://github.com/BitcoinDesign/Guide/issues/592"
    }
  },
  {
    // 3D abstract
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#F7931A",
        outlineColor: "#FFF"
    },
    title: {
        fillColor: "#F7931A",
        outlineColor: "#F7931A"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#F7931A",
        outlineColor: "#F7931A",
        labelFillColor: "#FFF"
    },
    button2: {
        fillColor: "#F7931A",
        outlineColor: "#F7931A",
        labelFillColor: "#FFF"
    },
    background: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: ''
    },
    copy: {
        backgroundColor: "#64EBFC"
    },
    image: {
        path: 'url("/assets/images/home/banner/header-theme-2-3d-abstract.png")',
        pathRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/header-theme-2-3d-abstract-mobile@2x.png")',
        backgroundColor: "#64EBFC"
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Gabor Magyar",
        link: "https://github.com/BitcoinDesign/Guide/issues/143"
    }
  },
  {
    // The Meta-Future
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#F7931A",
        outlineColor: "#000"
    },
    title: {
        fillColor: "#000",
        outlineColor: "transparent"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#F7931A",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    button2: {
        fillColor: "#FFF",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    background: {
        path: 'url("/assets/images/home/banner/the-meta-future.jpg")',
        pathRetina: 'url("/assets/images/home/banner/the-meta-future@2x.jpg")',
        pathMobile: 'url("/assets/images/home/banner/the-meta-future-mobile.jpg")',
        pathMobileRetina: 'url("/assets/images/home/banner/the-meta-future-mobile@2x.jpg")',
        backgroundColor: "#D0E8E1"
    },
    copy: {
        backgroundColor: ""
    },
    image: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: ''
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Rama Krushna",
        link: "https://github.com/BitcoinDesign/Guide/issues/272"
    }
  },
  {
    // BITs and pieces
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#FEC34A",
        outlineColor: "#000"
    },
    title: {
        fillColor: "#000",
        outlineColor: "transparent"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#00C4C6",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    button2: {
        fillColor: "#FEC34A",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    background: {
        path: 'url("/assets/images/home/banner/bits-and-pieces.png")',
        pathRetina: 'url("/assets/images/home/banner/bits-and-pieces@2x.png")',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: "#FFFFFF"
    },
    copy: {
        backgroundColor: ""
    },
    image: {
        path: 'url("/assets/images/home/banner/bits-and-pieces-fallback.png")',
        pathRetina: 'url("/assets/images/home/banner/bits-and-pieces-fallback@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/bits-and-pieces-mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/bits-and-pieces-mobile@2x.png")',
        backgroundColor: '',
        lottie: "/assets/animations/banner-jessica.json"
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Jessica Wolff and Andy Ribetz",
        link: "https://github.com/BitcoinDesign/Guide/issues/289"
    }
  },
  {
    // The Ongoing Development of Bitcoin
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#E0E0E0",
        outlineColor: "#000"
    },
    title: {
        fillColor: "#ADAAAA",
        outlineColor: "#000"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#F7931A",
        outlineColor: '#F7931A',
        labelFillColor: "#00"
    },
    button2: {
        fillColor: "#FFF",
        outlineColor: "#000",
        labelFillColor: "#000"
    },
    background: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: "#F4F4F4"
    },
    copy: {
        backgroundColor: ''
    },
    image: {
        path: 'url("/assets/images/home/banner/ongoing-development.png")',
        pathRetina: 'url("/assets/images/home/banner/ongoing-development@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/ongoing-development-mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/ongoing-development-mobile@2x.png")',
        backgroundColor: ""
    },
    flipLayoutOnMobile: false,
    author: {
        name: "Susrita Chatterjee",
        link: "https://github.com/BitcoinDesign/Guide/issues/688"
    }
  },
  {
    // Here Comes Bitcoin
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "#F7931A",
        outlineColor: "#000"
    },
    title: {
        fillColor: "#000",
        outlineColor: "transparent"
    },
    description: {
        fillColor: "#000"
    },
    button1: {
        fillColor: "#70B6C3",
        outlineColor: "#000",
        labelFillColor: "#FFF"
    },
    button2: {
        fillColor: "#F7931A",
        outlineColor: "#000",
        labelFillColor: "#FFF"
    },
    background: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: "#FFFFFF"
    },
    copy: {
        backgroundColor: ''
    },
    image: {
        path: 'url("/assets/images/home/banner/HCB-Banner.png")',
        pathRetina: 'url("/assets/images/home/banner/HCB-Banner@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/HCB-Banner-Mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/HCB-Banner-Mobile@2x.png")',
        backgroundColor: ""
    },
    flipLayoutOnMobile: true,
    author: {
        name: "Sushant Faujdar and Abhijay Jain",
        link: "https://github.com/BitcoinDesign/Guide/issues/1110"
    }
  },
  --- End of temporarily disabled themes --- */
  {
    // Creative Block
    logo: {
        path: "/assets/bitcoin-design-community-banner.svg",
        fillColor: "transparent",
        outlineColor: "#032869"
    },
    title: {
        fillColor: "#032869",
        outlineColor: "transparent"
    },
    description: {
        fillColor: "#2A588E"
    },
    button1: {
        fillColor: "#FFFFFF",
        outlineColor: "#FFFFFF",
        labelFillColor: "#032869"
    },
    button2: {
        fillColor: "#FFFFFF",
        outlineColor: "#FFFFFF",
        labelFillColor: "#032869"
    },
    background: {
        path: '',
        pathRetina: '',
        pathMobile: '',
        pathMobileRetina: '',
        backgroundColor: "#9EE6FF"
    },
    copy: {
        backgroundColor: "#9EE6FF"
    },
    image: {
        path: 'url("/assets/images/home/banner/creative-block-image.png")',
        pathRetina: 'url("/assets/images/home/banner/creative-block-image@2x.png")',
        pathMobile: 'url("/assets/images/home/banner/creative-block-image-mobile.png")',
        pathMobileRetina: 'url("/assets/images/home/banner/creative-block-image-mobile@2x.png")',
        backgroundColor: "#9EE6FF"
    },
    flipLayoutOnMobile: true,
    author: {
        name: "PX/PUSH",
        link: "https://pxpush.com"
    }
  }
];

var shuffleArray = function(array) {
    var i = array.length - 1;
    for(; i > 0; i--){
      const j = Math.floor(Math.random() * i)
      const temp = array[i]
      array[i] = array[j]
      array[j] = temp
    }
};

shuffleArray(themes);

var currentThemeIndex = null;
var applyNextTheme = function() {
    currentThemeIndex++;

    if(currentThemeIndex >= themes.length) {
        currentThemeIndex = 0;
    }

    applyTheme(currentThemeIndex);
}

var getProperty = function(thing, find, fallback) {
    if(!thing) {
        return fallback ? fallback : null;
    }

    if(!find) {
        return fallback ? fallback : null;
    }

    var result = thing;
    var bits = find.split('.');
    var i=0, length=bits.length, bit;
    for(; i<length; i++) {
        bit = bits[i];

        if(result[bit]) {
            result = result[bit];
        } else {
            result = fallback === undefined ? null :  fallback;
            break;
        }
    }

    return result;
};

var applyDocumentThemeProperty = function(theme, propertyName, propertyId) {
    document.documentElement.style.setProperty(propertyName, getProperty(theme, propertyId));
};

var applyTheme = function(themeIndex) {
    currentThemeIndex = themeIndex;

    var theme = themes[themeIndex];

    // Del

    // Document-wide property.
    var documentProperties = [
        ['--copy-background-color', 'copy.backgroundColor'],
        ['--title-fill-color', 'title.fillColor'],
        ['--title-outline-color', 'title.outlineColor'],
        ['--description-fill-color', 'description.fillColor'],
        ['--button-1-fill-color', 'button1.fillColor'],
        ['--button-1-outline-color', 'button1.outlineColor'],
        ['--button-1-label-fill-color', 'button1.labelFillColor'],
        ['--button-2-fill-color', 'button2.fillColor'],
        ['--button-2-outline-color', 'button2.outlineColor'],
        ['--button-2-label-fill-color', 'button2.labelFillColor'],
        ['--banner-image-path', 'image.path'],
        ['--banner-image-path-retina', 'image.pathRetina'],
        ['--banner-image-path-mobile', 'image.pathMobile'],
        ['--banner-image-path-mobile-retina', 'image.pathMobileRetina'],
        ['--banner-image-color', 'image.backgroundColor'],
        ['--banner-background-path', 'background.path'],
        ['--banner-background-path-retina', 'background.pathRetina'],
        ['--banner-background-path-mobile', 'background.pathMobile'],
        ['--banner-background-path-mobile-retina', 'background.pathMobileRetina'],
        ['--banner-background-color', 'background.backgroundColor']
    ];

    var i;
    for(i=0; i<documentProperties.length; i++) {
        applyDocumentThemeProperty(theme, documentProperties[i][0], documentProperties[i][1]);
    }

    // Logo properties.
    var logoPaths = document.getElementsByClassName('banner-bitcoin-logo-path');
    var logoPathFills = document.getElementsByClassName('banner-bitcoin-logo-fill-path');
    var logoFills = document.getElementsByClassName('banner-bitcoin-logo-fill');
    if(logoPaths && logoPaths.length > 0) {
        for(i=0; i<logoPaths.length; i++) {
            logoPaths[i].setAttribute('stroke', getProperty(theme, 'logo.outlineColor'));
        }
    }
    if(logoPathFills && logoPathFills.length > 0) {
        for(i=0; i<logoPathFills.length; i++) {
            logoPathFills[i].setAttribute('fill', getProperty(theme, 'logo.outlineColor'));
        }
    }
    if(logoFills && logoFills.length > 0) {
        for(i=0; i<logoFills.length; i++) {
            logoFills[i].setAttribute('fill', getProperty(theme, 'logo.fillColor'));
        }
    }

    // Banner properties.
    var banner = document.getElementById('home-banner');
    if(banner) {
        if(theme.flipLayoutOnMobile) {
            banner.classList.add('-flip-on-mobile');
        } else {
            banner.classList.remove('-flip-on-mobile');
        }
    }

    // Author properties.
    var author = document.getElementById('home-banner-info-author');
    if(author) {
        author.innerText = getProperty(theme, 'author.name');
        author.setAttribute('href', getProperty(theme, 'author.link'));
    }

    // Lottie properties.
    var homeBannerImage = document.querySelector('.home-banner-image');
    if(theme.image.lottie && ref.reduceMotion && !ref.reduceMotion.matches) {
        homeBannerImage.classList.add('lottie');
        homeBannerImage.dataset.lottie = theme.image.lottie;
        decideIfLottie();
    }
    else {
        homeBannerImage.classList.remove('lottie');
        homeBannerImage.dataset.lottie = '';
        stopLottie();
    }
};

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    var banner = document.getElementById('home-banner');

    if(banner) {
        applyTheme(0);

        var bannerNext = document.getElementById('home-banner-info-next');
        if(bannerNext) {
            if(themes.length <= 1) {
                bannerNext.style.display = 'none';
            } else {
                bannerNext.addEventListener('click', function(event) {
                    event.preventDefault();

                    applyNextTheme();
                });
            }
        }
    }
});