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/
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>
}
}
It is also possible to override the theme of a already deployed project. Append the following query parameter to the URL: ?themeswitch=<mediaName>