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..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:
- 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:

Usage

For use in React

``javascript
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 (



)
}
`

As part of the constructor

`javascript
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


}
}
`

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=`

Documentation

Can be found here.