Theming system for Yearn Finance and associated projects.
A theme is a set of colors (could expand). A theme object looks like this
{
name: 'light',
colors: {
background: '#F4F7FB',
backgroundVariant: '#E0EAFF',
surface: '#FFFFFF',
surfaceVariant: '#F9FBFD',
primary: '#0657F9',
primaryVariant: '#004ADF',
secondary: '#E0EAFF',
titles: '#001746',
titlesVariant: '#0657F9',
texts: '#7F8DA9',
disabled: '#CED5E3',
icons: {
primary: '#CED5E3',
variant: '#475570'
},
button: {
filled: {
primary: '#0657F9',
variant: '#004ADF',
text: '#FFFFFF',
},
outlined: {
primary: '#FFFFFF',
variant: '#E0EAFF',
text: '#0657F9',
},
disabled: {
primary: '#F4F7FB',
text: '#CED5E3',
}
}
}
}Support themes are light, dark and blue.
This package is handled by Github's system. In order to be able to install it, first add the following to your .npmrc or .yarnrc file:
# For .npmrc
@yearn:registry=https://npm.pkg.github.com
# For .yarnrc
registry=https://npm.pkg.github.com/yearn
Then you can install is as usual:
yarn add @yearn/yearn-web-assetsimport React, { Component, useState } from 'react'
import themes from 'yearn-web-themes'
class Example extends Component {
const [theme, set_theme] = React.useState(themes.light)
render() {
return (
<div className={'my-box-className'} style={{background: theme.colors.background}}>
<h1 style={{color: theme.colors.title}}>Hello World</h1>
</div>
)
}
}