Documentation & Demo
Full documentation is available on the demo site.
Installation
Install with NPM:
npm install @aotearoan/neon
or yarn:
yarn add @aotearoan/neon
Usage
Javascript/Typescript
Import components and supporting classes like so:
import { Component, Vue } from 'vue-property-decorator';
import { NeonLogo } from '@aotearoan/neon';
@Component({
components: {
NeonLogo,
},
})
export default class App extends Vue {}
SASS
First select a theme:
- smooth
- classic
- sharp
To use a theme without any customization simply import the basic theme file, e.g. to import the classic theme:
@import '~@aotearoan/neon/themes/classic';
If, however you would like to override/customize the theme then you need to include the following:
.app {
&.neon-theme--classic {
// override colors, palettes and other basic variables here BEFORE importing the theme, e.g. $neon-color-primary: #bada55
@import '~@aotearoan/neon/themes/classic/theme';
// include custom app SASS here (you can use neon's defined variables, mixins and functions)
&.neon-mode--dark {
// override dark mode specific variables here, e.g. $neon-border-color: #bada55
@import '~@aotearoan/neon/themes/classic/dark';
// include custom app dark mode SASS here (you can use neon's defined variables, mixins and functions)
}
&.neon-mode--light {
// override light mode specific variables here, e.g. $neon-border-color: #bada55
@import '~@aotearoan/neon/themes/classic/light';
// include custom app light mode SASS here (you can use neon's defined variables, mixins and functions)
}
}
}
Finally, the theme and mode (light/dark) need to be set on the document, e.g. to set the classic theme and dark mode:
<html class="app neon neon-theme--classic neon-mode--dark">