JAVASCRIPT

js console log with color

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

js colored console log

/**
 * @param {string} text text to return
 * @param {string} color enums: [black, red, green, yellow, blue, magenta, cyan, white]
 * @returns colored text
 */
const colorConsoleText = (text, color = 'black') => {
    const colors = {
        black: "x1b[30m",
        red: "x1b[31m",
        green: "x1b[32m",
        yellow: "x1b[33m",
        blue: "x1b[34m",
        magenta: "x1b[35m",
        cyan: "x1b[36m",
        white: "x1b[37m",
        console_color: 'x1b[0m'
    }
    const coloredText = `${colors[color]}${text}${colors.console_color}`
    return coloredText
}

console.log color

colors = {
    reset: '33[0m',

    //text color

    black: '33[30m',
    red: '33[31m',
    green: '33[32m',
    yellow: '33[33m',
    blue: '33[34m',
    magenta: '33[35m',
    cyan: '33[36m',
    white: '33[37m',

    //background color

    blackBg: '33[40m',
    redBg: '33[41m',
    greenBg: '33[42m',
    yellowBg: '33[43m',
    blueBg: '33[44m',
    magentaBg: '33[45m',
    cyanBg: '33[46m',
    whiteBg: '33[47m'
}

console.log('33[31m this is red color on text');
console.log('33[0m this is reset');
console.log('33[41m this is red color on background');

js console.log color

console.log('%c My txt ', 'My css');

// Example
console.log('%c Hello world ', 'background: #222; color: #bada55');

javascript colorized console.log

console.log('%cconsole.log', 'color: green;');
console.info('%cconsole.info', 'color: green;');
console.debug('%cconsole.debug', 'color: green;');
console.warn('%cconsole.warn', 'color: green;');
console.error('%cconsole.error', 'color: green;');

how to change the color of a console.log in javascript

// Download the npm package "colors"
// npm i colors

var colors = require("colors");

console.log("Hello World".blue);

// output: Hello World (Its blue btw lmao)

javascript colorized console.log

const styles = ['color: green', 'background: yellow'].join(';');

const message = 'Some Important Message Here';

// 3. Using the styles and message variable
console.log('%c%s', styles, message);

javascript console.log colors

console.log('x1b[33m%sx1b[0m', 'hi!')

javascript colorized console.log

console.log(
  'Nothing here %cHi Cat %cHey Bear', // Console Message
  'color: blue',
  'color: red', // CSS Style
);

javascript console.log colors

console.log('%c Hello World','color:red;border:1px solid dodgerblue');

javascript colorized console.log

// 1. Pass the css styles in an array
const styles = [
  'color: green',
  'background: yellow',
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); // 2. Concatenate the individual array item and concatenate them into a string separated by a semi-colon (;)

// 3. Pass the styles variable
console.log('%cHello There', styles);

console.log colorido

const Style = {
    base: [
        "color: #fff",
        "background-color: #444",
        "padding: 2px 4px",
        "border-radius: 2px"
    ],
    warning: [
        "color: #eee",
        "background-color: red"
    ],
    success: [
        "background-color: green"
    ]
}
const log = (text, extra = []) => {
    let style = Style.base.join(';') + ';';
    style += extra.join(';'); // Add any additional styles
    console.log(`%c${text}`, style);
}

log("Normal Logs");
log("Warning Logs", Style.warning);
log("Success Logs", Style.success);