Responsive theming #300
-
|
Today, our designers are using different themes for desktop and mobile, mostly to have different font sizes for the titles. Do you know a good approach to be able to do something like this? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
The first thing that comes to mind is to create wrappers around some components in case the responsive behavior is the same. For example, create an internal Text component that uses Reshaped Text and has a predefined mapping of responsive sizes. In case you want to really switch the theme completely and change colors or other tokens, you can try using the same approach we suggest for dark mode detection: https://reshaped.so/docs/getting-started/react/installation#system-dark-mode. Instead of checking the media queries, you can check the user agent or any other data source for the current platform as a default value and then change it on screen resize |
Beta Was this translation helpful? Give feedback.
The first thing that comes to mind is to create wrappers around some components in case the responsive behavior is the same. For example, create an internal Text component that uses Reshaped Text and has a predefined mapping of responsive sizes.
In case you want to really switch the theme completely and change colors or other tokens, you can try using the same approach we suggest for dark mode detection: https://reshaped.so/docs/getting-started/react/installation#system-dark-mode. Instead of checking the media queries, you can check the user agent or any other data source for the current platform as a default value and then change it on screen resize