Added example theme (#161)

Still to do is move the default theme files and values to this new `themes` folder.

THEMING.md

@@ -2,18 +2,33 @@
 
 This document should document what are themes, how they're structured, and how to make them.
 
+Example themes can be found in the [themes](/themes/) folder of this project.
+
 
 ## Theme Structure
 
 A theme is a folder placed in `sd:/retro-go/themes` containing the following files:
 
+````
+/retro-go/themes
+└── example
+    ├── background_*.png
+    ├── banner_*.png
+    ├── logo_*.png
+    ├── preview.png
+    └── theme.json
+````
+
 | Name | Format | Description | Required |
 |--|--|--|--|
 | theme.json | JSON | Contains the theme metadata (description, author, colors, etc) | Yes |
 | preview.png | PNG 160x120 | Theme preview to be displayed in the theme selector | No |
-| background_X.png | PNG 320x240 | Launcher backgrounds where X is the name of the launcher tab (see launcher/main/images) | No |
-| banner_X.png | PNG 272x24 | Launcher banners where X is the name of the launcher tab (see launcher/main/images) | No |
-| logo_X.png | PNG 46x50 | Launcher logos where X is the name of the launcher tab (see launcher/main/images) | No |
+| background_X.png | PNG 320x240 | Launcher backgrounds where X is the name of the launcher tab | No |
+| banner_X.png | PNG 272x24 | Launcher banners where X is the name of the launcher tab | No |
+| logo_X.png | PNG 46x50 | Launcher logos where X is the name of the launcher tab | No |
+
+It is highly recommended to keep the image files sizes as small as possible to ensure good loading speed. This can be achieved by using the lowest bit depth possible when saving your PNG file. Tools like [pngquant](https://pngquant.org/) can also help!
+
 
 ### theme.json
 
@@ -33,6 +48,7 @@ Colors are RGB565 and can be represented as integers or hex strings. The special
         "border": "0x6B4D",
         "header": "0xFFFF",
         "scrollbar": "0xFFFF",
+        "shadow": "none",
         "item_standard": "0xFFFF",
         "item_disabled": "0x8410",
         "item_message": "0xBDF7"

components/retro-go/rg_gui.c

@@ -28,6 +28,7 @@ static struct
         rg_color_t item_disabled;
         rg_color_t item_message;
         rg_color_t scrollbar;
+        rg_color_t shadow;
     } style;
     char theme_name[32];
     cJSON *theme_obj;
@@ -173,6 +174,7 @@ bool rg_gui_set_theme(const char *theme_name)
     gui.style.item_disabled = rg_gui_get_theme_color("dialog", "item_disabled", C_GRAY);
     gui.style.item_message = rg_gui_get_theme_color("dialog", "item_message", C_SILVER);
     gui.style.scrollbar = rg_gui_get_theme_color("dialog", "scrollbar", C_WHITE);
+    gui.style.shadow = rg_gui_get_theme_color("dialog", "shadow", C_NONE);
 
     return true;
 }

themes/default/README.md

@@ -0,0 +1,9 @@
+At this time the default theme is hardcoded in retro-go. You can find some of its values in those places:
+
+- `components/retro-go/rg_gui.c`
+- `launcher/main/gui.c`
+- `launcher/main/images/`
+
+At some point all of that stuff will be moved here...
+
+But in the mean time, if you're looking to build your own theme, you can use the `example` theme as a template instead.

themes/example/theme.json

@@ -0,0 +1,53 @@
+{
+    "description": "An example theme to show how themes are made",
+    "website": "https://github.com/ducalex/retro-go/",
+    "author": "ducalex",
+    "dialog": {
+        "__comment": "This section contains global dialog colors",
+        "background": "0xFFEF",
+        "foreground": "0x0000",
+        "border": "0x94B2",
+        "header": "0x0000",
+        "scrollbar": "0x0000",
+        "shadow": "none",
+        "item_standard": "0x0000",
+        "item_disabled": "0xF8B2",
+        "item_message": "0x4208"
+    },
+    "launcher_1": {
+        "__comment": "This section contains launcher colors variant 1",
+        "background": "0xFFFF",
+        "foreground": "0x0021",
+        "list_standard_bg": "transparent",
+        "list_standard_fg": "0xF8B2",
+        "list_selected_bg": "transparent",
+        "list_selected_fg": "0xF800"
+    },
+    "launcher_2": {
+        "__comment": "This section contains launcher colors variant 2",
+        "background": "0xFFFF",
+        "foreground": "0x0021",
+        "list_standard_bg": "transparent",
+        "list_standard_fg": "0x2444",
+        "list_selected_bg": "transparent",
+        "list_selected_fg": "0x07E0"
+    },
+    "launcher_3": {
+        "__comment": "This section contains launcher colors variant 3",
+        "background": "0xFFFF",
+        "foreground": "0x0021",
+        "list_standard_bg": "transparent",
+        "list_standard_fg": "0xF8B2",
+        "list_selected_bg": "0xF800",
+        "list_selected_fg": "0xFFFF"
+    },
+    "launcher_4": {
+        "__comment": "This section contains launcher colors variant 4",
+        "background": "0xFFFF",
+        "foreground": "0x0021",
+        "list_standard_bg": "transparent",
+        "list_standard_fg": "0x52AA",
+        "list_selected_bg": "0xF800",
+        "list_selected_fg": "0xFFFF"
+    }
+}