# Copy Playground

The **Copy Playground** is a simple template example suitable for testing themes that you copy-paste from the **Themes Playground**. It is intended to be used as a quick and simple app that you can use for experimenting with themes you configured in the Themes Playground and want to test on a device build.

The source code for this template is available in the example sub folder, in folder [/example_copy_paste_from_playground](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example_copy_paste_from_playground).

You can, of course, test with a plain vanilla counter app too, or any app where you want to try a theme. You may, however, find the **Copy Playground** helpful. It includes presentation of all `ColorScheme` and `ThemeData` colors, as well as all commonly used Flutter Material UI widgets. This makes it easy to see and verify that the theme looks as intended with a large number of UI elements.

## Demonstration

The screen recording below demonstrates how to copy-paste a theme from the Themes Playground and try in the Copy Playground.

At the start the **Copy Playground** app is set to use the default Material-2 design guide theme created using `ThemeData.from` the Material-2 guide light and dark theme examples.

As we jump into the Themes Playground, we start with the same scheme selected in it just for illustration purposes.

We then turn ON FlexColorscheme and modify some settings, like border radius on ElevatedButton and BottomSheet. We add some surface blending and even use seed generated ColorScheme. We have opted to keep the main color of the selected built-in scheme **Pink Sakura**, that we select as our scheme for the generated `ColorScheme`.

When we are done configuring our scheme, we **COPY** the generated setup code, and **PASTE** it into the **Copy Playground** app into the `MaterialApp` widget, making sure to comment or delete any existing `theme` and `darkTheme` definitions.

If you are doing this in your own app, you will need to first add the `flex_color_scheme` package to your application and import it. In the **Copy Playground** template this is already done. Even the Google fonts package is imported, so we can easily also use the same **NotoSans** font that the **Themes Playground** app uses. This is done in this demo just to create and exact match of the result on the mobile device.

When we hot-reload the **Copy Playground** app, we can see how it changes to use the theme we just configured in the **Themes Playground**. It is almost magical. In the Playground, we can use the Widget Showcase to compare the colors and UI widget styles in the Themes Playground and in the Copy Playground. We can see and verify that they are the same.

<Image src="https://raw.githubusercontent.com/rydmike/flex_color_scheme_docs/master/docs/images/fcs-v5-copy-pg-01-demo-03.gif" caption="Demo of COPY-PASTE of a configured theme from Themes Playground to the Copy Playground." alt="Copy Paste Theme Demo" zoom />
