Copy environment

Theme Switcher 

<div class="theme-switcher  ">
    <button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
        <span class="theme-switcher__icon-cross"></span>
    </button>
    <button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
        <span class="theme-switcher__icon-cross"></span>
    </button>
    <button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
        <span class="theme-switcher__icon-cross"></span>
    </button>
    <button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
        <span class="theme-switcher__icon-cross"></span>
    </button>
    <button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
        <span class="theme-switcher__icon-cross"></span>
    </button>
</div>
 
<div class="theme-switcher {{ modifier }} {{ class }}">
    {% for palette in data.palettes %}
        <button data-theme="theme-{{ palette.class }}" class="theme-switcher__button theme-switcher__button--{{ palette.class }}">
            <span class="theme-switcher__icon-cross"></span>
        </button>
    {% endfor %}
</div>

{
  "language": "en-US",
  "data": {
    "palettes": [
      {
        "class": "beige"
      },
      {
        "class": "gray"
      },
      {
        "class": "yellow"
      },
      {
        "class": "green"
      },
      {
        "class": "dark"
      }
    ]
  }
}
  • Content: 
    .theme-beige {
    --color-background: #{$color-beige};
    --color-background--rgb: #{hexToRGB($color-beige)};
    --color-compliment: #{$color-blue};
    --color-compliment--rgb: #{hexToRGB($color-blue)};
    --color-brand: #{$color-black-light};
    --color-brand--rgb: #{hexToRGB($color-black-light)};
    --color-text: #{$color-black};
    --color-text--rgb: #{hexToRGB($color-black)};
    --color-text-inverse: #{$color-white};
    --color-text-inverse--rgb: #{hexToRGB($color-white)};
}

.theme-gray {
    --color-background: #{$color-beige-dark};
    --color-background--rgb: #{hexToRGB($color-beige-dark)};
    --color-compliment: #{$color-orange};
    --color-compliment--rgb: #{hexToRGB($color-orange)};
    --color-brand: #{$color-black-light};
    --color-brand--rgb: #{hexToRGB($color-black-light)};
    --color-text: #{$color-black};
    --color-text--rgb: #{hexToRGB($color-black)};
    --color-text-inverse: #{$color-white};
    --color-text-inverse--rgb: #{hexToRGB($color-white)};
}

.theme-yellow {
    --color-background: #{$color-yellow};
    --color-background--rgb: #{hexToRGB($color-yellow)};
    --color-compliment: #{$color-sky-blue};
    --color-compliment--rgb: #{hexToRGB($color-sky-blue)};
    --color-brand: #{$color-black-light};
    --color-brand--rgb: #{hexToRGB($color-black-light)};
    --color-text: #{$color-black};
    --color-text--rgb: #{hexToRGB($color-black)};
    --color-text-inverse: #{$color-white};
    --color-text-inverse--rgb: #{hexToRGB($color-white)};
}

.theme-green {
    --color-background: #{$color-green};
    --color-background--rgb: #{hexToRGB($color-green)};
    --color-compliment: #{$color-pink};
    --color-compliment--rgb: #{hexToRGB($color-pink)};
    --color-brand: #{$color-black-light};
    --color-brand--rgb: #{hexToRGB($color-black-light)};
    --color-text: #{$color-black};
    --color-text--rgb: #{hexToRGB($color-black)};
    --color-text-inverse: #{$color-white};
    --color-text-inverse--rgb: #{hexToRGB($color-white)};
}

.theme-dark {
    --color-background: #{$color-blue-dark};
    --color-background--rgb: #{hexToRGB($color-blue-dark)};
    --color-compliment: #{$color-reef};
    --color-compliment--rgb: #{hexToRGB($color-reef)};
    --color-brand: #{$color-white};
    --color-brand--rgb: #{hexToRGB($color-white)};
    --color-text: #{$color-white};
    --color-text--rgb: #{hexToRGB($color-white)};
    --color-text-inverse: #{$color-black};
    --color-text-inverse--rgb: #{hexToRGB($color-black)};
}

.theme-switcher {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.theme-switcher__button {
    pointer-events: all;
    cursor: pointer;
    position: relative;
    padding: 0;
    display: inline-block;
    margin: 2px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-brand);
    background-color: $color-beige;
    border-radius: 0;
    transition: $transition-duration $transition-easing;
    transition-property: border, background-color;

    @include bp(md-min) {
        margin: 2px;
        width: 15px;
        height: 15px;
        border: 1px solid var(--color-brand);
    }

    &.theme-switcher__button--yellow {
        background-color: $color-yellow;
    }

    &.theme-switcher__button--green {
        background-color: $color-green;
    }

    &.theme-switcher__button--gray {
        background-color: $color-beige-dark;
    }

    &.theme-switcher__button--dark {
        background-color: $color-blue-dark;
    }
}

.theme-switcher__icon-cross {
    position: absolute;
    top: 11px;
    left: -5px;
    width: 145%;
    height: 1px;
    background-color: var(--color-brand);
    transform: rotate(45deg);
    visibility: hidden;
    transition: $transition-duration $transition-easing;
    transition-property: background-color;

    @include bp(md-min) {
        top: 6px;
        left: -3px;
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-brand);
        transform: rotate(-90deg);
        transition: $transition-duration $transition-easing;
        transition-property: background-color;
    }

    .theme-switcher__button.is-selected & {
        visibility: visible;
    }
}
  • URL: /components/raw/theme-switcher/theme-switcher.scss
  • Filesystem Path: src/patterns/components/theme-switcher/theme-switcher.scss
  • Size: 4.3 KB
  • Content: 
    import './theme-switcher.scss';
import Component from '@component';
import Cookie from '@cookie';

interface IThemeSwitcherSettings {
    selectedClass: string;
    buttonClass: string;
}

export default class ThemeSwitcher extends Component {
    static initSelector: string = '.theme-switcher';

    activeTheme: string;

    settings: IThemeSwitcherSettings;

    constructor(target: HTMLElement) {
        super(target);

        this.settings = {
            buttonClass: 'theme-switcher__button',
            selectedClass: 'is-selected',
        };

        const cookieSelectedTheme: string = Cookie.get('gotoandplay_selected_theme');

        this.setTheme(cookieSelectedTheme === '' ? 'theme-beige' : cookieSelectedTheme);

        this.init();
    }

    init(): void {
        $('.' + this.settings.buttonClass).on('click', this.toggleHandler.bind(this));
    }

    getSelectedButton(): JQuery {
        return $('.' + this.settings.buttonClass + '[data-theme=\'' + this.activeTheme + '\']');
    }

    setTheme(theme: string): void {
        $('body').removeClass(this.activeTheme).addClass(theme);

        this.getSelectedButton().removeClass(this.settings.selectedClass);

        Cookie.set('gotoandplay_selected_theme', theme);
        this.activeTheme = theme;

        this.getSelectedButton().addClass(this.settings.selectedClass);
    }

    toggleHandler(event: JQuery.ClickEvent): void {
        const theme: string = $(event.currentTarget).attr('data-theme');

        if (!$(event.currentTarget).hasClass(this.settings.selectedClass)) {
            this.setTheme(theme);
        }
    }
}
  • URL: /components/raw/theme-switcher/theme-switcher.ts
  • Filesystem Path: src/patterns/components/theme-switcher/theme-switcher.ts
  • Size: 1.6 KB