Change svg color base on scheme color

[saleh-aleid]

how i can change color based on primary color
like on. https://rydmike.com/flexcolorscheme/themesplayground-v7/#/
login simulation

[rydmike]

Hi @saleh-aleid, thanks for the question.

The answer is small little pieces of pixie dust, magic and SVG secrets... 😄

Haha, just kidding, the SVGs are just text strings, so the magic is that the Themes Playground app is actually "editing" and rewriting the SVG files, by replacing a color code string in the used SVG files, with the theme's colorScheme.primary color.

This happens as the theme changes too, even when the theme change lerp animates, the SVG string is even modified repeatedly with the theme lerped color value (happens automatically when you use a theme color and it chnages, themedata transition handles that lerp built-in), and the image is redrawn many times when the theme changes, so its color change fades with the theme's primary color as theme changes as well.

It is impressive how well it works, considering that the app rewrites the SVG string and then redraws the SVG with the new color as the theme change lerp animates.

The Undraw SVG images https://undraw.co/illustrations all share the same base color, so you can easily find and replace that color string in the SVG file and then just redraw it.

The code that does this is open source and included with FlexColorScheme, as is the entire Themes Playground.

Here is the svg custom colored widget:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/shared/widgets/universal/svg_asset_image.dart

Of course this implementation only works with the Undraw SVG files, but it can potentially be adapted to work with other SVG files too.

The demos also contains screens that have many images that randomly change, here is their code:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/shared/widgets/universal/svg_asset_image_switcher.dart

Here is how that SVG images is shown on the fake login page:

flex_color_scheme/example/lib/example5_themes_playground/widgets/panels/theme_simulator/app_example_login.dart

Line 100 in a22aeca

child: SvgAssetImage(

---

I'm going to move this issue to the repo "Discussions" where it can live on as a Q&A.