You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guides/using-theme-overrides.md
+89-65Lines changed: 89 additions & 65 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,23 +27,7 @@ type: embed
27
27
28
28
### How theming works in InstUI
29
29
30
-
The theming system in InstUI has three levels:
31
-
32
-
**The global theme**
33
-
34
-
Global themes are useful when you have multiple React Application trees and you want to set up themes and overrides on a more global level than application level theming.
35
-
This basically means you don't necessarily have to wrap each application tree with an [InstUISettingsProvider](/#InstUISettingsProvider) to use themes.
36
-
InstUI leverages the [ThemeRegistry](/#ThemeRegistry) package to achieve global theming.
In order to globally register and override themes, simply import the theme you wish to use and call `.use({ overrides })` on it:
84
+
`<InstUISettingsProvider/>` accepts full theme objects and override objects too.
101
85
102
86
```js
103
87
---
104
-
type:code
88
+
type:example
105
89
---
106
-
importReactDOMfrom"react-dom"
107
-
import { canvas } from"@instructure/ui-themes"
108
-
109
-
canvas.use({
110
-
overrides: {
111
-
colors: {
112
-
primitives: {
113
-
green45:"red"
114
-
}
90
+
<InstUISettingsProvider theme={{
91
+
...canvas,
92
+
...{
93
+
typography: { fontFamily:'monospace' }
115
94
}
116
-
}
117
-
})
118
-
119
-
ReactDOM.render(
95
+
}}>
120
96
<div>
121
-
...your application code goes here...
97
+
<Heading level="h3" margin="small small">
98
+
I should have monospace font family from the override
99
+
</Heading>
122
100
</div>
123
-
)
101
+
</InstUISettingsProvider>
124
102
```
125
103
126
-
**Note**: globally overriding themes like this means that every InstUI component will use that theme, unless they are wrapped inside an `<InstUISettingsProvider/>`.
127
-
128
-
You can see more examples [here](/#using-theme-overrides/#using-theme-overrides-examples).
129
-
130
-
### Application level theme overrides
131
-
132
-
`<InstUISettingsProvider/>` accepts full theme objects and override objects too.
133
-
134
104
#### Full themes
135
105
136
106
By nesting the `InstUISettingsProvider` you can apply different themes to some sections of you app.
> This feature is deprecated because it needs to use the [global object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) that pierces application borders, so it causes issues with running multiple versions of InstUI in a single page.
369
+
370
+
Global themes are useful when you have multiple React Application trees, and you want to set up themes and overrides on a more global level than application level theming.
371
+
This basically means you don't necessarily have to wrap each application tree with an [InstUISettingsProvider](/#InstUISettingsProvider) to use themes.
372
+
InstUI leverages the [ThemeRegistry](/#ThemeRegistry) package to achieve global theming.
373
+
374
+
```jsx
375
+
---
376
+
type: code
377
+
---
378
+
// app/init sets the global theme
379
+
importcanvasfrom'@instructure/ui-themes'
380
+
381
+
canvas.use()
382
+
```
383
+
384
+
### (DEPRECATED) Global theme overrides
385
+
386
+
In order to globally register and override themes, simply import the theme you wish to use and call `.use({ overrides })` on it:
387
+
388
+
```js
389
+
---
390
+
type: code
391
+
---
392
+
importReactDOMfrom"react-dom"
393
+
import { canvas } from"@instructure/ui-themes"
394
+
395
+
canvas.use({
396
+
overrides: {
397
+
colors: {
398
+
primitives: {
399
+
green45:"red"
400
+
}
401
+
}
402
+
}
403
+
})
404
+
405
+
ReactDOM.render(
406
+
<div>
407
+
...your application code goes here...
408
+
</div>
409
+
)
410
+
```
411
+
412
+
**Note**: globally overriding themes like this means that every InstUI component will use that theme, unless they are wrapped inside an `<InstUISettingsProvider/>`.
0 commit comments