add terminal color tweaking

ZYinMD · Dec 21, 2018 · 99863aa · 99863aa
1 parent 7f46d35
commit 99863aa
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 0 deletions.
diff --git a/palettes/_terminal-palettes/cuttlefish-terminal.css b/palettes/_terminal-palettes/cuttlefish-terminal.css
@@ -0,0 +1,74 @@
+.cuttlefish .black {
+  color: #bbb;
+}
+
+.cuttlefish .blue {
+  color: #5be;
+  color: #7df;
+}
+
+/* has to be very bright, because of the blue on green ls output in ubuntu for folders with permissions*/
+.cuttlefish .brightblack {
+  color: #eee;
+}
+
+.cuttlefish .brightblue {
+  color: #2bf;
+}
+
+.cuttlefish .brightcyan {
+  color: #8fe;
+}
+
+.cuttlefish .brightgreen {
+  color: #9f0;
+}
+
+.cuttlefish .brightmagenta {
+  color: #f9c;
+}
+
+.cuttlefish .brightred {
+  color: #f44;
+}
+
+.cuttlefish .brightwhite {
+  color: #eee;
+}
+
+.cuttlefish .brightyellow {
+  color: #ff0;
+}
+
+.cuttlefish .cyan {
+  color: #5da;
+}
+
+.cuttlefish .green {
+  color: #5c0;
+  color: #370;
+  /* has to be very dull, because of the blue on green ls output in ubuntu for folders with permissions */
+}
+
+
+.cuttlefish .magenta {
+  color: #f58;
+}
+
+.cuttlefish .red {
+  color: #ea3; /* since there's no orange in the palette, let's add some orange */
+}
+
+.cuttlefish .white {
+  color: #bbb;
+}
+
+.cuttlefish .yellow {
+  color: #dd2;
+}
+
+body.cuttlefish {
+  background-color: #132b2b;
+  color: white;
+  font-size: 15px;
+}
diff --git a/palettes/_terminal-palettes/sepia-terminal.css b/palettes/_terminal-palettes/sepia-terminal.css
diff --git a/palettes/_terminal-palettes/terminal-palettes.html b/palettes/_terminal-palettes/terminal-palettes.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Terminal Palettes</title>
+  <link rel="stylesheet" href="../_utils/palette.css">
+  <link rel="stylesheet" href="sepia-terminal.css">
+  <link rel="stylesheet" href="cuttlefish-terminal.css">
+  <script defer src="terminal-palettes.js"></script>
+</head>
+
+<body>
+  <header>
+    <label for="theme-select">Which theme are you tweaking?</label>
+    <select id="theme-select">
+      <option value="sepia">Sepia</option>
+      <option value="cuttlefish">Sepia from Cuttlefish</option>
+      <option value="serif">Sepia from Cuttlefish (serif)</option>
+      <option value="algae">Sepia from Cuttlefish's Algae</option>
+    </select>
+  </header>
+  <h1>The 16 terminal colors:</h1>
+  <section class="color-names">
+  </section>
+  <h1>Longer lines look like this:</h1>
+  <section class="lines">
+  </section>
+  <h1>Combination of colors:</h1>
+  <section class="combinations">
+  </section>
+</body>
+
+</html>
diff --git a/palettes/_terminal-palettes/terminal-palettes.js b/palettes/_terminal-palettes/terminal-palettes.js
@@ -0,0 +1,57 @@
+const terminalPalette = [
+	"black",
+	"blue",
+	"cyan",
+	"green",
+	"magenta",
+	"red",
+	"white",
+	"yellow",
+	"brightblack",
+	"brightblue",
+	"brightcyan",
+	"brightgreen",
+	"brightmagenta",
+	"brightred",
+	"brightwhite",
+	"brightyellow",
+];
+const colorNames = document.querySelector('section.color-names');
+const lines = document.querySelector('section.lines');
+const combinations = document.querySelector('section.combinations');
+
+// dropdown action
+const dropdown = document.querySelector('#theme-select');
+const body = document.querySelector('body');
+body.className = dropdown.value = localStorage.getItem('selectedTheme') || 'sepia';
+drawPalette();
+dropdown.addEventListener('change', event => {
+	localStorage.setItem('selectedTheme', body.className = event.target.value);
+	drawPalette();
+});
+
+function drawPalette() {
+	colorNames.innerHTML = lines.innerHTML = combinations.innerHTML = '';
+	for (let color of terminalPalette) {
+		let colorName = document.createElement('p');
+		colorName.innerText = color;
+		colorName.classList.add(color);
+		colorNames.append(colorName);
+
+		let line = document.createElement('p');
+		line.innerText = color + ': Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod';
+		line.classList.add(color);
+		lines.append(line);
+
+		let combination = document.createElement('p');
+		for (let i of terminalPalette) {
+			if (color == i)
+				continue;
+			let A = `<span class="${color}">${color}</span>`;
+			let B = `<span class="${i}">${i}</span>`;
+			combination.innerHTML += (A + B);
+		}
+		combinations.innerHTML += `<h2 class="${color}">${color}:</h2>`;
+		combinations.append(combination);
+	}
+}