@zenius-one/ursa
v0.5.0
Published
Ursa core components library: inputs, buttons, overlays etc.
Downloads
2
Maintainers
Readme
Ursa
Ursa is a themeable, but opinionated component library designed for the Zenius One ecosystem to create the best experience for users who use Zenius One products.
Installation
# With yarn
yarn add @zenius-one/ursa
# With npm
npm install @zenius-one/ursa
Usage
Wrap your main App
component with the ThemeProvider
component.
- In
Next.js
this is usually atpages/_app.tsx
. - In
Create-React-App
this is usually atsrc/index.ts
. - Equivalent for other React frameworks.
Example: Usage in Next.js
. This is the default behaviour where it switches
from light
to dark
themes as the preferred
color-scheme
changes.
import { ThemeProvider } from '@zenius-one/ursa';
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
Themes
ThemeProvider
ships with the Ursa lightTheme and the darkTheme.
These are the only two officially supported themes at the moment. You can change
themes programmatically or not, by providing the ThemeProvider
component the
theme
prop.
Example: Overriding theme in Next.js
. This will apply darkTheme
for all
times.
import { ThemeProvider } from '@zenius-one/ursa';
import { darkTheme } from '@zenius-one/ursa/dist/esm/styles/darkTheme';
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider theme={darkTheme}>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
By default, Ursa will auto detect the preferred color scheme of the Operating
System and switch to a light
or dark
color scheme accordingly.
Custom Themes
Ursa can allow the developers on the Zenius platform using Ursa, to set their
own custom themes for both light
and dark
modes (or any other theme switch
logic they would like to use).
As mentioned earlier, Ursa will auto detect the preferrer color scheme of the
Operating System and do the switches. However, you can turn this behaviour off
by adding the { detect: false }
option to themeOptions
and providing your
own theme. Ursa ships with a useColorScheme
React hook that detects the
preferred color scheme.
Example: Using your custom themes that switch based on preferred color scheme.
import { customLightTheme, customDarkTheme } from '.path/to/themes';
import { useColorScheme } from '@zenius-one/ursa';
function MyApp({ Component, pageProps }: AppProps) {
const currentScheme = useColorScheme();
const selectedScheme =
currentScheme === 'dark' ? customDarkTheme : customLightTheme;
return (
<ThemeProvider theme={selectedScheme} themeOptions={{ detect: false }}>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
Note:
- Ursa allows custom themes. However, this means using the theme variables already defined by the Ursa style system. Currently, only custom colors are supported. (Documentation has to be expanded on this)
- This is a pre-alpha release. Custom themes and the manner of their implementation may be subject to change.
License
See LICENSE.md