Allow for users to paste their old FlexThemeData into editor

[AlexanderLid]

Current Situation

The current FlexColorScheme Theme Playground editor doesn't allow pasting in existing theme configurations. This makes it challenging to iterate on themes or continue work from a previous session.

Feature Request

I'd like to suggest adding the ability to paste in a complete FlexThemeData configuration into the editor. This would allow users to:

1. Continue working on themes from previous sessions
2. Easily share and collaborate on theme configurations
3. Quickly modify existing themes without starting from scratch.

Being able to paste this into the editor would save time and allow for easier experimentation and refinement.

Real-World Scenario

Right now, I've started with a "good enough" theme that I want to keep building on as my app matures. However, now 3 months later i want to make adjustments or improvements, I have to start from scratch in the editor. This is time-consuming and makes it difficult to incrementally improve the theme over time through the editor.

What do you think about this suggestion? Would it be feasible to implement?
I can't find the code for the playground so i can't really make a stab at it myself.

[rydmike]

Hi @AlexanderLid, thanks and yes this is a very highly requested feature and definitely on the roadmap.

It is however not as trivial as it should be, and the reasons are mentioned here:
https://docs.flexcolorscheme.com/playground_history#future-plans

That said, moving Themes Playground to its own repo and making it possible develop it without ties to releasing a new version of FlexColorScheme package will enable me to move faster on it.

I just released dev.1 of v8.0.0, I need to get it to stable release first.

After that I will probably split out Themes Playground to its own repo and start working on it as real app and make some major internal architecture changes to it first. Which as a starting point will include save/load from JSON file. Backend and team versions after that.

Related issue: #141

[akiller]

Hi @rydmike ,

From the discussion in #236 I decided I was up for a challenge so I've taken a look at how hard this would be over the past couple of nights.

The library is huge (in a good way!) and having to write a bunch of code to parse and import all the possible theme settings felt painful and hard to maintain. And Dart's lack of reflection makes automating things not too easy 🙁.

So I wondered what the path of least resistance might be and figured if the database could be exported to JSON and then imported back most of the existing library code wouldn't need touching, and because you're already using a key/value pair database this shouldn't be too hard.

To set expectations I've really looked at the codebase before and this is somewhat of a proof-of-concept idea, and I've only added an implementation for the Hive database version.

I've had to add a basic JSON adapter to deal with non-serialisable things (e.g., colours and Enums). I will have definitely not added all the possible types the theme uses but when clicking around the playground and exporting the JSON it mostly seems to cope with it.

This implementation would require users save the exported JSON additionally (I guess in their README.md or as a big comment block somewhere). But it's better than nothing. I've just added the export logic to the theme code screen for now.

Example of importing a theme, manually editing the JSON, and importing again:

import_and_edit_json.mp4

Example of exporting a theme from the desktop app, importing into Chrome, editing, it, exporting from Chrome, and importing back to the desktop app:

export_and_import_desktop_chrome.mp4

My code changes are here if you want to try it out. There really isn't too many changes:

https://github.com/akiller/flex_color_scheme/tree/playground-theme-export

If this is something you're interested in and want a pull request with the changes let me know.

Thanks!

[rydmike]

Awesome, love it! Commented in the issue #236 (comment)

[rydmike]

In case you have not followed the development of this topic via the link. This feature is available in version 8.0.0-dev.2 that exists both as a beta package https://pub.dev/packages/flex_color_scheme/versions/8.0.0-dev.2 and beta build of the V8 Playground here: https://rydmike.com/flexcolorscheme/themesplayground-dev/ also mentioned in what's new section of the docs https://docs.flexcolorscheme.com/whats_new

I made some short video demos here: https://x.com/RydMike/status/1850651938297159833

Version 8.0.0 stable release is not far away. Finally go all past existing 2243 tests to apps, but coverage is down from 100% to 96% with all the new features. So I will be adding some test to cover most of the new features as well, maybe all, let's see. I can always improve the test coverage as well. I would also like to try a WASM build of the Playground, but let's see how that goes and if I can get some new hosting and CI/CD to deploy to it.

[rydmike]

And now it is released as 8.0.0 stable

• https://github.com/rydmike/flex_color_scheme
• https://rydmike.com/flexcolorscheme/themesplayground-latest/
• https://docs.flexcolorscheme.com/whats_new