@ta-interaktiv/react-theme-switch

React Theme Switch

Loads an additional style sheet based on the provided media name, allowing for a simple way to theme the standalones.

This component relies on two other things:

• Stylesheets to be found under interaktiv.<publicationName>.ch/static/themes. These stylesheets should define fonts and all the necessary overwrites for a specific publication. The repository with the stylesheets is located here: https://gitlab.com/ta-interaktiv/tamedia-publication-themes
• Our version of Semantic UI that's using generic font names (TamediaUI, TamediaText, TamediaDisplay, TamediaChart). This is available from version 3 on. The repository for Semantic UI is here: https://bitbucket.org/tagesanzeiger/ta-semantic-ui/src/master/

Usage

For use in React

import React from 'react'
import { ThemeSwitch } from '@ta-interaktiv/react-theme-switch'

function Component(props) {
  // The following component renders the page in the style of 'Das Magazin'
  return (
    <div>
      <ThemeSwitch mediaName='dasmagazin' />
    </div>
  )
}

As part of the constructor

import React from 'react'
import { ThemeSwitch as themeSwitch } from '@ta-interaktiv/react-theme-switch'

class Component extends React.Component {
  constructor(props) {
    super(props)

    themeSwitch({ mediaName: 'dasmagazin' })
  }

  render() {
    return <div>Your Component</div>
  }
}

Overriding the theme of a deployed project

It is also possible to override the theme of a already deployed project. Append the following query parameter to the URL: ?themeswitch=<mediaName>

Documentation

Can be found here.