diff options
author | Starfall <us@starfall.systems> | 2022-05-27 12:35:56 -0500 |
---|---|---|
committer | Starfall <us@starfall.systems> | 2022-05-27 12:38:43 -0500 |
commit | a4f8b84ef43a3b0ebe90c4246d3e67a8a3e9d8bd (patch) | |
tree | c01b897319bee05c3e9d92d6105b8c2c6b09d479 /preview.html |
Initial commit
Diffstat (limited to 'preview.html')
-rw-r--r-- | preview.html | 189 |
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)>██</span><span style=color:var(--dkgrey)>██</span><span style=color:var(--red)>██</span><span style=color:var(--orange)>██</span><span style=color:var(--yellow)>██</span><span style=color:var(--green)>██</span><span style=color:var(--cyan)>██</span><span style=color:var(--blue)>██</span><span style=color:var(--magenta)>██</span><br> +<span style=color:var(--white)>██</span><span style=color:var(--ltgrey)>██</span><span style=color:var(--brred)>██</span><span style=color:var(--brorange)>██</span><span style=color:var(--bryellow)>██</span><span style=color:var(--brgreen)>██</span><span style=color:var(--brcyan)>██</span><span style=color:var(--brblue)>██</span><span style=color:var(--brmagenta)>██</span><br> +<!-- greyscale --> +<span style=color:var(--grey0)>██</span><span style=color:var(--grey1)>██</span><span style=color:var(--grey2)>██</span><span style=color:var(--grey3)>██</span><span style=color:var(--grey4)>██</span><span style=color:var(--grey5)>██</span><span style=color:var(--grey6)>██</span><span style=color:var(--grey7)>██</span><span style=color:var(--grey8)>██</span><span style=color:var(--grey9)>██</span><span style=color:var(--grey10)>██</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)>██</span><span style=color:var(--dkgrey)>██</span><span style=color:var(--red)>██</span><span style=color:var(--yellow)>██</span><span style=color:var(--green)>██</span><span style=color:var(--cyan)>██</span><span style=color:var(--blue)>██</span><span style=color:var(--magenta)>██</span><br> +<span style=color:var(--white)>██</span><span style=color:var(--ltgrey)>██</span><span style=color:var(--brred)>██</span><span style=color:var(--bryellow)>██</span><span style=color:var(--brgreen)>██</span><span style=color:var(--brcyan)>██</span><span style=color:var(--brblue)>██</span><span style=color:var(--brmagenta)>██</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)>██</span><span style=color:var(--dkgrey)>██</span><span style=color:var(--red)>██</span><span style=color:var(--yellow)>██</span><span style=color:var(--green)>██</span><span style=color:var(--cyan)>██</span><span style=color:var(--blue)>██</span><span style=color:var(--magenta)>██</span><br> +<span style=color:var(--white)>██</span><span style=color:var(--ltgrey)>██</span><span style=color:var(--brred)>██</span><span style=color:var(--bryellow)>██</span><span style=color:var(--brgreen)>██</span><span style=color:var(--brcyan)>██</span><span style=color:var(--brblue)>██</span><span style=color:var(--brmagenta)>██</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)>██</span><span style=color:var(--dkgrey)>██</span><span style=color:var(--red)>██</span><span style=color:var(--orange)>██</span><span style=color:var(--yellow)>██</span><span style=color:var(--green)>██</span><span style=color:var(--cyan)>██</span><span style=color:var(--blue)>██</span><span style=color:var(--magenta)>██</span><br> +<span style=color:var(--white)>██</span><span style=color:var(--ltgrey)>██</span><span style=color:var(--brred)>██</span><span style=color:var(--brorange)>██</span><span style=color:var(--bryellow)>██</span><span style=color:var(--brgreen)>██</span><span style=color:var(--brcyan)>██</span><span style=color:var(--brblue)>██</span><span style=color:var(--brmagenta)>██</span><br> +<!-- greyscale --> +<span style=color:var(--grey0)>██</span><span style=color:var(--grey1)>██</span><span style=color:var(--grey2)>██</span><span style=color:var(--grey3)>██</span><span style=color:var(--grey4)>██</span><span style=color:var(--grey5)>██</span><span style=color:var(--grey6)>██</span><span style=color:var(--grey7)>██</span><span style=color:var(--grey8)>██</span><span style=color:var(--grey9)>██</span><span style=color:var(--grey10)>██</span><br> +Adapted from <a href=https://github.com/chriskempson/tomorrow-theme>Chris Kempson's Tomorrow themes</a>. +</div> |