Loads an additional stylesheet based on the domain name to allow for simple theming.
npm install @ta-interaktiv/react-theme-switchLoads 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.. 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:
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
Your Component
}
}
`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=