![Imgur](https://i.imgur.com/8FKIPAg.png)

# Ionic Theme

Our Ionic Theme build by using our base css and icons

## 🚩 Table of contents
=======

- [Built with](#built-with)
- [Usage](#usage)

# Built with

<<<<<<< HEAD
| Name                                                                                       | Version | Description   |
| ------------------------------------------------------------------------------------------ | ------- | ------------- |
| [`@sass`](https://sass-lang.com/documentation/)                                            | 3.6.5   | CSS framework |
| [`@softanic/styles`](https://www.npmjs.com/package/@softanic/styles)                       | 1.0.2   | CSS library   |
| [`@softanic/icons`](https://www.npmjs.com/package/@softanic/icons)                         | 1.0.1   | Icon library  |

## Usage

### :wrench: Setup

```shell
$ npm i @softanic/ionic-theme
```

> If you are using npm 8 or above you might need to add `--legacy-peer-deps` when running npm install

## SCSS

In order to use this package import the package in your main.scss file.

### Importing the styles

```scss
// @/theme/vendors/_softanic.scss

=======
@import '@softanic/ionic-theme';
```

### Overriding the imported styles

```scss
// @/theme/vendors/_softanic.scss

@use '@softanic/ionic-theme' with (
  $primary: (
    light: (
      900: #00359E,
      800: #0040C1,
      700: #004EEB,
      600: #155EEF,
      500: #2970FF,
      400: #528BFF,
      300: #84ADFF,
      200: #B2CCFF,
      100: #D1E0FF,
      50: #EFF4FF,
      25: #F5F8FF
    ),
    dark: (
      900: #00359E,
      800: #0040C1,
      700: #004EEB,
      600: #155EEF,
      500: #2970FF,
      400: #528BFF,
      300: #84ADFF,
      200: #B2CCFF,
      100: #D1E0FF,
      50: #EFF4FF,
      25: #F5F8FF
    )
  )
);
```