This repository has been archived by the owner on Apr 15, 2022. It is now read-only.
yearn-web-themes
/
1.1.1
yearn-web-themes 1.1.1
Install from the command line:
Learn more about npm packages
$ npm install @yearn/yearn-web-themes@1.1.1
Install via package.json:
"@yearn/yearn-web-themes": "1.1.1"
About this version
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>
)
}
}