docs: add color schemes preview to README

Adds color schemes preview in table Closes joeroe#48
d1nuc0m · Sep 7, 2024 · 04acce6 · 04acce6
1 parent 21a4417
commit 04acce6
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -53,7 +53,16 @@ risotto uses the [base16 framework](https://github.com/chriskempson/base16) to d
 A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
 The default is `base16-dark`.
 
-<!-- TODO: add screenshots of default themes -->
+| Palette           | Preview                                                                    | Palette           | Preview                                                                     |
+| ----------------- | -------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------- |
+| apprentice        | <img align="center" width="250" src="images/palette/apprentice.png">       | base16-dark       | <img align="center" width="250" src="images/palette/base16-dark.png">       |
+| base16-light      | <img align="center" width="250" src="images/palette/base16-light.png">     | dracula           | <img align="center" width="250" src="images/palette/dracula.png">           |
+| gruvbox-dark      | <img align="center" width="250" src="images/palette/gruvbox-dark.png">     | gruvbox-light     | <img align="center" width="250" src="images/palette/gruvbox-light.png">     |
+| material          | <img align="center" width="250" src="images/palette/material.png">         | papercolor-dark   | <img align="center" width="250" src="images/palette/papercolor-dark.png">   |
+| papercolor-light  | <img align="center" width="250" src="images/palette/papercolor-light.png"> | solarized-dark    | <img align="center" width="250" src="images/palette/solarized-dark.png">    |
+| solarized-light   | <img align="center" width="250" src="images/palette/solarized-light.png">  | tender            | <img align="center" width="250" src="images/palette/tender.png">            |
+| tokyo-night-dark  | <img align="center" width="250" src="images/palette/tokyo-night-dark.png"> | tokyo-night-light | <img align="center" width="250" src="images/palette/tokyo-night-light.png"> |
+| windows-95        | <img align="center" width="250" src="images/palette/windows-95.png">       | windows-95-light  | <img align="center" width="250" src="images/palette/windows-95-light.png">  |
 
 The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your `static/css/palettes` directory.