**Themes are implemented in Typescript.** That's because our goal is to share variables between Grafana TypeScript and [Sass](https://sass-lang.com/) code. Theme definitions are located in the following files:
When implementing snapshot tests for components that use the `withTheme` HOC, the snapshot will contain the entire theme object. Any change to the theme renders the snapshot outdated.
### Using theme in tests
To make your snapshot theme independent, use the `mockThemeContext` helper function:
If you need to pass a theme object to a function under test just import `createTheme` and call it without
any arguments.
```tsx
import { mockThemeContext } from '@grafana/ui';
import { MyComponent } from './MyComponent';
import { createTheme } from '@grafana/data';
describe('MyComponent', () => {
let restoreThemeContext;
beforeAll(() => {
// Create ThemeContext mock before any snapshot test is executed
// Make sure the theme is restored after snapshot tests are performed
restoreThemeContext();
});
it('renders correctly', () => {
const wrapper = mount(<MyComponent/>);
expect(wrapper).toMatchSnapshot();
it('should work', () => {
result = functionThatNeedsTheme(createTheme());
expect(result).toBe(true);
});
});
```
@ -116,36 +172,5 @@ This section provides insight into frequently-asked questions.
`[_variables|_variables.dark|_variables.light].generated.scss` files are the ones that are referenced in the main Sass files for Sass variables to be available. **These files are automatically generated and should never be modified by hand!**
#### If you need to modify a _Sass variable value_ you need to modify the corresponding Typescript file that is the source of the variables:
This section describes limitations with Grafana's theming system.
### You must ensure `ThemeContext` provider is available in a React tree
By default all react2angular directives have `ThemeContext.Provider` ensured. But, there are cases where we create another React tree via `ReactDOM.render`. This happens in the case of graph legend rendering and the `ReactContainer` directive. In such cases theme consumption will fail. To make sure theme context is available in such cases, you need to wrap your rendered component with ThemeContext.Provider using the `provideTheme` function:
```ts
// graph.ts
import { provideTheme } from 'app/core/utils/ConfigProvider';
// Create component with ThemeContext.Provider first.
// Otherwise React will create new components every time it renders!
Torkel Ödegaard
4 years ago
committed by