diff --git a/content/posts/2024/04/25/theme-editor/applied-theme.png b/content/posts/2024/04/25/theme-editor/applied-theme.png new file mode 100644 index 0000000..f4d15c5 Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/applied-theme.png differ diff --git a/content/posts/2024/04/25/theme-editor/editor.png b/content/posts/2024/04/25/theme-editor/editor.png new file mode 100644 index 0000000..4feb333 Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/editor.png differ diff --git a/content/posts/2024/04/25/theme-editor/greentheme.png b/content/posts/2024/04/25/theme-editor/greentheme.png new file mode 100644 index 0000000..9a64f8e Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/greentheme.png differ diff --git a/content/posts/2024/04/25/theme-editor/index.md b/content/posts/2024/04/25/theme-editor/index.md new file mode 100644 index 0000000..cc0abf2 --- /dev/null +++ b/content/posts/2024/04/25/theme-editor/index.md @@ -0,0 +1,55 @@ ++++ +title = 'The new theme editor' +date = 2024-04-25T15:03:59+01:00 +authors = ['orta'] +tags = ["changelog"] +theme = "puzzmo-light" ++++ + +Puzzmo has a pretty comprehensive theming system, we've used it to ship 8 different themes before we launched! + +![Some of our default themes](themes.png) + +Then we built a system which lets our partners have a custom theme based on their own site's color themes: + +![alt text](partner-themes.png) + +Now we're bringing the ability to customize your theme to all Puzzmo Plus users! Here's one I whipped up just now, using the excellent video game [Hollow Knight](https://www.hollowknight.com)'s [Greenpath area](https://www.ign.com/wikis/hollow-knight/Into_Greenpath) as inspiration: + +![Greenpath theme](greentheme.png) + +We took inspiration from how Slack handles theming, and use a sharable bit of text to pass the theme between people, so here is the theme for the above screenshot: + +``` +Greenpath/1/#704c73/#ffffff/#563359/#8c668f/#c0a3c2/#348782/#000000/#ed4d1c/#ff8764/#000000/#b4813c/#3cb445/#3c6eb4/#000000/#FF3C3C/#1d3c41/#82b8af/#2d7351/#236f78/#3d3846/#1B1B28/#FFFFFF/#000000/#2a725c/#1B1D29/#349272/#31856b/#629994/#eac44f/#000000/#4c836e/#437260/#3572a5/#92b9b4 +``` + +Let's learn how to use the new theming system. + +### How to set a custom theme + +The theme settings live in your "Account Settings" screen, you can access via [this link](https://www.puzzmo.com/me) - or by tapping on your avatar in the top-right corner and choosing "Account Settings" in the dorp-down. + +If you are a Puzzmo Plus subscriber, you will see a new section "Use custom theme" which toggles between our default themes and the new custom theme support: + +![Showing the theme support](use-custom-theme.png) + +Toggling "Custom" on will bring up a new section, which you can paste in the new sharable theme: + +![Showing the custom theme support](using-custom-theme.png) + +Hitting "Update" should change your theme to the new one: + +![Applied themes](applied-theme.png) + +:tada: + +### Making your own theme + +On desktop, hitting the "Theme Editor" button will bring up a sidebar to Puzzmo. The sidebar can persist on all of the different pages, so you can look at all the weird edge-cases our theming system handles. + +![Sidebar](editor.png) + +If you have questions - there's a little guide at the bottom of the theme editor highlighting how certain games and pages are themed, if you have more questions than that. We're around in discord! + +Then, when completed you can take the "Share Text" and give that around to other folks to share your theme, we've opened up a channel in [the Puzzmo Discord](https://discord.gg/7ZSwDSUZbd) specifically for sharing themes! \ No newline at end of file diff --git a/content/posts/2024/04/25/theme-editor/partner-themes.png b/content/posts/2024/04/25/theme-editor/partner-themes.png new file mode 100644 index 0000000..2b5b543 Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/partner-themes.png differ diff --git a/content/posts/2024/04/25/theme-editor/themes.png b/content/posts/2024/04/25/theme-editor/themes.png new file mode 100644 index 0000000..c429c4f Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/themes.png differ diff --git a/content/posts/2024/04/25/theme-editor/use-custom-theme.png b/content/posts/2024/04/25/theme-editor/use-custom-theme.png new file mode 100644 index 0000000..041330e Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/use-custom-theme.png differ diff --git a/content/posts/2024/04/25/theme-editor/using-custom-theme.png b/content/posts/2024/04/25/theme-editor/using-custom-theme.png new file mode 100644 index 0000000..5233f66 Binary files /dev/null and b/content/posts/2024/04/25/theme-editor/using-custom-theme.png differ