Terminal theme

by PhilQ

HTML

<pre>
 
 <i style="color: #fff; background: #102B3F;"></i><i style="color: #000; background: #fff;">TEST</i><i style="color: #fff; background: #102B3F;"></i>
  <i style="color: #fff; background: #102B3F;">╰─</i> cmd ...
 
 <i style="color: #fff; background: #102B3F;">╭─</i><i style="color: #000; background: #fff;">TEST</i><i style="color: #fff; background: #102B3F;"></i>
 <i style="color: #fff; background: #102B3F;">╰─</i> cmd ...

 <i style="color: var(--os-b); background: var(--bg);"></i><i style="color: var(--os-f); background: var(--os-b);"></i><i style="color: var(--os-b); background: var(--dir-b);"></i><i style="color: var(--dir-f); background: var(--dir-b);"> Microsoft Windows 10 Pro</i><i style="color: var(--dir-b); background: var(--bg);"></i>
 <i style="color: var(--os-b); background: var(--bg);"></i><i style="color: var(--os-f); background: var(--os-b);"></i><i style="color: var(--os-b); background: var(--dir-b);"></i><i style="color: var(--dir-f); background: var(--dir-b);"> Node.js v16.13.0</i><i style="color: var(--dir-b); background: var(--bg);"></i> <i style="color: var(--os-b); background: var(--bg);"></i><i style="color: var(--os-f); background: var(--os-b);"></i><i style="color: var(--os-b); background: var(--dir-b);"></i><i style="color: var(--dir-f); background: var(--dir-b);"> NPM 8.13.2</i><i style="color: var(--dir-b); background: var(--bg);"></i>
 <i style="color: var(--os-b); background: var(--bg);"></i><i style="color: var(--os-f); background: var(--os-b);"></i><i style="color: var(--os-b); background: var(--dir-b);"></i><i style="color: var(--dir-f); background: var(--dir-b);"> Git 2.37.0.windows.1</i><i style="color: var(--dir-b); background: var(--bg);"></i> <i style="color: var(--os-b); background: var(--bg);"></i><i style="color: var(--os-f); background: var(--os-b);"></i><i style="color: var(--os-b); background: var(--dir-b);"></i><i style="color: var(--dir-f); background: var(--dir-b);"> GitHub CLI...

SCSS

:root {
	--red: #E06C75;
	--green: #98C379;
	--yellow: #E5C07B;
	--blue: #61AFEF;
	--purple: #C678DD;
	--bg: #102B3F;
	--fg: #e7eaec;
	--os-b: var(--fg);
	--os-f: var(--bg);
	--dir-b: #344b5c; //#4c606f;
	--dir-f: var(--blue); // #e7eaec;
	--dir-fm: #7c8a95; //#abb5bc;
	--git-b: #1c3649;
	--git-icon: #7c8a95;
}

i.r { color: var(--red); }
i.y { color: var(--yellow); }
i.g { color: var(--green); }
i.b { color: var(--blue); }
i.p { color: var(--purple); }

html, body {
	background: #000;
	margin: 0;
	padding: 1rem;
}
i, b, pre {
	font-weight: normal;
	font-style: normal;
}
pre {
	color: #eee;
	background: #102B3F;
	border: 2px solid white;
	font-family: 'CaskaydiaCove Nerd Font Mono';
	font-size: 13pt;
}
.green { color: green; background: red; }