{"id":13491099,"url":"https://github.com/rydmike/flex_color_scheme","last_synced_at":"2025-05-14T08:08:53.234Z","repository":{"id":38424084,"uuid":"321942796","full_name":"rydmike/flex_color_scheme","owner":"rydmike","description":"A Flutter package to make and use beautiful color scheme based themes.","archived":false,"fork":false,"pushed_at":"2025-04-01T19:21:27.000Z","size":17507,"stargazers_count":1100,"open_issues_count":8,"forks_count":117,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-12T07:02:19.190Z","etag":null,"topics":["color-scheme","color-surface-branding","colorscheme","dark-themes","dart","flex-family","flex-package","flutter","flutter-package","flutter-theme","flutter-ui","flutter-widget","material-design","material3","package","theme","theme-colors","theme-mode"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rydmike.png","metadata":{"files":{"readme":"README-V3.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["rydmike"]}},"created_at":"2020-12-16T10:11:15.000Z","updated_at":"2025-05-11T17:01:51.000Z","dependencies_parsed_at":"2023-12-12T20:07:24.103Z","dependency_job_id":"58118602-0ab1-4b9c-827c-71ee3ac7cd99","html_url":"https://github.com/rydmike/flex_color_scheme","commit_stats":{"total_commits":1667,"total_committers":9,"mean_commits":"185.22222222222223","dds":0.4931013797240552,"last_synced_commit":"be91c990c9b99afadd56a65b00b02412a00fe13a"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rydmike%2Fflex_color_scheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rydmike%2Fflex_color_scheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rydmike%2Fflex_color_scheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rydmike%2Fflex_color_scheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rydmike","download_url":"https://codeload.github.com/rydmike/flex_color_scheme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-scheme","color-surface-branding","colorscheme","dark-themes","dart","flex-family","flex-package","flutter","flutter-package","flutter-theme","flutter-ui","flutter-widget","material-design","material3","package","theme","theme-colors","theme-mode"],"created_at":"2024-07-31T19:00:53.521Z","updated_at":"2025-05-14T08:08:48.157Z","avatar_url":"https://github.com/rydmike.png","language":"Dart","funding_links":["https://github.com/sponsors/rydmike"],"categories":["Dart"],"sub_categories":[],"readme":"[![Pub Version](https://img.shields.io/pub/v/flex_color_scheme?label=flex_color_scheme\u0026labelColor=333940\u0026logo=dart)](https://pub.dev/packages/flex_color_scheme) ![GitHub Workflow Status (event)](https://img.shields.io/github/workflow/status/rydmike/flex_color_scheme/Test?event=push)\n![Test](https://github.com/rydmike/flex_color_scheme/workflows/Test/badge.svg) [![codecov](https://codecov.io/gh/rydmike/flex_color_scheme/branch/master/graph/badge.svg?token=4XJU30IGO3)](https://codecov.io/gh/rydmike/flex_color_scheme) [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)\n\n# FlexColorScheme\n\nUse **FlexColorScheme** to make beautiful color scheme based Flutter themes, with optional color \nbranded surfaces. The created themes are based on the same concept as Flutter's ColorScheme based \nthemes, with many additional features.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/CollageSize50.png?raw=true\" alt=\"ColorScheme Intro\"/\u003e\n\n# Contents\n- [FlexColorScheme](#flexcolorscheme)\n - [Contents](#contents)\n - [Introduction](#introduction)\n - [Color Branded Backgrounds and Surfaces](#color-branded-backgrounds-and-surfaces)\n - [Nuanced Scheme Set from One Color](#nuanced-scheme-set-from-one-color)\n - [What About My Own Theme Additions?](#what-about-my-own-theme-additions)\n - [Built-in Color Schemes](#built-in-color-schemes)\n - [This ColorScheme Should be Different](#this-colorscheme-should-be-different)\n - [If I don't Use the Predefined Schemes, Why Should I Use FlexColorScheme?](#if-i-dont-use-the-predefined-schemes-why-should-i-use-flexcolorscheme)\n - [Design Your Custom Schemes for FlexColorScheme](#design-your-custom-schemes-for-flexcolorscheme)\n - [Can We Change this Predefined Scheme's Colors?](#can-we-change-this-predefined-schemes-colors)\n - [Can We Add This Scheme?](#can-we-add-this-scheme)\n - [Installing and Using](#installing-and-using)\n - [Default Sample Application](#default-sample-application)\n - [Live WEB Demos of the Examples](#live-web-demos-of-the-examples)\n - [Tutorial](#tutorial)\n - [Used HomePage in the Examples](#used-homepage-in-the-examples)\n - [Optional FlexThemeModeSwitch](#optional-flexthememodeswitch)\n - [Example 1 - Use a Predefined Color Scheme](#example-1---use-a-predefined-color-scheme)\n - [Building and running example 1](#building-and-running-example-1)\n - [Example 2 - Create a Custom Color Scheme](#example-2---create-a-custom-color-scheme)\n - [Example 3 - Switch Between Different Color Schemes](#example-3---switch-between-different-color-schemes)\n - [Example 4 - Switch Between Built-in Color Schemes and Custom Ones](#example-4---switch-between-built-in-color-schemes-and-custom-ones)\n - [Example 5 - Full Featured Demo](#example-5---full-featured-demo)\n - [Local State and Setup](#example-5---local-state-and-setup)\n - [FlexColorScheme Properties and toTheme](#example-5---the-flexcolorscheme-properties-and-totheme) \n - [FlexColorScheme Properties and toScheme](#example-5---the-flexcolorscheme-properties-and-toscheme) \n - [Equivalent Setup for the Dark Theme, but with More Options](#example-5---equivalent-setup-for-the-dark-theme-but-with-more-options) \n - [Passing All the Values Back and Forth to the HomePage](#example-5---passing-all-the-values-back-and-forth-to-the-homepage)\n - [Themed System Navigation Bar in Android](#example-5---themed-system-navigation-bar-in-android)\n - [Building the Example](#example-5---building-the-example)\n - [Computed Dark Theme](#example-5---computed-dark-theme)\n - [Computed Dark Theme with Level Adjustment](#example-5---computed-dark-theme-with-level-adjustment)\n - [Branded Surfaces and App Bar Options](#example-5---branded-surfaces-and-app-bar-options)\n - [The TabBar Style](#example-5---the-tabbar-style)\n - [True Black](#example-5---true-black)\n - [Android Transparent System Navigation Bar](#android-transparent-system-navigation-bar)\n - [Behind the Scenes](#behind-the-scenes)\n - [None Null Sub-Themes](#none-null-sub-themes)\n - [ThemeData Default Modifications](#themedata-default-modifications)\n - [Appendix A - Built-in Scheme Reference](#appendix-a---built-in-scheme-reference)\n \n## Introduction\n\nGenerally when you design Flutter applications you should base the colors of your application on a light theme mode\n`ColorScheme` and a dark theme mode `ColorScheme`. Then make your light and dark ThemeData from these color schemes.\n\nIn your `MaterialApp` you then use these color schemes for the light and dark themes. This gives you an \napplication that uses the defined color scheme on the built-in Material UI Widgets, well on most of them anyway.\nFlutter's `ThemeData.from` a `ColorScheme` has a few gaps, the used color scheme is not consistently applied \nto **all** standard Material UI Widgets.\n\nFlexColorScheme corrects these minor inconsistencies and gaps that exist in the current version of Flutter's\n`ThemeData.from` factory. It also makes a few opinionated, but subtle theme modifications compared to the\n`ThemeData.from` themes created from a `ColorScheme`. These topics are covered in detail in the\n[last chapter](#behind-the-scenes) and in the blog article you can find a\n[visual presentation](https://rydmike.com/colorscheme#the-difference) of the differences.\n\nFlexColorScheme also does some other nice theme design tricks. If you have seen the Flutter\n[**Flexfold web demo**](https://rydmike.com/demoflexfold) application, then you\nhave seen **FlexColorScheme** in action. The Flexfold demo app uses this package for its fancy theming and to\nenable effortless switching between all the themes it uses. The included examples in this package, show you how \nthe Flexfold demo app theming is done. The [tutorial chapter](#tutorial) walks through and explains\neach example in detail.\n\nFor some additional information about **FlexColorScheme** and its background see this \n[**blog**](https://rydmike.com/colorscheme).\n\n## Installing and Using\n\nIn the `pubspec.yaml` of your **Flutter** project, add the following dependency:\n\n```yaml\ndependencies:\n flex_color_scheme: ^3.0.1\n```\n\nIn your library file add the following import:\n\n```dart\nimport 'package:flex_color_scheme/flex_color_scheme.dart';\n```\n\nYou can now start using `FlexColorScheme` based themes in your application. The easiest way to do so is to use one\nof the 32 built-in color schemes. The schemes have enums that you can use to refer to them. Their corresponding\ndata object holds name, description and separate scheme data for each schemes' light and dark mode.\n\nAs a simple use case, take the **default Flutter counter app**, do the above installation and select one of the\nbuilt-in FlexColorScheme's schemes to use with it.\n\nIn this example we use **\"Oh Mandy red\"** scheme that is represented by enum value `FlexScheme.mandyRed`.\n\nWe set `MaterialApp.themeMode` to `ThemeMode.system`, so that the device can control if the app\nuses its light or dark theme mode, based on the device theme mode system setting.\n\nTotally just one property modified, and two properties added to the default counter app, plus the package\nimport of course. The modified `MaterialApp` from the Flutter default counter app is shown below.\n\n```dart\n class MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Flutter Demo',\n // The Mandy red, light theme.\n theme: FlexColorScheme.light(scheme: FlexScheme.mandyRed).toTheme,\n // The Mandy red, dark theme.\n darkTheme: FlexColorScheme.dark(scheme: FlexScheme.mandyRed).toTheme,\n // Use dark or light theme based on system setting.\n themeMode: ThemeMode.system,\n home: MyHomePage(title: 'Flutter Demo Home Page'),\n );\n```\n\nThe above additions gives us the following counter app look:\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_counter_app.png?raw=true\" alt=\"counter sample\"/\u003e\n\nPerhaps not so exciting, that is because the basic counter app uses very few features and widgets, so it cannot really\nillustrate the result very well. This is why the included examples contain demo UI, that is not really at all relevant\nto using FlexColorScheme and is really only there to better demonstrate the results.\n\n\n\n\n### Color Branded Backgrounds and Surfaces\n\nThe Material Guide briefly mentions\n[color branded surfaces](https://material.io/design/color/dark-theme.html#properties). \nIn the next version of Material Design called **MaterialYou**, color branded surfaces are \nused extensively.\nWith **FlexColorScheme** you can easily create such primary color branded themes. \nThis is done by using the four built-in strengths for blending in\nprimary color into surface and background colors. Color branding of the scaffold background color,\nis only done very slightly at the highest strength. \nIt is quite interesting what a bit of extra flair and purposefully designed feeling it\ncan result in when used appropriately.\n\n### Nuanced Scheme Set from One Color\n\nA `FlexColorScheme` can like Flutter's standard `ColorScheme` be created by specifying all the required\nscheme colors. However, with `FlexColorScheme` you can also specify only the primary color, and \nget all other colors needed for a complete color scheme computed based the given primary color.\n\nThere is a helper class, with a factory called `FlexSchemeColor.from` that can do this for you. The \n`toDark` method on `FlexSchemeColor` can create a computed matching dark scheme from a defined light scheme.\nThis works regardless of if you created a fully specified custom light scheme, or one from just a single color.\nThese features are presented and explained in tutorial\n[example 4](#example-4---switch-between-built-in-color-schemes-and-custom-ones) and\n[example 5](#example-5---full-featured-demo).\n\nThese features are useful when you quickly want to test a single color, or maybe a single\nprimary and secondary color for a light theme, and get all other scheme colors computed.\n\n### What About My Own Theme Additions?\n\nFlexColorScheme does not get in the way of adding your own additional custom theming to your application.\nWhen you have defined your `FlexColorScheme`, you make a theme based on its color scheme with `FlexColorScheme.toTheme`,\nthat returns a `ThemeData` object that you can use like any other `ThemeData` object. You can then \noverride this returned `ThemeData` and add additional custom sub-theming to it with the normal\nThemeData `copyWith` method, before passing it on to your application's `theme` or `darkTheme` property.\n\n### Built-in Color Schemes\n\nColor schemes are no fun without some built-in example schemes to use and play with.\n**FlexColorScheme** comes with **36** ready to go matching light and dark color schemes, that you can \nuse in your applications if you like. Here is a composite image showing them all.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_all_schemes_32_at_100.png?raw=true\" alt=\"ColorScheme all\"/\u003e\n\nThe above image is an overview of all the color schemes. In the package companion blog post you can\nfind [**high resolution images**](https://rydmike.com/colorscheme#built-in-color-schemes) of each one of them.\n\nAnother convenient and recommended way to see and try all the predefined color schemes is by using the live Web\nversions of the package [example 4](https://rydmike.com/flexcolorscheme4) or \n[example 5](https://rydmike.com/flexcolorscheme4). Using the examples you can try all the built-in color schemes \nand see the impact they have on often used Flutter widgets. \n\nIn [**Appendix A**](#appendix-a---built-in-scheme-reference) you\ncan find a table listing all the built-in color schemes, their `FlexScheme` enum value, name and description, plus \nthumbnail of each color scheme, with a link to its high-resolution images.\n\nThe built-in color schemes are all tuned matching light and dark scheme pairs. Most of them are pretty conservative,\nbut some are intentionally a bit more playful and bold. The first two color schemes are actually\nthe Flutter and Material Design Guide examples of light and dark color schemes, and the Flutter high contrast light and\ndark color versions as well. So OK, there are actually \"only\" 30 new ready-made light and dark color scheme pairs.\n\n#### This ColorScheme Should be Different!\n\nThe built-in schemes in no way claim to be a \"this selection\" fits all needs collection, nor do they claim to be \nmore correct than any other color scheme. What fits your needs and looks good to you, is of course the right choice\nfor your application and use case. You can make your own custom scheme totally from scratch, or use these as \na starting point. Copy colors from existing schemes or change colors that do not fit your design requirements.\n\n#### Design Your Custom Schemes for FlexColorScheme\n\nThe package examples show how you can easily make and use your own custom schemes with FlexColorScheme. Maybe \nthe built-in examples will inspire your creative side to define your own schemes. The tutorial walks you through how\nto define your own color schemes and make themes based on them too.\n\nYou can even create your own custom list or map of schemes and use all of them, instead of the built-in ones. \nThe built-in schemes implementation can then function as one possible implementation guide on how to do this.\n\nWhile building, testing and using this package over a period of time, a number of color schemes were born as a \nside product. I decided to include them in FlexColorscheme and offer them for re-use and inspiration as they are. \nIt is however not necessary to use them to get the benefits of FlexColorScheme.\n\nThe color and scheme definitions for the built-in color schemes are in their own classes. They will not be included \nin the release compiled version of your application if you do not use (reference) them in your application, and instead \nonly use your own custom scheme colors.\n\n#### If I don't Use the Predefined Schemes, Why Should I Use FlexColorScheme?\n\nThe purposes with the FlexColorScheme package is to: \n* Enable easy switching among multiple color schemes in an app. \n* Address some gaps in Flutter's default color scheme based themes.\n* Provide an easy way to make themes with primary color branded backgrounds and surfaces, \n and to easily vary this branding strength. \n* Provide an easy toggle for different app bar styles, without the need to manually make a custom theme \n for it every time. \n* Provide optional support for a **true black** mode for dark themes.\n* Be able to quickly swap the primary and secondary color definitions, if you want to try your\n theme the other way around.\n\nAdditionally, FlexColorScheme introduces a way to make \"lazy\" quick toned `ColorScheme` like themes from just a single\nlight scheme color. Even its dark scheme counterpart can be made from this single color definition. To understand how\nthis can be done, it is recommended to go through the tutorial in this readme file.\n\nIf you like and need the above features, then FlexColorScheme may fit your theming requirements even if you do not\nuse any of its built-in color schemes. There is no need to use any of the built-in color schemes to \nbenefit from FlexColorScheme's capabilities.\n\n#### Can We Change this Predefined Scheme's Colors?\n\nNo, current predefined schemes will not be changed. Changing them would be a breaking change to the package\nversion promise. Sure, the scheme colors could in theory be changed by releasing a new major version \nthat break past scheme color definitions. \n\nAt the moment, there are no plans to ever add breaking releases to just change a predefined \nscheme's color(s). All current color definition values are also included in the package tests, and\na failed color value test is considered a breaking change.\n\n#### Can We Add This Scheme?\n\nTo keep things interesting, I do plan to from time to time add new color schemes to the built-in ones.\n\nInspired by **MaterialYou**, I recently hooked up FlexColorScheme with an algorithm that extracts\nprominent colors from images. Then fed these colors to FlexColorScheme to make themes from them.\nThe new color schemes in release 3.0.0 came from these image based theme experiments.\nYou can see examples of FlexColorScheme making color schemes and themes from \nimages in my Tweets about it. This was a first [quick test](https://twitter.com/RydMike/status/1399139552200114179?s=20)\nof the idea, later I added some more features to it, [here](https://twitter.com/RydMike/status/1399301081939820545?s=20) and [here](https://twitter.com/RydMike/status/1399933068614504451?s=20). This\nexperiment shows that **FlexColorScheme** is very versatile.\n\nIf you have a beautiful color scheme with matching light and dark theme mode colors, that you think \nshould be included in the built-in schemes, please post a \nsuggestion as a GitHub issue. No promise is made about its eventual inclusion, but if I also \nthink it is a nice, unique and overall a pretty color scheme, it will very likely be included.\nComing up with nice color schemes is trickier than it seems, so contributions to new ones will \ncertainly be considered.\n\n\n\n#### Can I use different built-in color schemes for my light and dark themes?\n\nYes this is possible, just use different `FlexScheme` enum values for the light and dark FlexColorScheme factories\n`scheme` property. If the colors used by the selected schemes are a bit related, this\ncan be used to create nice and unique light and dark combinations of the predefined schemes.\n\nBy using the `colors` property you could even apply a `FlexSchemeColor` that has data that was designed for a light \ntheme to the `FlexColorScheme.dark` factory and wise versa. For example, with the \n`FlexColorScheme.dark` factory, you could to its `colors` property assign the `FlexSchemeColors` from \n`FlexColor.schemes[FlexScheme.mandyRed].light` that are designed and intended to be used with the light mode factory.\nThe results will typically just not be as useful or pretty.\nThe rationale for the slightly involved structure, is to keep it flexible, but at the same time provide self\ndocumenting API guidance on how the data was designed to be used and consumed. \n\nThe new `scheme` property \nprevents using the light scheme colors for the dark factory and wise versa. It can however still be done if so desired\nwith the `colors` property as shown above. The `colors` property is always needed and used when you make \ncustom color schemes with the `FlexColorScheme.light` and `FlexColorScheme.dark` factories.\n\n### Default Sample Application\n\nThe package contains five different example applications with increasing complexity.\n\n**Example 1**, is just a repeat of the above example, but with a `themeMode` 3-way toggle\nswitch, an effective theme colors presentation widget, plus a bunch of dummy commonly \nused Material UI widgets.\n\nTo try the simplest and default **example 1** on a device or simulator,\nclone the [repository](https://github.com/rydmike/flex_color_scheme) and run the example:\n\n```bash\ncd example/\nflutter run --release\n```\n\nThe result is a sample app that uses the built-in \"Oh Mandy red\" color scheme as its theme. Has a\nlight/dark/system theme mode switch, includes a theme colors presentation widget and Material UI widget samples.\nWith them, you can see the active theme's colors, and the created theme's impact on common Material UI widgets.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1al.png?raw=true\" alt=\"ColorScheme example 1 light\" width=\"180\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1bl.png?raw=true\" alt=\"ColorScheme example 1 lightb\" width=\"180\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1cl.png?raw=true\" alt=\"ColorScheme example 1 dark\" width=\"180\"/\u003e\n\nExample app 1, shows the simplest use-case of FlexColorScheme and barely scratches the \nsurface of what it can do. To get the full details in a step by step progression, go through the tutorial. \nIt uses examples 1 through 5 to introduce more features with increased complexity.\n\n\u003e **Building the examples**\n\u003e \n\u003eIf you cloned the repository to build the examples, you can open the package `/example` folder with your IDE to build\n\u003ethe above default example. This example is the same as the example in the `/example/lib/example1` folder.\n\u003e \n\u003eIf you want to build the other examples, without setting up different configurations in your IDE for the different\n\u003emain files. Copy and paste the wanted example's `main.dart` code, into the `/example/lib/main.dart` file to\n\u003ebuild it from your IDE. After copying the new main example content, change the relative\n\u003eimport for the \"all shared imports\" file to: \n\u003e`import 'all_shared_imports.dart';` \n\u003eFor examples 4 and 5, also the \"sub_page\" import to: \n\u003e`import 'shared/sub_page.dart';`\n\n### Live WEB Demos of the Examples\n\nIf you want to take a quick look at all the examples, you can try live web versions of them.\n\n[**Example 1**](https://rydmike.com/flexcolorscheme1) represents the simplest use case, to just use one of the\nbuilt-in color schemes as your application theme. You can toggle between its light\nand dark variant, or allow device system theme mode setting to control if the dark or light theme is used.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1al.png?raw=true\" alt=\"ColorScheme example 1 light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1ad.png?raw=true\" alt=\"ColorScheme example 1 dark\" width=\"120\"/\u003e\n\n[**Example 2**](https://rydmike.com/flexcolorscheme2) is like example 1, but here we use custom colors\nto make a custom color scheme and turn it into a theme.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2al.png?raw=true\" alt=\"ColorScheme example 2 light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2ad.png?raw=true\" alt=\"ColorScheme example 2 dark\" width=\"120\"/\u003e\n\n[**In example 3**](https://rydmike.com/flexcolorscheme3) we can toggle the active theme between 3 different\npredefined color schemes, plus the custom one we made in example 2.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3al.png?raw=true\" alt=\"ColorScheme example 3a light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3ad.png?raw=true\" alt=\"ColorScheme example 3a dark\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3bl.png?raw=true\" alt=\"ColorScheme example 3b light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3bd.png?raw=true\" alt=\"ColorScheme example 3b dark\" width=\"120\"/\u003e\n\n[**In example 4**](https://rydmike.com/flexcolorscheme4) we can select any of the different built-in color schemes,\nplus three custom ones, and use them as the application theme.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4al.png?raw=true\" alt=\"ColorScheme example 4a light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4bl.png?raw=true\" alt=\"ColorScheme example 4b light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4cl.png?raw=true\" alt=\"ColorScheme example 4c light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4cd.png?raw=true\" alt=\"ColorScheme example 4c dark\" width=\"120\"/\u003e\n\n[**Example 5**](https://rydmike.com/flexcolorscheme5) is the last, and most complex of the examples and presents\nmore configuration options, that you can also modify interactively. \nThis example is best seen and tested on a tablet, desktop or desktop web browser, rather than on a phone, but it\ncertainly works on a phone sized canvas too. This example is explained in more detail further below.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5al.png?raw=true\" alt=\"ColorScheme example 5 light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5bl.png?raw=true\" alt=\"ColorScheme example 5b light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5fl.png?raw=true\" alt=\"ColorScheme example 5f light\" width=\"120\"/\u003e\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5gl.png?raw=true\" alt=\"ColorScheme example 5g light\" width=\"120\"/\u003e\n\n[**Flexfold demo**](https://rydmike.com/demoflexfold)\n\nA fancier example of **FlexColorScheme** usage can be seen in the [**Flexfold demo app**](https://rydmike.com/demoflexfold).\n\n\u003cimg src=\"https://rydmike.com/assets/FoldTheme1.gif?raw=true\" alt=\"FlexFold Demo\" width=\"800\"/\u003e\n\nIt might look and feel complicated, but it is actually only slightly more involved than above example nr 5, that\nhas almost all the same theming features as the Flexfold demo app.\n\nGo through all the examples in the tutorial below, and you will be ready to make cool interactively \ncustom themed apps like this in no time.\n\n## Tutorial\n\nIn this tutorial we go through all the bundled examples and explain the used `FlexColorScheme` features in each example.\nFor simplicity the example applications do not use any state management solution. The key part for each\nexample is always in the used stateful `MaterialApp`, where all the scheme setup for the themes are made. The rest of\nthe content in the examples is just there to make a visual presentation of the resulting theme from the used\ncolor scheme.\n\n### Used HomePage in the Examples\n\nThe content of the `HomePage` in all these examples is not relevant for using `FlexColorScheme` based\napplication theming. The critical parts are in the example `MaterialApp` theme definitions. The `HomePage` just\ncontains UI to visually show what the resulting themes look like, when used in an application with frequently \nused Flutter Widgets.\n\nIn **example 5** we can also make interactive changes to many `FlexColorScheme` API values, to\nsee and learn how they work in practice.\n\nIn all the examples we pass in the `FlexSchemeData` object we used for the active theme to the application's `HomePage`.\nThis is not needed in order to use `FlexColorScheme` based themes. It is done to be able to show\nthe active color scheme's name and description in the examples. It also provides the right color data for \nthe 3-way theme mode switch `FlexThemeModeSwitch`. The switch uses the light and dark scheme colors in its theme \nmode option buttons. This way the theme mode option buttons always show the 4 main colors in \nthe active light and dark color scheme used by the active theme.\n\n### Optional FlexThemeModeSwitch\n\nOne unique feature on the `HomePage` of all the examples is the `FlexThemeModeSwitch`. It is the UI Widget used\nfor the 3-way theme mode switch used in all the examples to change the active theme mode.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/theme_mode_switch.png?raw=true\" alt=\"theme mode switch\" width=\"350\"/\u003e\n\nUsing the switch is very simple, give it the currently selected and active theme mode, the current `FlexSchemeData`\nscheme, so it can color its buttons correctly. Then use the `onThemeModeChanged` callback for changes to its mode,\nand change the `themeMode` property in the `MaterialApp` accordingly, to actually change the used theme mode.\n\n```dart\nFlexThemeModeSwitch(\n themeMode: themeMode,\n onThemeModeChanged: onThemeModeChanged,\n flexSchemeData: flexSchemeData,\n),\n```\n\nUsing the `FlexThemeModeSwitch` 3-way theme mode switch is optional and not required to\nuse `FlexColorScheme` based themes. It is just a custom theme mode switch design and was included\nas a bonus feature in the `FlexColorScheme` package. It was added based on a request after it\nhad been observed in the wild in the Flexfold demo app.\n\nIn the Flexfold demo app the switch was originally a fairly fixed design. This `FlexThemeModeSwitch` has many\nproperties that allow you to customize it extensively. You can find its [API\nreference here](https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexThemeModeSwitch-class.html)\nand its companion, the `FlexThemeModeOptionButton`\n[API reference here](https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexThemeModeOptionButton-class.html).\nWith the API you can customize the look of the `FlexThemeModeSwitch`, here are some examples:\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/ThemeSwitchCustomize.png?raw=true\" alt=\"theme mode customize\"/\u003e\n\nThe `FlexThemeModeOptionButton` is typically used by the `FlexThemeModeSwitch`, but it can also be used as a part\nof other theme related indicator widgets. Like for example the scrolling horizontal list used in the Flexfold demo app,\nwhere it is used as a theme indicator in a list. This is used as a way to show all available themes and select \nthe active theme, it is as an alternative to the rather plain popup menu.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/ThemeIndicatorList.png?raw=true\" alt=\"theme indicator list\"/\u003e\n\n## Example 1 - Use a Predefined Color Scheme\n\nThe first and simplest example shows how you can use a predefined color scheme in `FlexColorScheme` to\ndefine light and dark themes using the scheme, and then switch between the light and dark mode. A theme showcase\nwidget shows the theme's effect on several common Material widgets.\n\nThis example is basically a repeat of the Flutter default counter app modification earlier, but with a different\n`HomePage` and a way to change the `MaterialApp` active `themeMode` property value with the `FlexThemeModeSwitch`\nswitch on the `HomePage`. This done in the example by using simple value changed callback function.\n\n ```dart\nvoid main() =\u003e runApp(const DemoApp());\n\nclass DemoApp extends StatefulWidget {\n const DemoApp({Key key}) : super(key: key);\n @override\n _DemoAppState createState() =\u003e _DemoAppState();\n}\n\nclass _DemoAppState extends State\u003cDemoApp\u003e {\n // Used to select if we use the dark or light theme.\n ThemeMode themeMode = ThemeMode.light;\n\n @override\n Widget build(BuildContext context) {\n // Define which predefined FlexScheme to use.\n // Go ahead and try some other ones too.\n const FlexScheme usedFlexScheme = FlexScheme.mandyRed;\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'FlexColorScheme',\n // A light scheme, passed to FlexColorScheme.light factory, then use\n // toTheme to return the resulting theme to the MaterialApp theme.\n theme: FlexColorScheme.light(\n scheme: usedFlexScheme,\n // Use comfortable on desktops instead of compact, devices use default.\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // Same thing for the dark theme, but using FlexColorScheme.dark factory.\n darkTheme: FlexColorScheme.dark(\n scheme: usedFlexScheme,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // Use the above dark or light theme, based on active themeMode\n // value light/dark/system.\n themeMode: themeMode,\n // The HomePage, with its properties. In this example we pass it the\n // current themeMode, change it via its call-back. We also pass the\n // currently used FlexSchemeData to the HomePage so we can use it to \n // display some info about it, and use the colors on the theme switch.\n home: HomePage(\n themeMode: themeMode,\n onThemeModeChanged: (ThemeMode mode) {\n setState(() { themeMode = mode; });\n },\n // Pass in the used active FlexSchemeData so we can\n // use its properties on the HomePage.\n flexSchemeData: FlexColor.schemes[usedFlexScheme],\n ),\n );\n }\n}\n\n```\n\n\u003e **One minor addition - visualDensity** \n\u003e \n\u003e All examples in this package use **comfortable** adaptive platform visual density via\n\u003e `FlexColorScheme.comfortablePlatformDensity`, instead of the **default** counter application's\n\u003e `VisualDensity.adaptivePlatformDensity`.\n\u003e\n\u003e This is an alternative visual density design that on desktop applications results in the Flutter\n\u003e `comfortable` visual density being used, instead of `compact`. On devices, they both result in the default large\n\u003e `standard` visual density that is suitable for small touch devices. \n\u003e \n\u003e This helper function was added to\n\u003e provide an easy option for using a bit larger UI elements on desktop and web apps, \n\u003e while keeping the correct size for devices.\n\u003e\n\u003e If the desktop and web versions of the app is used on computers with touch screens, the `comfortable` density provides\n\u003e a nice balance. It still looks compact enough to be desktop like, while providing\n\u003e a bit more touch friendly space, without looking like an overblown small device UI on a desktop.\n\u003e\n\u003e FlexColorScheme can also use the `VisualDensity.adaptivePlatformDensity` value. If you prefer it,\n\u003e just replace the line with it. If you do not specify any visual density, the Flutter default density `standard`\n\u003e is used on **all platforms**. This creates widgets with a lot of white space around and inside them. It\n\u003e may not be what you want on web/desktop applications, but is the correct choice for small touch devices. The\n\u003e visual density feature in Flutter was created to address this difference in design requirement. \n\u003e \n\u003e The Flutter SDK built-in\n\u003e function `VisualDensity.adaptivePlatformDensity` was added to adapt the density according to used platform. The\n\u003e `FlexColorScheme.comfortablePlatformDensity` does the same, but with a bit more white space on desktops.\n\u003e Use the one you like and works best for your use case.\n\n### Building and running example 1\n\nWhen you build and run **example 1** you get a sample application that looks like this in light and dark mode:\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1al.png?raw=true\" alt=\"ColorScheme example 1 light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1ad.png?raw=true\" alt=\"ColorScheme example 1 dark\" width=\"250\"/\u003e\n\nTry example 1 live on the [**web here**](https://rydmike.com/flexcolorscheme1).\n\nIn the app, scroll down to see the theme showcase further below, it presents the theme with common Material widgets.\nThis simple first example is not using primary color surface branding. It is a normal theme with a few\nconvenient fixes for some theme design gaps in Flutter's own themes created with `ThemeData.from` a `ColorScheme`.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1bl.png?raw=true\" alt=\"ColorScheme example 1b light\" width=\"250\"/\u003e\u003c/nb\u003e\u003c/nb\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex1cl.png?raw=true\" alt=\"ColorScheme example 1c light\" width=\"250\"/\u003e\n\n## Example 2 - Create a Custom Color Scheme\n\nThis example shows how you can define your own `FlexSchemeData` and create `FlexColorScheme` based themes from it.\n\nThe full code is not shown in the tutorial, please see the code in the folder\n[flex_color_scheme/example/lib/example2](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example2/main.dart)\nfor the entire example.\n\nTo make a custom color scheme, we will for simplicity define it as a constant in this example.\nWe make a `FlexSchemeData` object with a name, description and scheme colors defined with\n`FlexSchemeColor` for the light and matching dark scheme. In this example we use dark purple and deep green\nand matching desaturated versions for the dark scheme.\n\nWe could also have stored the light and dark scheme in their own FlexSchemeColor objects, or even created them\ndirectly in their respective `colors` property in the light and dark factories. However, since we will also use this\ninformation on the HomePage for the theme switch widget and to display the scheme name and description. \nPutting them in a FlexSchemeData object that contains both the light and dark scheme, plus its name and description, is a\nconvenient way to pass along and re-use the information on the HomePage.\n\n```dart\nconst FlexSchemeData customFlexScheme = FlexSchemeData(\n name: 'Toledo purple',\n description: 'Purple theme created from custom defined colors.',\n light: FlexSchemeColor(\n primary: Color(0xFF4E0028),\n primaryVariant: Color(0xFF320019),\n secondary: Color(0xFF003419),\n secondaryVariant: Color(0xFF002411),\n ),\n dark: FlexSchemeColor(\n primary: Color(0xFF9E7389),\n primaryVariant: Color(0xFF775C69),\n secondary: Color(0xFF738F81),\n secondaryVariant: Color(0xFF5C7267),\n ),\n);\n```\n\u003e **NOTE:** \n\u003eThe above custom color scheme is fairly close to the built-in scheme\n\u003e **Barossa**. If you like it, you can probably use it instead. \n\nWe use the `FlexSchemeData` **customFlexScheme** instance `light` and `dark` properties as scheme `colors`\nfor the `FlexColorScheme.light` and `dark` factory for each theme mode and `toTheme` to get the themes they define.\n\nThis setup is totally equivalent to how we used one of the built-in predefined `FlexSchemeData` objects in example 1,\nin this case we just defined our own custom `FlexSchemeData` in `customFlexScheme`.\n\n```dart\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'FlexColorScheme',\n // The color scheme for the light theme, made toTheme\n theme: FlexColorScheme.light(\n colors: customFlexScheme.light,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // The color scheme for the dark theme, made toTheme\n darkTheme: FlexColorScheme.dark(\n colors: customFlexScheme.dark,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // Demo home page, same as in example 1\n home: HomePage(\n themeMode: themeMode,\n onThemeModeChanged: (ThemeMode mode) {\n setState(() { themeMode = mode; });\n },\n // We use our custom FlexSchemeData on the HomePage too.\n flexSchemeData: customFlexScheme,\n ),\n );\n }\n}\n```\nWhen you build and run **example 2** you get a sample application that looks like this in light and dark mode:\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2al.png?raw=true\" alt=\"ColorScheme example 2 light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2ad.png?raw=true\" alt=\"ColorScheme example 2 dark\" width=\"250\"/\u003e\n\nTry example 2 live on the [**web here**](https://rydmike.com/flexcolorscheme2).\n\nScroll down to see the theme showcase widgets further below, presenting the theme with some widgets. This example is\nnot using primary color surface branding, it is just a normal theme with a few convenient fixes for certain\ntheme properties.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2bl.png?raw=true\" alt=\"ColorScheme example 2b light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex2cl.png?raw=true\" alt=\"ColorScheme example 2c light\" width=\"250\"/\u003e\n\n## Example 3 - Switch Between Different Color Schemes\n\nThis example shows how you can use three built-in color schemes, add a custom scheme and then use all four as\nselectable `FlexColorScheme` based theme options in an application. The example also uses strong branded\nsurface colors. \n\nThe full example code is not shown here, please see the code in the folder\n[flex_color_scheme/example/lib/example3](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example3/main.dart)\nfor the entire example.\n\nThe **customFlexScheme** `FlexSchemeData` definition is the same as in example 2, it is not repeated below.\nIn the example below, if we select the `FlexScheme.custom` option, we use our **customFlexScheme** object, otherwise\nthe built-in scheme we select on the HomePage is used. We also set the surface style to\n`FlexSurface.strong`, for a strong primary color branded blend in surface and background colors.\n\n ```dart\n class _DemoAppState extends State\u003cDemoApp\u003e {\n ThemeMode themeMode = ThemeMode.light;\n // Used to store which FlexSchemeData option we selected\n FlexScheme flexScheme = FlexScheme.hippieBlue; // Default selected theme\n\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'FlexColorScheme',\n theme: FlexColorScheme.light(\n // When we select the custom FlexScheme on the home\n // page, we get the custom enum value back and use the custom\n // scheme we defined, otherwise we use the selected scheme\n // from the the built in map.\n colors: flexScheme == FlexScheme.custom\n ? customFlexScheme.light\n : FlexColor.schemesWithCustom[flexScheme].light,\n // This surface style gives a strong blend of primary\n // color on surfaces and background colors.\n surfaceStyle: FlexSurface.strong,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // Just a repeat with equivalent setup for the dark theme.\n darkTheme: FlexColorScheme.dark(\n colors: flexScheme == FlexScheme.custom\n ? customFlexScheme.dark\n : FlexColor.schemesWithCustom[flexScheme].dark,\n surfaceStyle: FlexSurface.strong,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n themeMode: themeMode,\n\n home: HomePage(\n themeMode: themeMode,\n onThemeModeChanged: (ThemeMode mode) {\n setState(() { themeMode = mode; });\n },\n // We pass the enum value of the active scheme to the HomePage.\n flexScheme: flexScheme,\n // Where we can select a new scheme and get its enum value back.\n onFlexSchemeChanged: (FlexScheme selectedScheme) {\n setState(() { flexScheme = selectedScheme; });\n },\n // We take care to pass in selected built-in scheme data\n // or the custom one we made if it is selected.\n flexSchemeData: flexScheme == FlexScheme.custom\n ? customFlexScheme\n : FlexColor.schemesWithCustom[flexScheme],\n ),\n );\n }\n }\n ```\n\nIn this example on the **HomePage** we removed the option to allow the theme mode to depend on the system theme mode\nsetting, by setting `showSystemMode` to `false`, thus removing this option from the switch.\n\n```dart\n FlexThemeModeSwitch(\n themeMode: themeMode,\n onThemeModeChanged: onThemeModeChanged,\n flexSchemeData: flexSchemeData,\n // We don't show the system mode option button\n showSystemMode: false,\n ),\n```\n\nThese are the four resulting themes with their light and dark modes, that we can select and\nuse in this example.\n\n**Hippie blue** scheme in light and dark mode. \n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3al.png?raw=true\" alt=\"ColorScheme example 3a light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3ad.png?raw=true\" alt=\"ColorScheme example 3a dark\" width=\"250\"/\u003e\n\n**Green money** scheme in light and dark mode. \n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3bl.png?raw=true\" alt=\"ColorScheme example 3b light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3bd.png?raw=true\" alt=\"ColorScheme example 3b dark\" width=\"250\"/\u003e\n\n**Red red wine** scheme in light and dark mode. \n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3cl.png?raw=true\" alt=\"ColorScheme example 3c light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3cd.png?raw=true\" alt=\"ColorScheme example 3c dark\" width=\"250\"/\u003e\n\n**Our custom Toledo purple** scheme in light and dark mode. \n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3dl.png?raw=true\" alt=\"ColorScheme example 3d light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex3dd.png?raw=true\" alt=\"ColorScheme example 3d dark\" width=\"250\"/\u003e\n\nTry example 3 live on the [**web here**](https://rydmike.com/flexcolorscheme3).\n\n## Example 4 - Switch Between Built-in Color Schemes and Custom Ones\n\nThis example shows how you can use all the built-in color schemes, plus three custom schemes.\nHow to interactively select which one of these schemes is used to define the active theme. The example also uses\nmedium branded background and surface colors. A subpage is available that shows the same theme applied when \nopening another page, that in Flutter just inherits the same theme.\n\nThe full example code is not shown here, please see the code in the package folder\n[flex_color_scheme/example/lib/example4](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example4/main.dart)\nfor the entire example.\n\nIn this example we set the surface style to `FlexSurface.medium`, for medium primary color branded surfaces.\n\nThis time we use the built in `FlexColor.schemesList` to access all\nthe pre-defined `FlexSchemeData` objects as a plain list with the predefined scheme data.\nWe unpack this list with the spread operator into a new custom `myFlexSchemes` list, and add our three custom schemes\nas `FlexSchemeData` objects to the end of this new list. We then access the list's `FlexSchemeData` objects with\nan index number, that we simply change with a popup menu on the HomePage.\nThat is the general principle, let's go through it step by step.\n\nBegin by defining the same colors that we used in example 2 and 3 for our first custom color. In this\ncase we also assign the same color that we used for our `secondaryVariant` scheme color, to the optional `appBarColor`.\nThis is done because the built-in schemes use their secondary variant color as their custom app bar color. It could\nbe any color, but for consistency, we will do the same for our custom `FlexSchemeColor` data objects.\n\nFirst we define the light and dark `FlexSchemeColor` data objects, that we will use as\nlight and dark matched pairs in the `FlexSchemeData` that we are going to add to our list.\n\n```dart\n void main() =\u003e runApp(const DemoApp());\n // Create a custom flex color scheme for a light theme.\n const FlexSchemeColor myScheme1Light = FlexSchemeColor(\n primary: Color(0xFF4E0028),\n primaryVariant: Color(0xFF320019),\n secondary: Color(0xFF003419),\n secondaryVariant: Color(0xFF002411),\n appBarColor: Color(0xFF002411),\n );\n // Create a corresponding custom flex color scheme for a dark theme.\n const FlexSchemeColor myScheme1Dark = FlexSchemeColor(\n primary: Color(0xFF9E7389),\n primaryVariant: Color(0xFF775C69),\n secondary: Color(0xFF738F81),\n secondaryVariant: Color(0xFF5C7267),\n appBarColor: Color(0xFF5C7267),\n );\n```\n\nWe can build a scheme the long way like above, by specifying all hand-picked scheme colors, or we can\nbuild schemes from a single primary color using the `FlexSchemeColor.from` factory. With this factory the\nonly required color is the primary color, the other colors will be computed.\n\nYou can provide the `primaryVariant`, `secondary` and `secondaryVariant` colors with the factory as well, \nany color that is not provided will always be computed for the full set of required colors in a `FlexSchemeColor`.\n\nIn this example we create our 2nd scheme from just a primary color for the light and dark schemes. The custom\n`appBarColor` does in this case also receive the same color value as the one that is computed for `secondaryVariant`\ncolor. This is its default with the `FlexSchemeColor.from` factory if the color is not specified.\n\n\n```dart\n // Use olive green like colors.\n final FlexSchemeColor myScheme2Light =\n FlexSchemeColor.from(primary: const Color(0xFF4C4E06));\n\n final FlexSchemeColor myScheme2Dark =\n FlexSchemeColor.from(primary: const Color(0xFF9D9E76));\n```\n\nFor our 3rd custom scheme we will define `primary` and `secondary` colors for the light color scheme, but no\nvariant colors. We will not make any dark scheme definitions at all either. The primary color is \"Oregon\" orange,\nand the used secondary color is a complementary dark teal like color.\n\n```dart\n final FlexSchemeColor myScheme3Light = FlexSchemeColor.from(\n primary: const Color(0xFF993200),\n secondary: const Color(0xFF1B5C62),\n );\n```\n\nNext we create a list with all the `FlexSchemeData` objects we will use as our schemes in this example,\nstarting with all the built-in ones and adding our three custom ones at the end.\n\n\u003eA **FlexSchemeData** object stores `name` and `description` plus the matching `FlexSchemeColor` for `light`\n\u003eand `dark` mode color schemes. \n\nNext we unpack the predefined `FlexSchemeData` into the list `myFlexSchemes` with the spread operator, add our\nown light and dark scheme definition pairs as `FlexSchemeData` to the end. For our last custom `FlexSchemeColor`\n`myScheme3Light` that we did not make a matching dark scheme for, we use the `.toDark()` method on\nthe light scheme, to get one computed from the defined light scheme colors.\n\n```dart\n final List\u003cFlexSchemeData\u003e myFlexSchemes = \u003cFlexSchemeData\u003e[\n // Add ALL the predefined FlexColor schemes\n ...FlexColor.schemesList,\n // Then add our first custom schemes to the FlexSchemeData list.\n const FlexSchemeData(\n name: 'Toledo purple',\n description: 'Purple theme, created from full custom defined color scheme.',\n light: myScheme1Light,\n dark: myScheme1Dark,\n ),\n // Do the same for our second custom scheme.\n FlexSchemeData(\n name: 'Olive green',\n description: 'Olive green theme, created from primary light and dark colors.',\n light: myScheme2Light,\n dark: myScheme2Dark,\n ),\n FlexSchemeData(\n name: 'Oregon orange',\n description: 'Custom orange and blue theme, from only light scheme colors.',\n light: myScheme3Light,\n // We create the dark desaturated colors from the light scheme.\n dark: myScheme3Light.toDark(),\n ),\n ];\n```\n\nThe setup of the stateful MaterialApp is just as simple as in the previous examples.\n\n```dart\n class _DemoAppState extends State\u003cDemoApp\u003e {\n ThemeMode themeMode = ThemeMode.light;\n // Used to select which FlexSchemeData we currently use in our list.\n int themeIndex = 6; // Start with index 6, the brand blue colors.\n\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'FlexColorScheme',\n // Light theme definition.\n theme: FlexColorScheme.light(\n // As scheme colors we use the one from our list\n // pointed to by the current themeIndex.\n colors: myFlexSchemes[themeIndex].light,\n // Medium strength surface branding used in this example.\n surfaceStyle: FlexSurface.medium,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n // Just a repeat with equivalent setup for the dark theme.\n darkTheme: FlexColorScheme.dark(\n colors: myFlexSchemes[themeIndex].dark,\n surfaceStyle: FlexSurface.medium,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n ).toTheme,\n\n themeMode: themeMode,\n\n home: HomePage(\n themeMode: themeMode,\n onThemeModeChanged: (ThemeMode mode) {\n setState(() { themeMode = mode; });\n },\n // We pass the index of the active theme to the HomePage.\n schemeIndex: themeIndex,\n // Where we can select a new theme in a popup menu\n // and get its index back and update state.\n onSchemeChanged: (int index) {\n setState(() { themeIndex = index; });\n },\n // As FlexSchemeData is needed for info on the home\n // page, we just pass the used from out list\n // pointed to by our current themeIndex.\n flexSchemeData: myFlexSchemes[themeIndex],\n ),\n );\n }\n }\n ```\n\nWhen you build **Example 4**, it starts with the **Brand blues** theme. It is based on a scheme that uses blue colors\nfound in different well known web brands. The primary blue color in the light scheme might thus look very familiar.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4al.png?raw=true\" alt=\"ColorScheme example 4a light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4bl.png?raw=true\" alt=\"ColorScheme example 4b light\" width=\"250\"/\u003e\n\nYou can use the popup menu available in the ListTile showing the current theme to change the active theme. You\ncan choose any of the built-in 36 schemes, plus the three custom color schemes we added. When you change scheme, you\nwill notice that the active theme color changes are animated by interpolating from the active theme colors,\nto the new theme colors. This is a very nice standard feature when you modify the theme used by a Flutter\nMaterial applications.\n\nTry some other color scheme, here is for example the theme based one the **Mango mojito** color scheme.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4cl.png?raw=true\" alt=\"ColorScheme example 4c light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex4cd.png?raw=true\" alt=\"ColorScheme example 4c dark\" width=\"250\"/\u003e\n\nTry example 4 live on the [**web here**](https://rydmike.com/flexcolorscheme4)\n\n## Example 5 - Full Featured Demo\n\nThis example shows how you can use all the built-in color schemes in FlexColorScheme to define themes from them.\nHow you can define your own custom scheme colors, and use them together with the predefined ones. Like the previous\nexample, this can give you an idea of how you can create your own complete custom list of color schemes if you do not\nwant to use the predefined ones.\n\nThis example also shows how you can use the surface branding feature, vary its strength and how to use the custom app\nbar theme features. The usage of the true black theme feature for dark themes is also demonstrated.\nUsing the optional Windows desktop like tooltip theme is also shown.\n\nThe example includes a dummy responsive side menu and rail to give a visual presentation of what applications\nthat have larger visible surfaces using the surface branding look like. \n\nA subpage is also available that show that the same active theme is also applied when opening another page.\nThis is because all the built-in widgets use the same inherited theme and use the colors in the theme in\npredefined ways by default. This is also a good example and explanation of why you should use the same theme\ncolors for your custom re-usable widgets as their default color property values. Then theme your application to\nmake it look the way you want, rather than defining constants that you apply directly to widget color properties.\n\nIf you tried the previous examples on a device, you might\nhave noticed that the system navigation bar on Android devices does not always change. It is not themed to\nhave matching background and theme mode that matches the active application theme as it changes. This example shows\nhow this can be fixed and that the used method remain in effect when opening a subpage.\n\nThe same custom color schemes as in example 4, are also used in this example. They are not explained here again, please\nsee [example 4](#example-4---switch-between-built-in-color-schemes-and-custom-ones) for details.\nThe full example code is not shown here either, please see the code in the package folder\n[flex_color_scheme/example/lib/example5](https://github.com/rydmike/flex_color_scheme/tree/master/example/lib/example5/main.dart)\nfor the entire example's code.\n\n### Example 5 - Local State and Setup\n\nIn this example we can toggle the used app bar theme style, the surfaces branding strength,\ntooltip style and try the true black theme toggle for dark-mode. This is done so that you can interactively try the\noptions and see what they do.\n\nYou can also use the example to toggle the `tabBarStyle` to use a tab bar theme that is designed\nto fit in an app bar, regardless of which style you selected for the AppBar. This is the default style for \nthis sub theme. Alternatively you can choose a style that makes a `TabBarTheme` that fits well on \nbackground colors. Use this\noption if you intend to use the TabBar primarily in a Scaffold body, in dialog or Drawer or other surface and\nbackground colored Material. \n\nStarting with version 3.0.0 the `swapColors` property can be used to swap the primary and secondary colors\nin a color scheme. All built-in colors schemes might not work so well when using this, but many do. One possible\ntheme variation that one can use, is to only swap the colors in dark theme and keep them as defined\nfor light theme mode. This can work quite well with many of the pre-defined color schemes.\n\nThis example has a toggle that allows you to for all the schemes use `toDark` computed dark schemes instead\nof the hand tuned built-in ones. You can then compare this result to hand-made dark themes. \nThe `toDark` method does a pretty good job and can\neven be tuned with a level property. If you use the `toDark` method on the last custom scheme, you will not see\nany difference, because we already created its dark scheme in this example with this method. \nTurning the toggle on for it, computes the same dark scheme from the same light scheme colors again. \n\nThere is a slider that you can use to adjust the white blend level \nof the `toDark` method. From its default value of 35%, to be anything from 0...100 %, you can experiment \nwith it and see what it does.\n\nAdditionally, this example includes a toggle that allows you to instead of using the `FlexColorScheme.toTheme` method, \nuse the standard flutter `ThemeData.from` factory to create the theme from the same color scheme definitions.\nWe can use this toggle to see and study the differences that `FlexColorScheme.toTheme` brings.\n\n```dart\n class _DemoAppState extends State\u003cDemoApp\u003e {\n // Used to select if we use the dark or light theme.\n ThemeMode themeMode = ThemeMode.light;\n // Used to select which FlexSchemeData we use in our list of schemes.\n int themeIndex = 7; // Start with deep blue see theme.\n // Enum used to control primary color branding on surface and background.\n FlexSurface flexSurface = FlexSurface.medium;\n // Enum used to select what app bar style we use.\n FlexAppBarStyle flexAppBarStyle = FlexAppBarStyle.primary;\n // Used to modify the themed app bar elevation.\n double appBarElevation = 0;\n // Used to control if we use one or two toned status bar.\n bool transparentStatusBar = false;\n // Enum used to select what tab bar style we use.\n FlexTabBarStyle flexTabBarStyle = FlexTabBarStyle.forAppBar;\n // If true, tooltip background will be light in light theme, and dark\n // in dark themes. The Flutter Material default and standard is the other\n // way, tooltip background color is inverted compared to app background.\n bool tooltipsMatchBackground = false;\n // Swap primary and secondary colors in light theme mode.\n bool swapLightColors = false;\n // Swap primary and secondary colors in dark theme mode.\n bool swapDarkColors = false;\n // Allow toggling between normal dark mode and true black dark mode.\n bool darkIsTrueBlack = false;\n // Allow toggling between using the actual defined dark color scheme or\n // try how it would look if we had not defined the dark colors, but had\n // been lazy and just created the dark scheme from the light scheme\n // with the toDark() method.\n bool useToDarkMethod = false;\n // The 'level' of white blend percentage used when computing dark scheme\n // colors from the light scheme colors with the toDark method.\n int level = 35;\n // Use the toTheme to create Themes from `FlexColorScheme`. This is\n // the preferred method when using `FlexColorScheme`. In the demo\n // you can use a toggle to see what a FlexColorScheme looks like if\n // you the color scheme and `ThemeData.from` to instead create the theme.\n bool useToThemeMethod = true;\n```\n\n### Example 5 - The FlexColorScheme Properties and toTheme\n\nWe define the light theme for the app, using current theme index, selected surface style and app bar style. \nWith the built-in 36 themes, and the three custom ones we made, we can use 35 different app themes via the setup below.\n\nIf we consider the other style, options we have to multiply that with five different surface styles and five app \nbar variants, four times for the variations from swapping primary and secondary colors. That's a lot of styles and \nthemes!\n\nThe factory `FlexColorScheme.light` is used to define a `FlexColorScheme` for a light theme, from the light\nFlexSchemeColor in the `myFlexSchemes` list, plus some other properties. Those include among others, \nthe surface and app bar style, as well as the tooltip and true black setting for the dark theme.\n\n```dart\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n debugShowCheckedModeBanner: false,\n title: 'FlexColorScheme',\n theme: useToThemeMethod\n ? FlexColorScheme.light(\n colors: myFlexSchemes[themeIndex].light,\n surfaceStyle: flexSurface,\n appBarStyle: flexAppBarStyle,\n appBarElevation: appBarElevation,\n transparentStatusBar: transparentStatusBar,\n tabBarStyle: flexTabBarStyle,\n tooltipsMatchBackground: tooltipsMatchBackground,\n swapColors: swapLightColors,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n fontFamily: AppFonts.mainFont,\n ).toTheme\n```\n\n\n### Example 5 - The FlexColorScheme Properties and toScheme\n\nWe also demonstrate how to create the same theme with the standard from color scheme ThemeData factory\n`ThemeData.from`. The surface style works, but will not be applied as elegantly, but it works fairly OK up\nto medium branding. The app bar style has no effect, nor the tooltip or tab bar style.\n\nWhen toggling between the standard `ThemeData.from` and the `FlexColorScheme.toTheme` made themes from the\nsame `ColorScheme` data, we can observe the differences. We can notice some theme colors that the standard \nmethod does not adjust to match the used color scheme. The previously mentioned \n[article](https://rydmike.com/colorscheme) also includes\na [visual presentation of the differences](https://rydmike.com/colorscheme#the-difference).\n\n```dart\n : ThemeData.from(\n colorScheme: FlexColorScheme.light(\n colors: myFlexSchemes[themeIndex].light,\n surfaceStyle: flexSurface,\n appBarStyle: flexAppBarStyle,\n appBarElevation: appBarElevation,\n transparentStatusBar: transparentStatusBar,\n tabBarStyle: flexTabBarStyle,\n tooltipsMatchBackground: tooltipsMatchBackground,\n swapColors: swapLightColors,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n fontFamily: AppFonts.mainFont,\n ).toScheme,\n ).copyWith(\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n typography: Typography.material2018(\n platform: defaultTargetPlatform,\n ),\n ),\n```\n\n**IMPORTANT** \nWhen using FlexColorScheme and making themes with it, you would normally **NOT** USE THE ABOVE toScheme APPROACH.\nIt is **ONLY** included in this example to be able to demonstrate the theme adjustments provided by \n`FlexColorScheme.toTheme`. That said, it is as shown totally possible to do so if you for some reasons prefer\nthe results with the `toScheme` approach. By using it, you do however loose most of the end results and features\noffered by `FlexColorScheme`. You can see an example visual comparison and presentation of the\n[**differences here**](https://rydmike.com/colorscheme#the-difference).\n\nThe used `FlexColorScheme.light` properties `appBarStyle`, `appBarElevation`, `tabBarStyle`, \n`tooltipsMatchBackground` and `visualDensity` in the example above, actually have\nno impact at all on the returned `ColorScheme` by `toScheme`. It can only return colors in a `ColorScheme`, \nthat of course have no such theming concept. Definition of these values above could just as well be removed in the\nabove example. They were left in there to demonstrate that for this **NOT** recommended FlexColorScheme theme \ndefinition method, they have no impact on the end result. Only properties that adjust scheme colors, \nlike `colors`, `scheme`, `surfaceStyle` and `usedColors` will have an impact on the `toScheme` \nreturned by **FlexColorScheme**.\n\n\u003e **AVOID** \n\u003e Using a light theme and dark theme that do no define and use the same `Typogrpahy`! \n\u003e To make the above demo work interactively we also have to make sure we use the same **typography** when\n\u003e we make the ThemeData object from the returned ColorScheme.\n\u003e If we do not, the animated theme will show an assertion error, because the **Flutter SDK** cannot \n\u003e animate between text themes using different `Typography`. To fix this, we use the same nicer \n\u003e and newer typography that is used by default by FlexColorScheme based themes. We also add the \n\u003e visual density to the `ThemeData` with the same `copyWith`, so we get the same Widget spacing \n\u003e as the one used in our `FlexColorScheme.light().toTheme` setup.\n\n### Example 5 - Equivalent Setup for the Dark Theme, but with More Options\n\nWe do the equivalent definition for the dark theme, and we add\nthe true black option as well. We also use the `useToDarkMethod` boolean as switch for `colors` to pass it a\n`FlexSchemeColor` that is either using the predefined ones or computes it from its light `FlexSchemeColor`.\n\nFor the `toDark` calculation we give it the level property that allows us to tune the dark conversion with\nthe slider in the UI. We also use the `defaultError` modifier. This ensures that the resulting computed\ntoDark scheme will ignore any existing light scheme error color definition, and use Material default dark mode\nerror color as its error color. Without this modifier, toDark will also compute the error color for the\ndark scheme from the light scheme's error color. It will thus also change with the level adjustment.\nThis is certainly also a usable option, but in this example we do not want this behavior.\n\n```dart\n darkTheme: useToThemeMethod\n ? FlexColorScheme.dark(\n colors: useToDarkMethod\n ? myFlexSchemes[themeIndex].light.defaultError.toDark(level)\n : myFlexSchemes[themeIndex].dark,\n surfaceStyle: flexSurface,\n appBarStyle: flexAppBarStyle,\n appBarElevation: appBarElevation,\n transparentStatusBar: transparentStatusBar,\n tabBarStyle: flexTabBarStyle,\n tooltipsMatchBackground: tooltipsMatchBackground,\n swapColors: swapDarkColors,\n darkIsTrueBlack: darkIsTrueBlack,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n fontFamily: AppFonts.mainFont,\n ).toTheme\n\n : ThemeData.from(\n colorScheme: FlexColorScheme.dark(\n colors: useToDarkMethod\n ? myFlexSchemes[themeIndex].light.defaultError.toDark(level)\n : myFlexSchemes[themeIndex].dark,\n surfaceStyle: flexSurface,\n appBarStyle: flexAppBarStyle,\n appBarElevation: appBarElevation,\n transparentStatusBar: transparentStatusBar,\n tabBarStyle: flexTabBarStyle,\n tooltipsMatchBackground: tooltipsMatchBackground,\n swapColors: swapDarkColors,\n darkIsTrueBlack: darkIsTrueBlack,\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n fontFamily: AppFonts.mainFont,\n ).toScheme,\n ).copyWith(\n visualDensity: FlexColorScheme.comfortablePlatformDensity,\n typography: Typography.material2018(\n platform: defaultTargetPlatform,\n ),\n ),\n```\n\n\u003e **What does defaultError actually do?** \n\u003e \n\u003e The `defaultError` modifier creates a new copy of the object, where `error` color is null.\n\u003e This causes the `toDark` method to skip it and keep it as null. \n\u003e It then gets the default Material error via the `toTheme` method. \n\u003e For the custom `FlexSchemeColor` objects in example 4 and 5, we did not specify\n\u003e any error color, they are already `null` and get the default fixed Material error in dark mode.\n\u003e However, the built-in schemes **do specify** their error color for both light and dark schemes. \n\u003e Since the light error color is defined, and we do not want `toDark` to compute a dark scheme \n\u003e error color that changes with the level, \n\u003e we set it to null with `defaultError`.\n\n### Example 5 - Passing All the Values Back and Forth to the HomePage\n\nThe rest of the additions in the stateful MaterialApp are only passing in current values and getting a new value for\nit via callbacks for all our settings and their current values.\n\nIt is certainly getting tedious to do it this way by now. Since it was stated that we would not add any \nadvanced state management solution to these bundled examples, we are sticking to this \nway in this more complex example as well. Let it at the same time be a good example of why and when \na state management solution should really be considered.\n\n```dart\n // themeMode value and change callback.\n themeMode: themeMode,\n home: HomePage(\n themeMode: themeMode,\n onThemeModeChanged: (ThemeMode mode) {\n setState(() { themeMode = mode; });\n },\n // Used theme index and change callback.\n schemeIndex: themeIndex,\n onSchemeChanged: (int index) {\n setState(() { themeIndex = index;});\n },\n // Used surface branding and change callback.\n themeSurface: flexSurface,\n onThemeSurfaceChanged: (FlexSurface surface) {\n setState(() { flexSurface = surface; });\n },\n // Used app bar style and change callback.\n appBarStyle: flexAppBarStyle,\n onAppBarStyleChanged: (FlexAppBarStyle style) {\n setState(() { flexAppBarStyle = style; });\n },\n // Used transparentStatusBar and change callback.\n transparentStatusBar: transparentStatusBar,\n onTransparentStatusBarChanged: (bool value) {\n setState(() {transparentStatusBar = value; });\n },\n // Used app bar elevation and change value callback.\n appBarElevation: appBarElevation,\n onAppBarElevationChanged: (double value) {\n setState(() { appBarElevation = value; });\n },\n // Used tab bar style and change callback.\n tabBarStyle: flexTabBarStyle,\n onTabBarStyleChanged: (FlexTabBarStyle style) {\n setState(() { flexTabBarStyle = style; });\n },\n // Used tooltip style and change callback.\n tooltipsMatchBackground: tooltipsMatchBackground,\n onTooltipsMatchBackgroundChanged: (bool value) {\n setState(() { tooltipsMatchBackground = value; });\n },\n // Swap colors value for light mode and change callback.\n swapLightColors: swapLightColors,\n onSwapLightColors: (bool value) {\n setState(() { swapLightColors = value; });\n },\n // Swap colors value for dark mode and change callback.\n swapDarkColors: swapDarkColors,\n onSwapDarkColors: (bool value) {\n setState(() { swapDarkColors = value; });\n },\n // True black mode and change callback.\n darkIsTrueBlack: darkIsTrueBlack,\n onDarkIsTrueBlackChanged: (bool value) {\n setState(() { darkIsTrueBlack = value; });\n },\n // Dark scheme method and toggle method callback.\n useToDark: useToDarkMethod,\n onUseToDarkChanged: (bool value) {\n setState(() { useToDarkMethod = value; });\n },\n // Dark scheme white blend level and change callback.\n whiteBlend: level,\n onWhiteBlendChanged: (int value) {\n setState(() { level = value; });\n },\n // Theme creation method and toggle method callback.\n useToTheme: useToThemeMethod,\n onUseToThemeChanged: (bool value) {\n setState(() { useToThemeMethod = value; });\n },\n // And pass the current FlexSchemeData to the\n // homePage so we can use some info from it.\n // We use copyWith to modify the dark scheme to\n // the colors we get from toggling the switch\n // for computed dark colors or the actual defined\n // dark colors.\n flexSchemeData: myFlexSchemes[themeIndex].copyWith(\n dark: useToDarkMethod\n ? myFlexSchemes[themeIndex].light.toDark()\n : myFlexSchemes[themeIndex].dark),\n ),\n );\n }\n }\n```\n\nWith this example we include a side rail. It expands to a menu on desktop/web when using a larger\ncanvas, it even does this in phone landscape mode. This just a dummy for demo purposes. It is here to give a better\nidea and presentation of what a surface branded theme looks like. The effect is best viewed and experienced\non a tablet, or the with a desktop browser via the live web demo, where the surface branded\ntheming effect is more obvious.\n\n### Example 5 - Themed System Navigation Bar in Android\n\nThe HomePage's build method for this example starts by wrapping the entire page content in an `AnnotatedRegion`\nwith a `SystemUiOverlayStyle` value that we get from the static helper\n`FlexColorScheme.themedSystemNavigationBar(context, ...)`. \n\nUsing this we can get a system navigation bar, typically on older Android phones that still uses one, that \nfollows the active theme's background color and theme mode. The system navigation bar will get updated as \nyou select new themes, different background color branding style and strength, and \ntoggle dark and light theme mode. Many Flutter applications neglect or forget to include this feature in their themes.\n\n```dart\n return AnnotatedRegion\u003cSystemUiOverlayStyle\u003e(\n value: FlexColorScheme.themedSystemNavigationBar(\n context,\n systemNavBarStyle: systemNavBarStyle,\n useDivider: useSysNavDivider,\n ),\n child: ....\n );\n```\n\nAbove the `systemNavBarStyle` is a local `FlexSystemNavBarStyle` state variable tied to the same UI choice in the demo\nhome screen and `useSysNavDivider` is local bool state variable. Together with the option to remove the status bar \nscrim, you can have easy complete control of both the AppBar's status bar, and the system navigation bar look, \nlike shown below:\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/FlexSchemeAppBar.gif?raw=true\" alt=\"AppBar StatusBar\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/FlexSchemeNavBar.gif?raw=true\" alt=\"SysNavBar Style\" width=\"250\"/\u003e\n\nThe top status bar scrim toggle, system navigation bar divider and style only have an impact \non Android builds, they do not have any functionality on the live Web example.\n\n\u003e **NOTE:** \n\u003e The static helper `FlexColorScheme.themedSystemNavigationBar(context, ...)` is designed to provide a convenience\n\u003e wrapper for a `SystemUiOverlayStyle` that works for screens that use and adhere to current theme mode colors.\n\u003e If your application use screens that do not follow the current theme, then just use `SystemUiOverlayStyle`\n\u003e directly in the annotated region for such screens to define their desired style. You can also make your own \n\u003e convenience wrapper function or even just a const value for it if you need to use a fixed style and design frequently.\n\u003e \n\u003e The system navigation bar icons do not seem to change color correctly until API30 (Android 11). On earlier\n\u003e API levels you may sometimes end up with light themed system navigation bar icons, even if you requested dark \n\u003e ones from the Android system. This has been observed at least with Pixel 4XL emulator on API29 (Android 10).\n\nYou can also use the `FlexColorScheme.themedSystemNavigationBar` to hide the top status icons if you are not\nusing an app bar at all. This can be useful on a splash or onboarding page. Example 5 contains three different\nexamples, each with their own limitations, read more in the example 5 source code comments on how it\ncan be used, here what they look like. The last Example SplashPage 2, would be the ideal version, and it \nworks well on some versions of Android, but seems to fail on newer ones, so you may prefer 1b instead.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/FlexColorScheme-Splash-half-Size.png?raw=true\" alt=\"ColorScheme Splash pages\"/\u003e\n\n### Example 5 - Building the Example\n\nThe above concludes the code walk through of example 5. When we build it, the example starts with \nthe **deep blue sea** scheme. In the example below we can also see the correctly\nthemed system navigation bar on the Android device.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5al.png?raw=true\" alt=\"ColorScheme example 5 light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5ad.png?raw=true\" alt=\"ColorScheme example 5 dark\" width=\"250\"/\u003e\n\nTry example 5 live on the [**web here**](https://rydmike.com/flexcolorscheme5)\n\n### Example 5 - Computed Dark Theme\n\nSince example 5 allows us to toggle the dark mode from using its hand tuned predefined dark scheme colors, to the\ndark scheme colors computed from the light scheme colors. Let's use that feature study and compare some examples.\n\nWith the above **deep blue sea** scheme, the computed ones are a bit more dull and muted in this example.\nThese screenshots are using medium surface branding, the computed dark scheme is on the right.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5ad.png?raw=true\" alt=\"ColorScheme example 5 dark\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5ad-to-black.png?raw=true\" alt=\"ColorScheme example 5 dark computed\" width=\"250\"/\u003e\n\nWith some other schemes, like the **Aqua blue** one there is only a minor difference. These screenshots\nare using strong surface branding, the computed dark scheme is on the right.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5a2d.png?raw=true\" alt=\"ColorScheme example 5a2 dark\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5a2d-to-black.png?raw=true\" alt=\"ColorScheme example 5 dark computed\" width=\"250\"/\u003e\n\n### Example 5 - Computed Dark Theme with Level Adjustment\n\nThe result of the `toDark` method varies depending on how saturated the used light scheme colors are. It is possible\nto tune the calculated dark scheme by modifying the `whiteBlend` property it uses to blend in white to make the\ndark scheme. The default `whiteBlend` is 35%, this is normally a suitable value. For more saturated light scheme\ncolors try 40%, which is also used in the Material design guide to convert the default red error color for light mode,\nto dark mode. For light scheme color with low saturation, a white blend of 20...30% often also produces nice results.\n\nWith the included level slider in the example we can interactively change the `whiteBlend` level for the computed\ndark mode scheme colors. Let's select a color scheme, say the **Brand blues** one, then go dark.\nBy default, the built-in predefined hand-picked matching dark scheme colors for the dark theme mode are used.\n\nTurn on the \"Compute dark theme\" mode, the result is pretty close to the predefined one for this dark scheme with\nthe default level of 35%. Then adjust the white level blend to tune how saturated the computed dark scheme colors are\ncompared to their light scheme master. At 0% they are the same as the light scheme, at 100%, well then they are white,\nnot so useful. A range of 10...50% can produce excellent results. What is best depends on how saturated your starting\nlight scheme colors are, and of course what kind of matching dark theme look you like and want. If you use the even\ndarker dark-mode, **true black**, you may want to have a different saturation for your dark scheme colors compared to\nstandard dark-mode surface. You could easily implement that adjustment with this feature.\n\nThis screen recording compares the computed `toDark` theme result, to the built-in hand-picked one.\nIt does this by toggling the mode a few times, so you can compare the different results. It also uses the level slider\nto adjust the `toDark` theme result. A sharp eye might notice that this recording does not use the `defaultError`\nerror color modifier, the changing dark error color does not look so nice when tuning the computed scheme colors.\nThe bundled example 5 and live web version of it uses the modifier.\n\n\u003cimg src=\"https://rydmike.com/assets/fcs_v1-1-0-phone3.gif?raw=true\" alt=\"Dark scheme calc level\"/\u003e\n\n### Example 5 - Branded Surfaces and App Bar Options\n\nLet us now explore the effect of branded surface colors. Branded surfaces are often\nassociated with dark mode, but it works well with light mode too when applied delicately. Below you can see how\nthe primary color gets blended into Material surface and even stronger so, into Material background colors.\nThe screenshots below are using the medium branding strength.\n\nYou can use the toggle in the example to change from standard no branded surfaces colors, to light, medium,\nstrong and heavy.\n\nThe scaffold background does not receive any branding until the heavy mode. You might think that this and all\nthe other theming can be done by just passing the same scheme colors to the `ThemeData.from` factory. That is why\nthis demo allows you to flip a switch to do just that, so you can see and observe the difference between\ncolor scheme based themes created by `FlexColorScheme.toTheme` and `ThemeData.from`.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5bl.png?raw=true\" alt=\"ColorScheme example 5b light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5cl.png?raw=true\" alt=\"ColorScheme example 5c light\" width=\"250\"/\u003e\n\nFeel free to experiment with\nthe live web demo where the differences are even easier to observe since you can have both versions open side by\nside, in a large browser windows. A ready-made example comparison can be\nfound [here](https://rydmike.com/colorscheme#the-difference).\n\nNow that when we tried basic surface color branding, we can test the tricks `FlexColorScheme` can do\nwith the `AppBarTheme` and how you can match it to your surface branding if you like.\n\nYou can easily toggle both dark and light mode AppBars to use differently\nthemed backgrounds. By default, Material design uses AppBars with `ColorScheme.primary` color for light theme \nmode, and the dark background color in dark theme mode. Without using a separately defined sub `AppBarTheme`,\n**FlexColorScheme** AppBars can use different themed backgrounds based on an enum value. The themed `AppBar` \nbackground can use scheme primary color, default Material plain white/dark background color, primary \nbranded surface, primary branded background color, or a custom AppBar color.\n\nThe `FlexColorScheme` scheme's `appBarColor` is a separate scheme color that does not exist in Flutter's standard\n`ColorScheme`, so it does not have to be any of the colors available in a `ColorScheme`.\n\nThe predefined schemes use the color defined in a `ColorScheme` scheme's `secondaryVariant` color, as their value for\nthe custom `appBarColor`. When you make your own schemes you can do the same or use a totally none `ColorScheme`\nrelated color as the AppBar's custom color option. This color then becomes one of the FlexColorScheme's easy\nselectable AppBar theme color options, via the `appBarStyle` property and the `FlexAppBarStyle` enum, in this case\nvia the `custom` choice.\n\nBelow you can see some different branding strengths with a background primary color branded app bar theme used.\nThis example compares medium versus heavy branding. The medium choice is usually well-balanced, but light can be\nsubtle and nice too. If you want to make a bold statement theme, go with heavy. Please note that the visual\nimpact of the branding also depends on how saturated the primary color is.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5dl.png?raw=true\" alt=\"ColorScheme example 5d light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5el.png?raw=true\" alt=\"ColorScheme example 5e light\" width=\"250\"/\u003e\n\nHere are few more images of the heavy primary color branded version, when looking at some widgets as well.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5fl.png?raw=true\" alt=\"ColorScheme example 5f light\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5gl.png?raw=true\" alt=\"ColorScheme example 5g light\" width=\"250\"/\u003e\n\n### Example 5 - The TabBar Style\n\nThe `tabBarStyle` property can be used to toggle the theme the `TabBar` receives. By default, a theme that is designed\nto make it fit in an `AppBar`, regardless of which style you have selected for it, is used. This is the\n`FlexTabBarStyle.forAppBar` style. The typical usage of a `TabBar` is to have it in an `AppBar`, \nand the default style works for this use case.\n\nAlternatively you can choose a style that makes a `TabBarTheme` that fits well on background colors. Use this\noption if you intend to use the `TabBar` in a `Scaffold` body, in Dialogs, Drawers or other surface and\nbackground colored Material. If you do so, you do not have re-theme it, or style it separately for this purpose.\n\nIf you intend to use `TabBar` widgets in both AppBars and on surface and backgrounds, you will have to choose the style\nthat most often fits your use case. Then theme it separately for the other use case. You would have to do the same\nwith Flutter standard themes and `TabBarTheme` as well when not using FlexColorScheme, but the first theme your\nget without effort.\n\nWhich `tabBarStyle` style and resulting `TabBarTheme` actually works best, depends on the background color. Here we see\nTabBars used on surfaces and in an `AppBar`, when the AppBar is using primary color. As can be seen, the tab bar\ntheme that goes well in an app bar in such a case, does not fit on the surfaces at all, and wise versa.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/TabBar-on-primary.png?raw=true\" alt=\"tab bar on primary\"/\u003e\n\nIf you plan to use only surface or background (also the branded ones) colored AppBars, you can see that both tab bar\nstyles, and their resulting themes work for both situations. The difference is minor, and it is a matter of opinion\nwhich one is preferable. Both style options can be used if you restrict your app bar color to background colors, or \ntheir primary branded variants.\nIn such a use case you can get away with using just one of the built-in style options, even if you use tab\nbars in both app bars and on other surfaces.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/TabBar-on-surface.png?raw=true\" alt=\"tab bar on surface\"/\u003e\n\n### Example 5 - True Black\n\nDark-mode is nice, but with `FlexColorScheme` you can go even darker, go **true black** with the flick of a\nswitch. When using the true black option for dark-mode, surface, background and scaffold background are set to\nfully black. This can save power on OLED screens as the pixels are turned off, but it can also cause scrolling artefact\nissues when pixels turn fully on and off rapidly as you scroll. You can read about this and see an example of it in\nthe [Material design guide](https://material.io/design/color/dark-theme.html#ui-application)\nas well. (Scroll back up one heading from the link to get to the mention of it.)\n\nIf you use branded surfaces with true black mode enabled, you will notice that the branding has a lower impact,\nonly at strong and heavy levels does it have a visible effect. This is by design to keep most surfaces totally or\nvery close to black when true black is combined with surface branding. If you really want complete black\nfor all surfaces and backgrounds, then avoid combining true black mode with branded surfaces. On the other hand it\nstill makes a darker theme than normal dark theme, which can look nice. It may also eliminate the scrolling issue, since\nall background colored pixels are not fully off in the strong and heavy branded true black modes.\n\nHere is an example of a branded dark theme with true black OFF (default and standard) and true black ON,\nwhen using heavy branding with the **Red red wine** color scheme.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5cd.png?raw=true\" alt=\"ColorScheme example 5c dark\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5bd.png?raw=true\" alt=\"ColorScheme example 5b dark\" width=\"250\"/\u003e\n\nHere is another difference example with the **Deep blue sea** scheme, when using medium strength surface branding, and\na primary colored app bar in dark-mode.\n\n\u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5ad.png?raw=true\" alt=\"ColorScheme example 5 dark\" width=\"250\"/\u003e  \u003cimg src=\"https://rydmike.com/assets_fcsv4/fcs_phone_ex5ad-true-black.png?raw=true\" alt=\"ColorScheme example 5 true black\" width=\"250\"/\u003e\n\n## Android Transparent System Navigation Bar\n\nVersion 1.4.0 adds experimental support for transparent system navigation bar for Android for SDK \u003e= 30 (Android 11).\nThe support is added via the new `opacity` property in `FlexColorScheme.themedSystemNavigationBar`.\nA separate example, that builds on example 5 for this more advanced use case, shows and explains how and when\ntransparent system navigation bar can be used in Android.\n\nThe example also shows how to set it up so that it always looks as nice as possible. This is done by using a \nprimary color branded background color applied to the system navigation bar in Android, when \ntransparency is not supported. While still using a transparent system navigation bar, \nwhen running on an API level that supports it.\n\nPlease see the separate small stand-alone example Android project called\n[**sysnavbar** on GitHub](https://github.com/rydmike/sysnavbar) for full details.\n\nWith this experimental feature you can make an Android system navigation that looks like the left one below when\nit is supported. It then falls back to just being theme color branded, like the right one, on API levels that do not\nsupport it.\n\nThe example below uses the classical system navigation bar with the navigation buttons. It also works when\nthe phone settings is changed to use the much smaller gesture bar, or on phones that don't even have a \nvisible gesture bar.\n\n\u003cimg src=\"https://rydmike.com/assets/sysnavbar4.gif?raw=true\" alt=\"System navbar transparent\"/\u003e\n\n\u003ePlease note that phones with API30 (Android 11) were when this was first written (Jan 16, 2021) still very\n\u003erare, and at the time did not even register on\n\u003e[**stats counter**](https://gs.statcounter.com/os-version-market-share/android/mobile-tablet/worldwide). \n\u003e When this update was made (June 26, 2021) the share of Android 11 phones had risen to 15%.\n\n## Behind the Scenes\n\n**FlexColorScheme** does not actually use the `ThemeData.from` factory with a passed\nin `ColorScheme` to make its `ThemeData` object. It uses the `ThemeData` factory directly, with \nsome additional custom theming. It does of course define a `ColorScheme` that it uses in its `ThemeData`.\nFlexColorScheme uses color calculations for the primary color branded/blended surfaces, and \nfor the lazy schemes that do not specify all colors in a color scheme.\n\n### None Null Sub-Themes\n\nFlutter's default Theme and its ThemeData is moving towards a design where all the sub-theme's in the default\nThemeData are NULL. It is always the widget that defines the default behavior and look when its sub-theme and its\nproperties are null and its properties for the same values are null. The widget colors for such cases are\nthen defined by `ThemeData.of(context).colorScheme`.\n\nThis Flutter theming design goal is described in this\n[document](https://docs.google.com/document/d/1kzIOQN4QYfVsc5lMZgy_A-FWGXBAJBMySGqZqsJytcE). It is mostly implemented\nby now, but there might still be some sub-themes in Flutter SDK remaining that do not fully adhere to this design.\n\nFlexColorScheme sets `ThemeData.of(context).colorScheme` to ensure that its colors are applied to all widgets\nthat adhere to this newer standard. It also sets all still existing legacy colors in\n`ThemeData.of(context)`, that some Flutter Widgets still use, to use scheme appropriate or scheme derived colors.\nThanks to this there should not be any built-in Widgets in Flutter that do not get color scheme themed \nby FlexColorScheme.\n\nThe ThemeData created by `FlexColorScheme().toTheme` also tries to not create and modify sub-themes when it does not\nhave to. However, to meet its design goals, FlexColorScheme has to create a number of sub-themes and set some\nof their properties. In some rare cases this is done to correct theming issues in Flutter SDK, and sometimes to \nreach its own design goals. Further below is a list of all the sub-themes it creates and properties that you can\n**currently** expect to have none null values in them. These sub-themes and their properties, \nwould otherwise be null when just using default `ThemeData()` or `ThemeData.from()` factories, if they\ndid not specify sub-themes.\n\nEven though some sub-themes currently are not null, and have some none null properties in FlexColorScheme \nbased `ThemeData`. It is still recommended to use null fallback values if you access ThemeData sub-themes and \ntheir properties in `ThemeData.of(context)` that are null in default `ThemeData`.\n\nFor example, when using the AppBar's theme data, don't just use:\n\n```dart\nfinal Color fabColor = Theme.of(context).appBarTheme.backgroundColor;\n```\n\nIt should never be considered fully **safe** to access properties like it without using null fallbacks.\nInstead, do something similar to this:\n\n```dart\nfinal Color fabColor = Theme.of(context)?.appBarTheme?.backgroundColor ??\n Theme.of(context).colorScheme.primary ?? kMyDefaultAppBarColor;\n```\n\n**FlexColorScheme** will try to not change past creation of its none null sub-themes. However, changes to these\nimplementation details are only considered breaking if they produce a theme that is visibly different from\npast behavior.\n\n**Flutter SDK** may also change some of its implementation details of `ThemeData`. Take for example the broken\nChip case, if it is modified to fix its dark theme bug, then FlexColorScheme would have no reason\nfor its own fix. In cases where Flutter defaults moves in a direction that the same definition is no longer\nneeded in FlexColorScheme, such sub-theme definitions may eventually be removed, **but not without due warning**.\n\nOne recent such case was the `floatingActionButtonTheme` sub-theme that FlexColorScheme created in earlier\nversions. The used sub-theme did not change Flutter's default behavior. However, in some older versions of \nFlutter there was a severe deprecation warning if the sub-theme was not defined. Later it was \nobserved that Flutter SDK default and FlexColorScheme sub-theme now agrees 100% on the design. There was\nno longer any deprecated warning if the sub-theme was totally removed from FlexColorScheme's theme definition. \nThis sub-theme definition was thus no longer needed and was removed starting from FlexColorScheme \nversion 2.0.0-nullsafety.2.\n\nAnother similar change that has still not landed in Flutter 2.2.x stable channel, is the deprecation\nof `ThemeData.accentColor`. From version 3.0.0 **FlexColorScheme** is prepared for when this\nchange lands in stable.\n\n* **AppBarTheme** in `ThemeData.appBarTheme` is NOT null. \n The actual values are defined to match the offered convenience theming options for the AppBar.\n The property values depend on made configuration choices.\n * backgroundColor: *Depends on chosen `appBarStyle`.*\n * foregroundColor: Black if brightness of backgroundColor is light otherwise white. \n * iconTheme: Not null, defines:\n * color: : *Depends on chosen `appBarStyle`.*\n * actionsIconTheme: Not null, defines:\n * color: : *Depends on chosen `appBarStyle`.*\n * elevation: *As defined, default is 0*\n * systemOverlayStyle: *A custom SystemUiOverlayStyle is defined* \n * backwardsCompatibility: `false`\n\n\n* **BottomAppBarTheme** in `ThemeData.bottomAppBarTheme` is NOT null.\n * Color: `colorScheme.background`\n * elevation: *As defined, default is 0*\n\n\n* **TextSelectionThemeData** in `ThemeData.bottomAppBarTheme` is NOT null.\n * selectionColor: `dark ? primary.withOpacity(0.50) : primary.withOpacity(0.30)`\n * selectionHandleColor: `primaryColorDark`\n\n\n* **InputDecorationTheme** in `ThemeData.inputDecorationTheme` is NOT null.\n * filled: `true`\n * fillColor: `dark ? primary.withOpacity(0.06) : primary.withOpacity(0.35)`\n\n\n* **ButtonThemeData** in `ThemeData.buttonTheme` is NOT null.\n * colorScheme: `colorScheme`\n * textTheme: `ButtonTextTheme.primary`\n * materialTapTargetSize: `MaterialTapTargetSize.shrinkWrap`\n * padding: `EdgeInsets.symmetric(horizontal: 16)`\n\n\n* **ChipThemeData** in `ThemeData.chipTheme` is NOT null. \n It is defined to fix issue [#65663](https://github.com/flutter/flutter/issues/65663) and uses\n ChipThemeData.fromDefaults to set:\n * secondaryColor: `colorScheme.primary`\n * brightness: `colorScheme.brightness`\n * labelStyle: `textTheme.bodyText1`\n\n\n* **TabBarTheme** in `ThemeData.tabBarTheme` is NOT null. \n Its colors depend on if a theme appropriate for current active app bar background color (default), or one for\n background and surface color usage is selected. It sets:\n * indicatorSize: `TabBarIndicatorSize.tab`\n * labelStyle: `TextTheme().button`\n * labelColor: *Depends on selected and targeted main usage.*\n * unselectedLabelColor: *Depends on selected and targeted main usage*.\n\n\n* **BottomNavigationBarThemeData** in `ThemeData.bottomNavigationBarTheme` is NOT null.\n * selectedIconTheme: Not null, defines:\n * color: `colorScheme.primary`\n * selectedItemColor: `colorScheme.primary`\n\n\n* **TooltipThemeData** in `ThemeData.tooltipTheme` is NOT null. This theme is\n modified to address issue [#71429](https://github.com/flutter/flutter/issues/71429) and\n to also enable a toggle that inverts the tooltip colors, which is a style often\n used on Windows desktops. The toggle can be used to change the style depending on the current platform. \n The used logic and theme changes are defined as.\n * margin: `EdgeInsets.symmetric(horizontal: 12, vertical: 6)` \n * padding: `desktop ? EdgeInsets.fromLTRB(8, 3, 8, 4) : EdgeInsets.symmetric(horizontal: 16, vertical: 8)`\n * textStyle: \n ```dart\n textTheme.bodyText2.copyWith( \n inherit: false,\n color: tooltipsMatchBackground \n ? dark ? Colors.white : Colors.black \n : dark ? Colors.black : Colors.white, \n fontSize: desktop ? 12 : 14)\n ```\n * decoration: \n ```dart\n tooltipsMatchBackground\n ? BoxDecoration(\n color: isDark ? const Color(0xED444444) : const Color(0xF0FCFCFC),\n borderRadius: const BorderRadius.all(Radius.circular(4)),\n border: Border.all(color: dividerThemeColor))\n : null // Use default Flutter SDK decoration.\n ```\n \n### ThemeData Default Modifications\n\nIn addition to the primary color branded surfaces, full shaded schemes from just one primary color, true\nblack and app bar convenience tricks. The returned `ThemeData` contains some opinionated modifications and theme\ncorrections compared to what you get if you would just use the standard `ThemeData.from` with a `ColorScheme`.\n\nYou can still of course override the returned `ThemeData` with your own theme modifications and \nadditions, by using the `copyWith` method on the resulting `ThemeData` object.\n\nThe following lists the full details of what the differences compared to the standard `ThemeData.from` factory\nare, as well as the rationale behind the made design choices and changes to the defaults.\n\n * `ScaffoldBackground` has its own color property in `FlexColorScheme`\n and can if so desired differ from the `ColorScheme.background`\n color. In the used surface branding implementation, the `scaffoldBackground`\n typically gets no primary branding applied. Only in the heavy choice\n is there a small amount. Whereas `background` in a FlexColorScheme theme\n receives the most color branding of the surface colors. This fits\n well for where the `background` color is typically used in Material background \n by Widgets, but it does not go so well together with `scaffoldBackground`. \n This is why it has its own color value in this imple","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frydmike%2Fflex_color_scheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frydmike%2Fflex_color_scheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frydmike%2Fflex_color_scheme/lists"}