colorlog-css

🌈 Colorize your ~~ugly~~ console.log with 198 Schemes and your CSS !

~~0 dependencies & 0 dependents~~ light weight module :)

Installation

npm install colorlog-css --save
yarn add colorlog-css

Usage

Javascript

var colorLog = require('colorlog-css')
var clg = new colorLog.default('./MyColors.css')
// var clg = new colorLog.default()
// clg.set('./MyColors.css')

clg.log('I want a default color')
clg.pri('But I wanna more pretty log')

TypeScript

import ColorLog from 'colorlog-css'

const clg = new ColorLog('./MyColors.css')
// const clg = new ColorLog()
// clg.set('./MyColors.css')

clg.list()
clg.suc('cess :)')
clg
  .join()
  .log('log')
  .pri('pri')
  .sec('sec')
  .suc('suc')
  .danger('danger')
  .warn('warn')
  .info('info')
  .end()

There are already 198 schemes based on the iterm-scheme list and 3/4 bit default style. You can easily modify your color with these predefined colors and your CSS.

clg.list() // Will show the default 3/4 bit style list.
clg.listScheme() // List schemes with methods of scheme applied.

import { Schemes } from 'colorlog-css'
// Schemes will applied to the methods 🕶
clg.setScheme(Schemes.Batman)

How to change color ?

Make a CSS file for customizing your own color :)

• Selectors
  • Class Format ( Each selector will represent method's color)
    • .primary
    • .secondary
    • .success
    • .danger
    • .warning
    • .info
    • .default
  • Id Format
    • #pre
      • val ( property represent the value of prefix )

/* SAMPLE */

.success {
  background: #00bc80;
  color: rgb(255, 255, 255);
}

/* .default #pre {
  background: null;
  color: #ffffff;
  val: *Default*;
} */

.primary #pre {
  background: rgb(0, 115, 216);
  color: rgb(255, 255, 255);
  val: 🌈 HEY;
}

.secondary #pre {
  background: #514636;
  color: rgb(235, 244, 255);
  val: ☕️ Hmm..;
}

.success #pre {
  background: #58ff82;
  color: rgb(33, 33, 33);
  val: ✅ Great !;
}

.danger #pre {
  background: #ff7dab;
  color: rgb(0, 0, 0);
  val: 🔥 🔥 WATCH OUT;
}

.warning #pre {
  background: #ffdc2e;
  color: rgb(0, 0, 0);
  val: 💩 Shit;
}

.info #pre {
  background: rgba(0, 170, 189, 0.612);
  color: rgb(255, 255, 255);
  val: ⭐️ __NOTE__ ⭐️;
}

import ColorLog from 'colorlog-css'

const clg = new ColorLog('./MyColors.css')
clg
  .join()
  .log('log')
  .pri('pri')
  .sec('sec')
  .suc('suc')
  .danger('danger')
  .warn('warn')
  .info('info')
  .end()

or programmatically,

import ColorLog, { Colors, Style } from 'colorlog-css'

const clg = new ColorLog('./MyColors.css')

clg.info('You can change the color like this', '\n\n')

clg.danger('danger')

// Apply only background
clg.categories.danger.color = clg.makeForm(null, '#ff4757')
clg.danger('danger')

// Apply styles and colors
clg.categories.danger.color = clg.makeForm(
  [Colors.Magenta, Style.Italic, Style.Bold],
  '#7bed9f'
)
clg.danger('danger')

Output will look like this ✨

TODO...

• [x] Make it available to customize default color set.
  • [x] Customize it with schemes / inputing the value directly.
• [x] Change font styles with string or string[] types
• [ ] Any ideas? 😄

Any questions or suggestions are always welcome 🍀