# @logo-software/theme

> Theme module customize UI of the elements with Logo Element Design standard. It also support bootstrap, .Net, Angular and ReactNative based projects.

Latest version **11.1.26** (published 2024-03-08) · See license in LICENSE file license · 0 weekly downloads

## Install

```sh
npm install @logo-software/theme
pnpm add @logo-software/theme
yarn add @logo-software/theme
bun add @logo-software/theme
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 11.1.26 |
| Published | 2024-03-08 |
| First published | 2020-05-22 |
| Weekly downloads | 0 |
| License | See license in LICENSE file |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Serkan Konakcı |
| Maintainers | furkan.cetin, yusufyilmaz, serdarates, gamzeyapici, srknc, dotnet-ankara, murat.logo, serhan.gurbuz, gulnihaleksi |
| Keywords | theme, logo, color, defination, font, angular, success, warning, danger, information |

## Links

- npm: https://www.npmjs.com/package/@logo-software/theme
- Repository: http://stash.logo.com.tr/scm/fd/theme
- Homepage: http://elements.logo.com.tr
- npm.io page: https://npm.io/package/@logo-software/theme

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 11.1.26 (latest) — 2024-03-08
- 11.1.25 — 2024-03-08
- 11.1.24 — 2024-03-08
- 11.1.23 — 2023-12-06
- 11.1.22 — 2023-12-05
- 11.1.21 — 2023-11-09
- 11.1.5 — 2022-12-15
- 11.0.0 — 2022-10-11
- 4.0.0 — 2022-09-05
- 3.11.10 — 2022-07-20
- 3.11.9 — 2022-04-15
- 3.11.8 — 2022-02-28
- 3.11.7 — 2022-01-21
- 3.11.6 — 2022-01-05
- 3.11.5 — 2021-10-12
- … 54 more at https://npm.io/package/@logo-software/theme/versions

## README

# Theme

Theme module customize UI of the elements with Logo Element Design standard. It also support bootstrap, .Net, Angular
and ReactNative based projects.

Click here for [demo](http://design.logo.com.tr/#/docs/components/theme-module#thememodule)

### Installation

All public npm packages of Logo Software is at [https://www.npmjs.com/~logofe](https://www.npmjs.com/~logofe). To
install Theme Module:

 ```bash
 $ npm set registry https://registry.npmjs.org/
 $ npm install @logo-software/theme -s
 ```

__Usage Example__

1. Create `_config.scss` file, if you change some settings then just import `scss` to your project __main__ `style.scss`

<sub>_config.scss</sub>

 ```scss
 $config: (
  grid:(status: true),
  bootstrap:(status: false),
  extend-colors: true,
  customize: (status: true),
  debug: true
);
 ```

2. Add `_config.scss` to your main `style.scss`

<sub>style.scss</style>

 ```scss
@import "/src/config";
@import "~@logo-software/theme/style";
 ```

3. And additionally if you use theme in a any component just add base `scss` file. It contains basic property not all
things (all things before already added to style.scss).

<sub>any.component.scss</sub>

 ```scss
 // if you customize the config add first `config.scss` file
@import "/src/config";
@import "~@logo-software/theme/base";

:host {
  // component custom css goes here
}
 ```

4. And use in component's html

<sub>app.component.html</sub>

 ```html
<div>
  Three type form size exist `large | medium | small`:<br/>
  <input class="large"/> <input class="medium"/> <input class="small"/>
</div>
<div>
  Three type form display exist `fill | outline | ghost`:<br/>
  <input class="fill"/> <input class="outline"/> <input class="ghost"/>
</div>
 ```

---
_Source: https://npm.io/package/@logo-software/theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._