Skip to content

Instantly share code, notes, and snippets.

@bvaughn
Last active Jul 6, 2022
Embed
What would you like to do?
Color logging utils for Node and the browser
const COLORS = {
background: {
bgBlack: {
browser: [0, 0, 0],
node: "\x1b[40m",
},
bgRed: {
browser: [255, 0, 0],
node: "\x1b[41m",
},
bgGreen: {
browser: [0, 255, 0],
node: "\x1b[42m",
},
bgYellow: {
browser: [255, 255, 0],
node: "\x1b[43m",
},
bgBlue: {
browser: [0, 0, 255],
node: "\x1b[44m",
},
bgMagenta: {
browser: [255, 0, 255],
node: "\x1b[45m",
},
bgCyan: {
browser: [0, 255, 255],
node: "\x1b[46m",
},
bgWhite: {
browser: [255, 255, 255],
node: "\x1b[47m",
},
},
foreground: {
black: {
browser: [0, 0, 0],
node: "\x1b[30m",
},
red: {
browser: [255, 0, 0],
node: "\x1b[31m",
},
green: {
browser: [0, 255, 0],
node: "\x1b[32m",
},
yellow: {
browser: [255, 255, 0],
node: "\x1b[33m",
},
blue: {
browser: [0, 0, 255],
node: "\x1b[34m",
},
magenta: {
browser: [255, 0, 255],
node: "\x1b[35m",
},
cyan: {
browser: [0, 255, 255],
node: "\x1b[36m",
},
white: {
browser: [255, 255, 255],
node: "\x1b[37m",
},
},
};
const NODE_RESET = "\x1b[0m";
const NODE_BOLD = "\x1b[1m";
const NODE_DIM = "\x1b[2m";
const isNode =
typeof process !== "undefined" &&
process.versions != null &&
process.versions.node != null;
const isBrowserDarkTheme =
!isNode &&
typeof window.matchMedia === "function" &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
function createColor(config = {}) {
const { backgroundColor = "", weight = "" } = config;
let { color = "" } = config;
function print(string) {
if (isNode) {
console.log(`${backgroundColor}${color}${weight}${string}${NODE_RESET}`);
} else {
if (!color) {
color = isBrowserDarkTheme ? [255, 255, 255] : [0, 0, 0];
}
let backgroundColorStyle = "";
if (backgroundColor) {
backgroundColorStyle = `background-color: rgb(${backgroundColor.join(
","
)});`;
}
let colorStyle = "";
if (weight === NODE_DIM) {
colorStyle = `color: rgba(${color.join(",")},0.5);`;
} else {
colorStyle = `color: rgb(${color.join(",")});`;
}
let weightStyle = "";
if (weight === NODE_BOLD) {
weightStyle = "font-weight: bold;";
}
console.log(
"%c%s",
`${backgroundColorStyle}${colorStyle}${weightStyle}`,
string
);
}
}
for (const key in COLORS.background) {
Object.defineProperty(print, key, {
get: () =>
createColor({
...config,
backgroundColor: isNode
? COLORS.background[key].node
: COLORS.background[key].browser,
}),
});
}
for (const key in COLORS.foreground) {
Object.defineProperty(print, key, {
get: () =>
createColor({
...config,
color: isNode
? COLORS.foreground[key].node
: COLORS.foreground[key].browser,
}),
});
}
Object.defineProperty(print, "bold", {
get: () =>
createColor({
...config,
weight: NODE_BOLD,
}),
});
Object.defineProperty(print, "dim", {
get: () =>
createColor({
...config,
weight: NODE_DIM,
}),
});
return print;
}
const baseConfig = createColor();
export const {
bold,
dim,
bgBlack,
bgRed,
bgGreen,
bgYellow,
bgBlue,
bgMagenta,
bgCyan,
bgWhite,
black,
red,
green,
yellow,
blue,
magenta,
cyan,
white,
} = baseConfig;
@bvaughn
Copy link
Author

bvaughn commented Jan 18, 2022

Can be used like so:

dim.red("dim.red");
dim("dim");
red.dim("red.dim");
red("red");
red.blue("red.blue"); // Silly but to show it works
red.blue.bgYellow("red.blue.bgYellow"); // Also silly
red.dim.blue("red.dim.blue"); // Silly too
dim.bold("dim.bold");
dim.bold.bgYellow("dim.bold.bgYellow");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment