feat: add colour support for browsers

Author: MKRhere

src/colours.ts

@@ -1,3 +1,5 @@
+// Inherited from https://github.com/grammyjs/debug/blob/502f75667a64391adb9a73b1312a52a8e9ba5f64/colors.ts
+
 // https://github.com/debug-js/debug/blob/4.3.7/src/browser.js
 const colors = [
 	0x0000cc, 0x0000ff, 0x0033cc, 0x0033ff, 0x0066cc, 0x0066ff, 0x0099cc, 0x0099ff, 0x00cc00, 0x00cc33, 0x00cc66,

src/types.ts

@@ -1,6 +1,8 @@
 // type-safe way to access global values that may not be available in all runtimes
 
 export const context = globalThis as unknown as {
+	// browsers
+	document?: any;
 	// Node, Deno, Bun
 	process?: {
 		env: { [key: string]: string };

src/w.ts

@@ -1,5 +1,5 @@
 import { context } from "./types.ts";
-import { colourNs } from "./colours.ts";
+import { colourNs, selectColour } from "./colours.ts";
 import { getEnv } from "./env.ts";
 import { Namespaces } from "./namespacing.ts";
 const DEBUG = getEnv("DEBUG");
@@ -18,9 +18,18 @@ export interface DebugFn {
 export const w = (namespace: string = ""): DebugFn => {
 	const debugfn = (...args: unknown[]) => {
 		if (debugfn.enabled) {
-			const ns = useColour ? colourNs(namespace) : namespace;
 			const [p0, ...rest] = args;
-			debugfn.logger(`${ns} ${p0}`, ...rest);
+			if (context.document) {
+				debugfn.logger(
+					`%c${namespace}%c ${p0}`,
+					`color: #${selectColour(namespace).toString(16)}`,
+					"color: inherit",
+					...rest,
+				);
+			} else {
+				let ns = useColour ? colourNs(namespace) : namespace;
+				debugfn.logger(`${ns} ${p0}`, ...rest);
+			}
 		}
 	};