Falcon Client ships with
This contains a powerful
ThemeProvider and a library of composable, themeable, design-system-driven UI components.
It's worth looking at these docs for detailed theming information.
Don't want to read the docs?
Here's a quick introduction to theming Falcon Platform.
@deity/falcon-ui comes with a
ThemeProvider out of the box. This allows us to have shared and global styles (written in js) across your application.
Out of the box Falcon Platform also supports css and scss.
Writing CSS in ReactJs
If you're new to writing CSS in ReactJs, it's worth reading these docs.
Global styles can be passed to the
ThemeProvider as a prop.
It expects an object of styles in the following format:
If desired, you can also export a function that takes the current theme as a parameter:
By default the
ThemeProvider component is included in
globalCss object is normal exported in your
If you're not using the new theme the
theme.js file can be found here:
Creating a Theme
ThemeProvider expects a
theme. This is where we define out global / theme variables.
To create a
theme we use the function
createTheme. This is normally done in
createTheme extends the default theme. This can be found here -
We then pass that as a prop to the
ThemeEditorState (usually in
We now have access to this
theme when writing css or creating a
How the theme works
Any theme created using
createTheme, falls back to the default theme defined in
@deity/falcon-ui/src/theme/theme.ts. Your new theme will replace variables from this if defined.
How object keys are mapped to CSS properties
You will notice that the theme is nested with keys such as
These are mapped to css properties meaning that the correct value is passed.
You will also notice some props are shortcuts for the css property, e.g.
m="xxl" is used instead of
If you want a property to change based on window width based media queries you can pass it an object. Each object key refers to a breakpoint (these can be defined in your
theme.js if you don't want to keep the core ones
@deity/falcon-ui/src/theme/theme.ts). These breakpoints create mobile first css (
@media and (max-width: <breakpoint>).
Adding complex css
If you want to add more complex css, for instance styling child selectors, pseudo elements or state changes you can do this in the
It's also possible to access the
theme object here so you can still use global variables.
n.b. You can't use CSS shortcuts like
marginBottom in the CSS prop