about summary refs log tree commit diff
path: root/preview.html
diff options
context:
space:
mode:
authorStarfall <us@starfall.systems>2022-05-27 12:35:56 -0500
committerStarfall <us@starfall.systems>2022-05-27 12:38:43 -0500
commita4f8b84ef43a3b0ebe90c4246d3e67a8a3e9d8bd (patch)
treec01b897319bee05c3e9d92d6105b8c2c6b09d479 /preview.html
Initial commit
Diffstat (limited to 'preview.html')
-rw-r--r--preview.html189
1 files changed, 189 insertions, 0 deletions
diff --git a/preview.html b/preview.html
new file mode 100644
index 0000000..8bdf75e
--- /dev/null
+++ b/preview.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang=en-US dir=ltr>
+<title>Color Themes</title>
+<meta charset=UTF-8>
+<meta name=robots content='noindex, nofollow'>
+<meta name=viewport content='width=device-width, initial-scale=1'>
+
+<style>
+:root {
+	font-size: 24px;
+	background-color: black;
+}
+body {
+	max-width: 75ch;
+	margin: auto;
+}
+a {
+	color: var(--brblue);
+}
+a:visited {
+	color: var(--blue);
+}
+a:hover {
+	text-decoration: none;
+	color: var(--brblue);
+}
+.showoff {
+	font-family: monospace;
+	padding: 1rem;
+	margin: 1rem 0;
+}
+.gruvbox-dark-hard {
+	--black:    #282828;
+	--dkgrey:   #665c54;
+	--ltgrey:   #a89984;
+	--white:    #ebdbb2;
+	--red:      #cc241d;
+	--brred:    #fb4934;
+	--orange:   #d65d0e;
+	--brorange: #fe8019;
+	--yellow:   #d79921;
+	--bryellow: #fabd2f;
+	--green:    #98971a;
+	--brgreen:  #b8bb26;
+	--cyan:     #689d6a;
+	--brcyan:   #8ec07c;
+	--blue:     #458588;
+	--brblue:   #83a598;
+	--magenta:  #b16286;
+	--brmagenta:#d3869b;
+
+	color:      #ebdbb2;
+	background: #1d2021;
+
+	--grey0:  #282828; /* black */
+	--grey1:  #3c3836;
+	--grey2:  #504945;
+	--grey3:  #665c54; /* dkgrey */
+	--grey4:  #7c6f64;
+	--grey5:  #928374; /* default dkgrey */
+	--grey6:  #a89984; /* ltgrey */
+	--grey7:  #bdae93;
+	--grey8:  #d5c4a1;
+	--grey9:  #ebdbb2; /* fg/white */
+	--grey10: #fbf1c7;
+}
+</style>
+
+<div class="showoff gruvbox-dark-hard">
+<strong>Gruvbox Dark Hard</strong><br>
+<!-- spectrum -->
+<span style=color:var(--black)>&#x2588;&#x2588;</span><span style=color:var(--dkgrey)>&#x2588;&#x2588;</span><span style=color:var(--red)>&#x2588;&#x2588;</span><span style=color:var(--orange)>&#x2588;&#x2588;</span><span style=color:var(--yellow)>&#x2588;&#x2588;</span><span style=color:var(--green)>&#x2588;&#x2588;</span><span style=color:var(--cyan)>&#x2588;&#x2588;</span><span style=color:var(--blue)>&#x2588;&#x2588;</span><span style=color:var(--magenta)>&#x2588;&#x2588;</span><br>
+<span style=color:var(--white)>&#x2588;&#x2588;</span><span style=color:var(--ltgrey)>&#x2588;&#x2588;</span><span style=color:var(--brred)>&#x2588;&#x2588;</span><span style=color:var(--brorange)>&#x2588;&#x2588;</span><span style=color:var(--bryellow)>&#x2588;&#x2588;</span><span style=color:var(--brgreen)>&#x2588;&#x2588;</span><span style=color:var(--brcyan)>&#x2588;&#x2588;</span><span style=color:var(--brblue)>&#x2588;&#x2588;</span><span style=color:var(--brmagenta)>&#x2588;&#x2588;</span><br>
+<!-- greyscale -->
+<span style=color:var(--grey0)>&#x2588;&#x2588;</span><span style=color:var(--grey1)>&#x2588;&#x2588;</span><span style=color:var(--grey2)>&#x2588;&#x2588;</span><span style=color:var(--grey3)>&#x2588;&#x2588;</span><span style=color:var(--grey4)>&#x2588;&#x2588;</span><span style=color:var(--grey5)>&#x2588;&#x2588;</span><span style=color:var(--grey6)>&#x2588;&#x2588;</span><span style=color:var(--grey7)>&#x2588;&#x2588;</span><span style=color:var(--grey8)>&#x2588;&#x2588;</span><span style=color:var(--grey9)>&#x2588;&#x2588;</span><span style=color:var(--grey10)>&#x2588;&#x2588;</span><br>
+<a href=https://github.com/morhetz/gruvbox>By Pavel Pertsev</a>
+</div>
+
+<style>
+.selenized-dark {
+	--black:    #184956;
+	--dkgrey:   #2d5b69;
+	--ltgrey:   #72898f;
+	--white:    #cad8d9;
+	--red:      #fa5750;
+	--brred:    #ff665c;
+	--yellow:   #dbb32d;
+	--bryellow: #ebc13d;
+	--green:    #75b938;
+	--brgreen:  #84c747;
+	--cyan:     #41c7b9;
+	--brcyan:   #53d6c7;
+	--blue:     #4695f7;
+	--brblue:   #58a3ff;
+	--magenta:  #f275be;
+	--brmagenta:#ff84cd;
+
+	color: 		#adbcbc;
+	background: #103c48;
+}
+</style>
+
+<div class='showoff selenized-dark'>
+<strong>Selenized Dark</strong><br>
+<!-- spectrum -->
+<span style=color:var(--black)>&#x2588;&#x2588;</span><span style=color:var(--dkgrey)>&#x2588;&#x2588;</span><span style=color:var(--red)>&#x2588;&#x2588;</span><span style=color:var(--yellow)>&#x2588;&#x2588;</span><span style=color:var(--green)>&#x2588;&#x2588;</span><span style=color:var(--cyan)>&#x2588;&#x2588;</span><span style=color:var(--blue)>&#x2588;&#x2588;</span><span style=color:var(--magenta)>&#x2588;&#x2588;</span><br>
+<span style=color:var(--white)>&#x2588;&#x2588;</span><span style=color:var(--ltgrey)>&#x2588;&#x2588;</span><span style=color:var(--brred)>&#x2588;&#x2588;</span><span style=color:var(--bryellow)>&#x2588;&#x2588;</span><span style=color:var(--brgreen)>&#x2588;&#x2588;</span><span style=color:var(--brcyan)>&#x2588;&#x2588;</span><span style=color:var(--brblue)>&#x2588;&#x2588;</span><span style=color:var(--brmagenta)>&#x2588;&#x2588;</span><br>
+<a href=https://github.com/jan-warchol/selenized>By Jan Warchol, based on Solarized by Ethan Schoonover.</a>
+</div>
+
+<style>
+.selenized-black {
+	--black:    #252525;
+	--dkgrey:   #3b3b3b;
+	--ltgrey:   #777777;
+	--white:    #dedede;
+	--red:      #ed4a46;
+	--brred:    #ff5e56;
+	--yellow:   #dbb32d;
+	--bryellow: #efc541;
+	--green:    #70b433;
+	--brgreen:  #83c746;
+	--cyan:     #3fc5b7;
+	--brcyan:   #56d8c9;
+	--blue:     #368aeb;
+	--brblue:   #4f9cfe;
+	--magenta:  #eb6eb7;
+	--brmagenta:#ff81ca;
+
+	color: 		#b9b9b9;
+	background: #181818;
+}
+</style>
+
+<div class='showoff selenized-black'>
+<strong>Selenized Black</strong><br>
+<!-- spectrum -->
+<span style=color:var(--black)>&#x2588;&#x2588;</span><span style=color:var(--dkgrey)>&#x2588;&#x2588;</span><span style=color:var(--red)>&#x2588;&#x2588;</span><span style=color:var(--yellow)>&#x2588;&#x2588;</span><span style=color:var(--green)>&#x2588;&#x2588;</span><span style=color:var(--cyan)>&#x2588;&#x2588;</span><span style=color:var(--blue)>&#x2588;&#x2588;</span><span style=color:var(--magenta)>&#x2588;&#x2588;</span><br>
+<span style=color:var(--white)>&#x2588;&#x2588;</span><span style=color:var(--ltgrey)>&#x2588;&#x2588;</span><span style=color:var(--brred)>&#x2588;&#x2588;</span><span style=color:var(--bryellow)>&#x2588;&#x2588;</span><span style=color:var(--brgreen)>&#x2588;&#x2588;</span><span style=color:var(--brcyan)>&#x2588;&#x2588;</span><span style=color:var(--brblue)>&#x2588;&#x2588;</span><span style=color:var(--brmagenta)>&#x2588;&#x2588;</span><br>
+<a href=https://github.com/jan-warchol/selenized>By Jan Warchol, based on Solarized by Ethan Schoonover.</a>
+</div>
+
+<style>
+.tomorrows-stars {
+	--black:    #282a2e;
+	--dkgrey:   #373b41;
+	--ltgrey:   #969896;
+	--white:    #c5c8c6;
+	--brred:      #cc6666;
+	--red:    #d54e53;
+	--brorange:   #e78c45;
+	--orange: #f5871f;
+	--bryellow:   #f0c674;
+	--yellow: #e7ba47; /* green was reduced slightly from original Tomorrow Night Bright */
+	--brgreen:    #b5bd68;
+	--green:  #b9ca4a;
+	--brcyan:     #8abeb7;
+	--cyan:   #70c0b1;
+	--brblue:     #81a2be;
+	--blue:   #7aa6da;
+	--brmagenta:  #b294bb;
+	--magenta:#c397d8;
+
+	color: 		var(--white);
+	background: var(--grey1);
+
+	--grey0: #000000;
+	--grey1: #1d1f21; /* bg */
+	--grey2: #282a2e; /* black */
+	--grey3: #373b41; /* dkgrey */
+	--grey4: #424242;
+	--grey5: #515151;
+	--grey6: #7e807c; /* pushed darker from the original #8e908c */
+	--grey7: #969896; /* ltgrey */
+	--grey8: #c5c8c6; /* fg / white */
+	--grey9: #d6d6d6;
+	--grey10: #eaeaea;
+}
+</style>
+
+<div class='showoff tomorrows-stars'>
+<strong>Tomorrow's Stars</strong><br>
+<!-- spectrum -->
+<span style=color:var(--black)>&#x2588;&#x2588;</span><span style=color:var(--dkgrey)>&#x2588;&#x2588;</span><span style=color:var(--red)>&#x2588;&#x2588;</span><span style=color:var(--orange)>&#x2588;&#x2588;</span><span style=color:var(--yellow)>&#x2588;&#x2588;</span><span style=color:var(--green)>&#x2588;&#x2588;</span><span style=color:var(--cyan)>&#x2588;&#x2588;</span><span style=color:var(--blue)>&#x2588;&#x2588;</span><span style=color:var(--magenta)>&#x2588;&#x2588;</span><br>
+<span style=color:var(--white)>&#x2588;&#x2588;</span><span style=color:var(--ltgrey)>&#x2588;&#x2588;</span><span style=color:var(--brred)>&#x2588;&#x2588;</span><span style=color:var(--brorange)>&#x2588;&#x2588;</span><span style=color:var(--bryellow)>&#x2588;&#x2588;</span><span style=color:var(--brgreen)>&#x2588;&#x2588;</span><span style=color:var(--brcyan)>&#x2588;&#x2588;</span><span style=color:var(--brblue)>&#x2588;&#x2588;</span><span style=color:var(--brmagenta)>&#x2588;&#x2588;</span><br>
+<!-- greyscale -->
+<span style=color:var(--grey0)>&#x2588;&#x2588;</span><span style=color:var(--grey1)>&#x2588;&#x2588;</span><span style=color:var(--grey2)>&#x2588;&#x2588;</span><span style=color:var(--grey3)>&#x2588;&#x2588;</span><span style=color:var(--grey4)>&#x2588;&#x2588;</span><span style=color:var(--grey5)>&#x2588;&#x2588;</span><span style=color:var(--grey6)>&#x2588;&#x2588;</span><span style=color:var(--grey7)>&#x2588;&#x2588;</span><span style=color:var(--grey8)>&#x2588;&#x2588;</span><span style=color:var(--grey9)>&#x2588;&#x2588;</span><span style=color:var(--grey10)>&#x2588;&#x2588;</span><br>
+Adapted from <a href=https://github.com/chriskempson/tomorrow-theme>Chris Kempson's Tomorrow themes</a>.
+</div>