{"id":33015,"date":"2024-12-26T18:11:00","date_gmt":"2024-12-26T12:41:00","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=33015"},"modified":"2026-03-11T18:33:58","modified_gmt":"2026-03-11T13:03:58","slug":"flutter-theme-management-custom-color-schemes","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes","title":{"rendered":"Flutter Theme Management: How to Implement Custom Colors"},"content":{"rendered":"<p>Flutter&#8217;s Theme Management enables developers to centralize and streamline the control of an app&#8217;s visual appearance and styling within <a href=\"https:\/\/mobisoftinfotech.com\/services\/flutter-consulting-development\">Flutter consulting services<\/a>. By leveraging themes, you can efficiently manage elements like colors, typography, icons, and other UI components across the entire app, ensuring a unified and cohesive user experience. The ThemeData class in Flutter offers powerful capabilities for dynamic theming, allowing users to easily toggle between light mode and dark mode or customize color schemes to fit their preferences. This flexibility helps create a polished, adaptable UI that enhances both usability and aesthetics.<\/p>\n\n\n\n<p>In this tutorial, I&#8217;ll guide you step-by-step through the process of implementing a Flutter Theme Manager with custom color schemes. Let\u2019s dive in!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Setting Custom Colors for the App<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">AppColors<\/span> <\/span>{\n  <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">const<\/span> primary1 = Color(<span class=\"hljs-number\">0xFF181823<\/span>);\n  <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">const<\/span> secondary1 = Color(<span class=\"hljs-number\">0xFFFFFFFF<\/span>);\n  <span class=\"hljs-keyword\">static<\/span> Color tertiary3(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> Theme.of(context).brightness == Brightness.light\n        ? <span class=\"hljs-keyword\">const<\/span> Color(<span class=\"hljs-number\">0xFF69C0FF<\/span>)\n        : <span class=\"hljs-keyword\">const<\/span> Color(<span class=\"hljs-number\">0xFF0094FF<\/span>);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>AppColors<\/code> is a utility class that centralizes color definitions for the app, ensuring uniform color usage throughout the application.<\/li>\n\n\n\n<li>The <code>tertiary3<\/code> method is unique because it adapts to the app&#8217;s theme. By using <code>Theme.of(context)<\/code>, it detects whether the app is in light mode or dark mode. It returns a lighter blue <code>(0xFF69C0FF)<\/code> for the light theme and a darker blue <code>(0xFF0094FF)<\/code> for the dark theme.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Usage:<\/strong><\/h4>\n\n\n\n<p>Static constants can be accessed directly, such as <code>AppColors.primary1<\/code>. However, for <code>tertiary3<\/code>, you must pass the context: <code>AppColors.tertiary3(context)<\/code>. This approach ensures consistent color usage across the app while supporting both light and dark themes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Generating Configuration Files for Theme Setup<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Setting up ThemeConfig&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:custom_theme_sample\/constants\/constants.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ThemeConfig<\/span> <\/span>{\n  <span class=\"hljs-keyword\">static<\/span> ThemeData lightTheme = ThemeData(\n      useMaterial3: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-attr\">brightness<\/span>: Brightness.light,\n      <span class=\"hljs-attr\">primaryColor<\/span>: AppColors.primary1,\n      <span class=\"hljs-attr\">scaffoldBackgroundColor<\/span>: AppColors.secondary1);\n  <span class=\"hljs-keyword\">static<\/span> ThemeData darkTheme = ThemeData(\n      useMaterial3: <span class=\"hljs-literal\">true<\/span>,\n      <span class=\"hljs-attr\">brightness<\/span>: Brightness.dark,\n      <span class=\"hljs-attr\">primaryColor<\/span>: AppColors.secondary1,\n      <span class=\"hljs-attr\">scaffoldBackgroundColor<\/span>: AppColors.primary1);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>ThemeConfig<\/code> is a class that holds theme-related configurations for the app. This class contains two static properties:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>lightTheme<\/code>: Defines the appearance for light mode.<\/li>\n\n\n\n<li><code>darkTheme<\/code>: Defines the appearance for dark mode.<\/li>\n<\/ul>\n\n\n\n<p>Both themes utilize <code>ThemeData<\/code>, which is Flutter&#8217;s method for defining visual properties. Key properties include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useMaterial3<\/code>: Activates Material Design 3, Google&#8217;s latest design system.<\/li>\n\n\n\n<li><code>brightness<\/code>: Defines whether the theme is light or dark.<\/li>\n\n\n\n<li><code>primaryColor<\/code>: Sets the primary color used throughout the app.<\/li>\n\n\n\n<li><code>scaffoldBackgroundColor<\/code>: Specifies the default background color for app screens.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><h3><strong>Setting up ThemeConfig<\/strong><\/h3><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">import <span class=\"hljs-string\">'package:custom_theme_sample\/constants\/app_global.dart'<\/span>;\nimport <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\nimport <span class=\"hljs-string\">'package:custom_theme_sample\/constants\/constants.dart'<\/span>;\n\n<span class=\"hljs-keyword\">abstract<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ThemeManager<\/span> <\/span>{\n  <span class=\"hljs-keyword\">static<\/span> ThemeManager of(BuildContext context) {\n    <span class=\"hljs-keyword\">final<\/span> brightness = Theme.of(context).brightness;\n    <span class=\"hljs-keyword\">return<\/span> brightness == Brightness.light ? LightModeTheme() : DarkModeTheme();\n  }\n  <span class=\"hljs-comment\">\/\/ Primary Colors<\/span>\n  Color get primary1;\n  <span class=\"hljs-comment\">\/\/ Secondary Colors<\/span>\n  Color get secondary1;\n  <span class=\"hljs-comment\">\/\/ Tertiary Colors<\/span>\n  Color get tertiary1;\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">LightModeTheme<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">ThemeManager<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ Primary Colors<\/span>\n  @override\n  Color primary1 = AppColors.primary1;\n  <span class=\"hljs-comment\">\/\/ Secondary Colors<\/span>\n  @override\n  Color secondary1 = AppColors.secondary1;\n  <span class=\"hljs-comment\">\/\/ Tertiary Colors<\/span>\n  @override\n  Color tertiary1 = AppColors.tertiary3(AppGlobal.navigatorKey.currentContext!);\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">DarkModeTheme<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">ThemeManager<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ Primary Colors<\/span>\n  @override\n  Color primary1 = AppColors.secondary1;\n  <span class=\"hljs-comment\">\/\/ Secondary Colors<\/span>\n  @override\n  Color secondary1 = AppColors.primary1;\n  <span class=\"hljs-comment\">\/\/ Tertiary Colors<\/span>\n  @override\n  Color tertiary1 = AppColors.tertiary3(AppGlobal.navigatorKey.currentContext!);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Theme Manager Overview<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"492\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-light-dark-theme-comparison-custom-colors.png\" alt=\"Flutter light theme vs dark theme comparison with custom colors\" class=\"wp-image-33049\" title=\"Flutter Light vs Dark Theme with Custom Colors Comparison\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"492\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20492%22%3E%3C%2Fsvg%3E\" alt=\"Flutter light theme vs dark theme comparison with custom colors\" class=\"wp-image-33049 lazyload\" title=\"Flutter Light vs Dark Theme with Custom Colors Comparison\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-light-dark-theme-comparison-custom-colors.png\"><\/figure>\n\n\n\n<p>The <code>ThemeManager<\/code> is a Flutter theme management system that offers distinct color schemes for light mode and dark mode.&nbsp;<\/p>\n\n\n\n<p><strong>Here&#8217;s a breakdown:<\/strong><\/p>\n\n\n\n<p>The <code>ThemeManager<\/code> abstract class provides a factory method <code>of()<\/code> that returns the appropriate theme based on the system&#8217;s brightness.&nbsp;<\/p>\n\n\n\n<p>Defines abstract color getters that subclasses must implement.<\/p>\n\n\n\n<p>&#8211; Light Mode Implementation: <strong>LightModeTheme<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">LightModeTheme<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">ThemeManager<\/span> <\/span>{\n  @override\n  Color primary1 = AppColors.primary1;\n  Color secondary1 = AppColors.secondary1;\n  Color tertiary1 = AppColors.tertiary3(...);\n ...\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This class defines the light theme colors, where:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>primary1 uses the default primary color<\/li>\n\n\n\n<li>secondary1 uses the default secondary color<\/li>\n\n\n\n<li>tertiary1 is dynamically determined based on the current context.<\/li>\n<\/ul>\n\n\n\n<p>&#8211; Dark Mode Implementation: <strong>DarkModeTheme<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">DarkModeTheme<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">ThemeManager<\/span> <\/span>{\n  @override\n  Color primary1 = AppColors.secondary1;   \n  Color secondary1 = AppColors.primary1;    \n  Color tertiary1 = AppColors.tertiary3(...);\n...\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The dark theme implementation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Swaps the primary and secondary colors<\/li>\n\n\n\n<li>Uses the same dynamic tertiary color calculation as the light mode<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Usage Example:<\/strong><\/h4>\n\n\n\n<p>You would typically use this in your widgets like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">Widget build(BuildContext context) {\n  <span class=\"hljs-keyword\">final<\/span> theme = ThemeManager.of(context);\n  \n  <span class=\"hljs-keyword\">return<\/span> Container(\n    color: theme.primary1,\n    <span class=\"hljs-comment\">\/\/ ... rest of the widget<\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><h2><strong>Setting up ThemeModeManager<\/strong><\/h2><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:shared_preferences\/shared_preferences.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">ThemeModeManager<\/span> <\/span>{\n  <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-built_in\">String<\/span> _themeKey = <span class=\"hljs-string\">'theme_mode'<\/span>;\n  final ValueNotifier&lt;ThemeMode&gt; themeMode = ValueNotifier(ThemeMode.system);\n  final SharedPreferences _prefs;\n  ThemeModeManager(<span class=\"hljs-keyword\">this<\/span>._prefs) {\n    _loadTheme();\n  }\n\n  <span class=\"hljs-keyword\">void<\/span> _loadTheme() {\n    final savedTheme = _prefs.getString(_themeKey) ?? <span class=\"hljs-string\">'system'<\/span>;\n    themeMode.value = _getThemeMode(savedTheme);\n  }\n\n ThemeMode _getThemeMode(<span class=\"hljs-built_in\">String<\/span> theme) {\n    <span class=\"hljs-keyword\">switch<\/span> (theme) {\n      <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'dark'<\/span>:\n        <span class=\"hljs-keyword\">return<\/span> ThemeMode.dark;\n      <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'light'<\/span>:\n        <span class=\"hljs-keyword\">return<\/span> ThemeMode.light;\n      <span class=\"hljs-keyword\">default<\/span>:\n        <span class=\"hljs-keyword\">return<\/span> ThemeMode.system;\n    }\n  }\n\n  Future&lt;<span class=\"hljs-keyword\">void<\/span>&gt; setTheme(<span class=\"hljs-built_in\">String<\/span> theme) <span class=\"hljs-keyword\">async<\/span> {\n    <span class=\"hljs-keyword\">await<\/span> _prefs.setString(_themeKey, theme);\n    themeMode.value = _getThemeMode(theme);\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reactive Theme Updates with ValueNotifier<\/strong>: The class employs ValueNotifier to provide reactive updates for the theme. When the themeMode changes, any widget listening to this ValueNotifier will automatically rebuild and reflect the updated theme.<br><\/li>\n\n\n\n<li><strong>Widget Subscriptions to Theme Changes<\/strong>: Other widgets in the app can subscribe to themeMode changes. This enables dynamic theme adjustments throughout the app, ensuring the user interface stays in sync with the selected theme.<br><\/li>\n\n\n\n<li><strong>Persistent Theme Preference with SharedPreferences<\/strong>: The class saves the user&#8217;s theme preference using SharedPreferences, allowing the selected theme to persist across app restarts. This ensures that the user&#8217;s theme choice is remembered each time the app is launched.<br><\/li>\n\n\n\n<li><strong>Support for Three Theme Modes<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Light Mode<\/strong>: A bright, high-contrast theme for better visibility in well-lit environments.<\/li>\n\n\n\n<li><strong>Dark Mode<\/strong>: A darker, more muted theme to reduce eye strain in low-light conditions.<\/li>\n\n\n\n<li><strong>System Mode<\/strong>: Automatically adapts to the device&#8217;s system-wide theme setting, providing a consistent experience with the system&#8217;s default theme preferences.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/flutter-app-development-company?utm_source=blog_cta&amp;utm_campaign=flutter-theme-management-custom-color-schemes-cta1\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta01-custom-theme-management-help-flutter.png\" alt=\"Need help with custom theme management in your Flutter app?\" class=\"wp-image-33051\" title=\"Custom Theme Management Help for Flutter App\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Need help with custom theme management in your Flutter app?\" class=\"wp-image-33051 lazyload\" title=\"Custom Theme Management Help for Flutter App\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta01-custom-theme-management-help-flutter.png\"><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Components of the Class:<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Theme Loading:<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">void<\/span> _loadTheme() {\n  final savedTheme = _prefs.getString(_themeKey) ?? <span class=\"hljs-string\">'system'<\/span>;\n  themeMode.value = _getThemeMode(savedTheme);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Retrieves the saved theme from SharedPreferences<\/li>\n\n\n\n<li>Defaults to &#8216;system&#8217; if no theme is saved<\/li>\n\n\n\n<li>Converts the string to a ThemeMode enum<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>ThemeMode conversion:<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">ThemeMode _getThemeMode(<span class=\"hljs-built_in\">String<\/span> theme) {\n  <span class=\"hljs-keyword\">switch<\/span> (theme) {\n    <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'dark'<\/span>: <span class=\"hljs-keyword\">return<\/span> ThemeMode.dark;\n    <span class=\"hljs-keyword\">case<\/span> <span class=\"hljs-string\">'light'<\/span>: <span class=\"hljs-keyword\">return<\/span> ThemeMode.light;\n    <span class=\"hljs-keyword\">default<\/span>: <span class=\"hljs-keyword\">return<\/span> ThemeMode.system;\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Returns the Theme mode (light, dark or system) based on the theme&nbsp;<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Future&lt;<span class=\"hljs-keyword\">void<\/span>&gt; setTheme(<span class=\"hljs-built_in\">String<\/span> theme) <span class=\"hljs-keyword\">async<\/span> {\n  <span class=\"hljs-keyword\">await<\/span> _prefs.setString(_themeKey, theme);\n  themeMode.value = _getThemeMode(theme);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Saves the new theme preference to SharedPreferences<\/li>\n\n\n\n<li>Updates the current theme mode<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Creating AppGlobal file for defining global-level variables<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/theme_manager\/theme_mode_manager.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">AppGlobal<\/span> <\/span>{\n  AppGlobal._();\n  <span class=\"hljs-keyword\">static<\/span> GlobalKey&lt;NavigatorState&gt; navigatorKey = GlobalKey&lt;NavigatorState&gt;();\n  <span class=\"hljs-keyword\">static<\/span> late final ThemeModeManager themeManager;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is a utility class that holds global-level variables and objects that need to be accessed throughout our Flutter application<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Navigator Key:<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">static GlobalKey<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NavigatorState<\/span>&gt;<\/span> navigatorKey = GlobalKey<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">NavigatorState<\/span>&gt;<\/span>();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>This is a global key for the app&#8217;s navigator<\/li>\n\n\n\n<li>It allows navigation actions from anywhere in the app without context<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Theme Manager:<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">static<\/span> late <span class=\"hljs-keyword\">final<\/span> ThemeModeManager themeManager;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>This is a static reference to a ThemeModeManager instance<\/li>\n\n\n\n<li>The late keyword means it will be initialized after the app starts but before it&#8217;s first used<\/li>\n\n\n\n<li>Used for managing the app&#8217;s theme (light\/dark mode)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Configuring the MaterialApp for Theme Integration<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:custom_theme_sample\/constants\/app_global.dart'<\/span>;\n\u2026\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:shared_preferences\/shared_preferences.dart'<\/span>;\n\n<span class=\"hljs-keyword\">void<\/span> main() <span class=\"hljs-keyword\">async<\/span> {\n  WidgetsFlutterBinding.ensureInitialized();\n  final prefs = <span class=\"hljs-keyword\">await<\/span> SharedPreferences.getInstance();\n  AppGlobal.themeManager = ThemeModeManager(prefs);\n  runApp(<span class=\"hljs-keyword\">const<\/span> MyApp());\n}\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> MyApp({<span class=\"hljs-keyword\">super<\/span>.key});\n\n  @override\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> ValueListenableBuilder&lt;ThemeMode&gt;(\n        valueListenable: AppGlobal.themeManager.themeMode,\n        <span class=\"hljs-attr\">builder<\/span>: (context, themeMode, child) {\n          <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n            title: <span class=\"hljs-string\">'Flutter Demo'<\/span>,\n            <span class=\"hljs-attr\">navigatorKey<\/span>: AppGlobal.navigatorKey,\n            <span class=\"hljs-attr\">theme<\/span>: ThemeConfig.lightTheme,\n            <span class=\"hljs-attr\">darkTheme<\/span>: ThemeConfig.darkTheme,\n            <span class=\"hljs-attr\">themeMode<\/span>: themeMode,\n            <span class=\"hljs-attr\">home<\/span>: <span class=\"hljs-keyword\">const<\/span> HomeScreen(),\n          );\n        });\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The class above performs the following functions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Acts as the root widget of the application.<\/li>\n\n\n\n<li>Utilizes <code>ValueListenableBuilder<\/code> to listen for theme changes, allowing the app to switch between light and dark themes at runtime. The current theme mode is managed by <code>ThemeModeManager<\/code>.<\/li>\n\n\n\n<li>Configures the <code>MaterialApp<\/code> with:\n<ul class=\"wp-block-list\">\n<li>Light and dark themes provided by <code>ThemeConfig<\/code>.<\/li>\n\n\n\n<li>A dynamic theme mode that can be toggled.<\/li>\n\n\n\n<li>Navigation setup for routing.<\/li>\n\n\n\n<li>The home screen as the initial route.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Changing the App Theme Based on User Selection<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">import <span class=\"hljs-string\">'package:custom_theme_sample\/constants\/app_global.dart'<\/span>;\n...\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HomeScreen<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatefulWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> HomeScreen({super.key});\n...\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">_HomeScreenState<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">State<\/span>&lt;<span class=\"hljs-title\">HomeScreen<\/span>&gt; <\/span>{\n  String selectedTheme = <span class=\"hljs-string\">'System Default'<\/span>;\n\n  @override\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">final<\/span> theme = ThemeManager.of(context);\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      appBar: AppBar(\n      body: Padding(\n        padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">16.0<\/span>),\n          ...\n              child: ListTile(\n                leading: <span class=\"hljs-keyword\">const<\/span> Icon(Icons.palette),\n                title: <span class=\"hljs-keyword\">const<\/span> Text(<span class=\"hljs-string\">'Change Theme'<\/span>),\n                trailing: DropdownButton&lt;String&gt;(\n                  value: selectedTheme,\n                  onChanged: (String? newValue) {\n                    <span class=\"hljs-keyword\">if<\/span> (newValue != <span class=\"hljs-keyword\">null<\/span>) {\n                      setState(() {\n                        selectedTheme = newValue;\n                        _handleThemeChange(selectedTheme, context);\n                      });\n                    }\n                  },\n                  items: <span class=\"hljs-keyword\">const<\/span> &#091;\n                    DropdownMenuItem(\n                      value: <span class=\"hljs-string\">'System Default'<\/span>,\n                      child: Text(<span class=\"hljs-string\">'System Default'<\/span>),\n                    ),\n                    DropdownMenuItem(\n                      value: <span class=\"hljs-string\">'Light'<\/span>,\n                      child: Text(<span class=\"hljs-string\">'Light'<\/span>),\n                    ),\n                    DropdownMenuItem(\n                      value: <span class=\"hljs-string\">'Dark'<\/span>,\n                      child: Text(<span class=\"hljs-string\">'Dark'<\/span>),\n                    ),]\n \n     ...\n  }\n\n void _handleThemeChange(String theme, BuildContext context) {\n    <span class=\"hljs-keyword\">final<\/span> themeValue = theme.toLowerCase();\n    AppGlobal.themeManager.setTheme(themeValue);\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>HomeScreen<\/code> is a Flutter widget that demonstrates theme switching functionality using a custom theme management system. Here\u2019s a breakdown of its key components:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">1. <strong>Theme Selection UI<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"492\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-dropdown-theme-selection-custom-colors.png\" alt=\"Flutter dropdown for theme selection with custom colors\" class=\"wp-image-33045\" title=\"Theme Selection Dropdown in Flutter for Custom Colors\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"492\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20492%22%3E%3C%2Fsvg%3E\" alt=\"Flutter dropdown for theme selection with custom colors\" class=\"wp-image-33045 lazyload\" title=\"Theme Selection Dropdown in Flutter for Custom Colors\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-dropdown-theme-selection-custom-colors.png\"><\/figure>\n\n\n\n<p>&nbsp;The screen includes a dropdown button that allows users to choose from three theme options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>System Default<\/li>\n\n\n\n<li>Light<\/li>\n\n\n\n<li>Dark<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">2. <strong>Theme Application<\/strong><\/h5>\n\n\n\n<p>&nbsp;The screen uses the <code>ThemeManager<\/code> to access and apply theme colors across the UI:<\/p>\n\n\n\n<p>final theme = ThemeManager.of(context);<\/p>\n\n\n\n<p>\/\/ Example usage:<\/p>\n\n\n\n<p>color: theme.primary1,<\/p>\n\n\n\n<p>backgroundColor: theme.secondary1,<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>3. Theme Switching Logic<\/strong><\/h5>\n\n\n\n<p>When the user selects a new theme, the change is handled by the <code>_handleThemeChange<\/code> method:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">void<\/span> _handleThemeChange(<span class=\"hljs-built_in\">String<\/span> theme, BuildContext context) {\n  final themeValue = theme.toLowerCase();\n  AppGlobal.themeManager.setTheme(themeValue);\n} <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Once the theme is changed, the appropriate theme colors are applied throughout the application UI, as defined in <code>ThemeManager<\/code> above.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Summing It Up<\/strong><\/h2>\n\n\n\n<p>I hope you found this tutorial on implementing Theme Management with Custom Color Schemes in your Flutter apps useful. To download the source code for the sample app, <a href=\"https:\/\/github.com\/mobisoftinfotech\/flutter-custom-color-themes\"><strong>click here<\/strong><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/ui-ux-design?utm_source=blog_cta&amp;utm_campaign=flutter-theme-management-custom-color-schemes-cta2\"><noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta02-stunning-flutter-ui-design-experts.png\" alt=\"Create stunning Flutter UI\/UX with expert design help\" class=\"wp-image-33053\" title=\"Expert Flutter UI\/UX Design Assistance\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"150\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20150%22%3E%3C%2Fsvg%3E\" alt=\"Create stunning Flutter UI\/UX with expert design help\" class=\"wp-image-33053 lazyload\" title=\"Expert Flutter UI\/UX Design Assistance\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta02-stunning-flutter-ui-design-experts.png\"><\/a><\/figure>\n\n\n<div class=\"related-posts-section\"><h2>Related Posts<\/h2><ul class=\"related-posts-list\"><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/angular-signals-architecture-best-practices\">Angular Signals Guide: Architectural Patterns and Best Practices for Using Signals in Angular Applications<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/hire-react-native-developers\">The Complete Checklist to Hire React Native Developers in 2022<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/patient-education\">Effective Patient Education Improving Telehealth Implementation<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/how-to-add-flutter-screens-to-android-app\">How to Add Screens Designed in Flutter into Your Android App (Part 2)<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/digital-freight-matching-in-trucking-industry\">How Will Digital Freight Matching Revolutionize The Trucking Industry?<\/a><\/li><li><a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/how-to-mitigate-protected-health-information-risks\">How  to Mitigate Protected Health Information Risks<\/a><\/li><\/ul><\/div>\n\n\n<div class=\"modern-author-card\">\n    <div class=\"author-card-content\">\n        <div class=\"author-info-section\">\n            <div class=\"author-avatar\">\n                <noscript><img decoding=\"async\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/prashant.png\" alt=\"Prashant Telangi\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Prashant Telangi\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2023\/08\/prashant.png\" class=\" lazyload\">\n            <\/div>\n            <div class=\"author-details\">\n                <h3 class=\"author-name\">Prashant Telangi<\/h3>\n                <p class=\"author-title\">Head of Technology, Mobile<\/p>\n                <a href=\"javascript:void(0);\" class=\"read-more-link read-more-btn\" onclick=\"toggleAuthorBio(this); return false;\">Read more <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"expand\" class=\"read-more-arrow down-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"expand\" class=\"read-more-arrow down-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <div class=\"author-bio-expanded\">\n                    <p>Prashant Telangi brings over 15 years of experience in Mobile Technology, He is currently serving as Head of Technology, Mobile at <a href=\"https:\/\/mobisoftinfotech.com\" target=\"_blank\">Mobisoft Infotech<\/a>. With a proven history in IT and services, he is a skilled, passionate developer specializing in Mobile Applications. His strong engineering background underscores his commitment to crafting innovative solutions in the ever-evolving tech landscape.<\/p>\n                    <div class=\"author-social-links\"><div class=\"social-icon\"><a href=\"https:\/\/www.linkedin.com\/in\/prashant-telangi-83816918\/\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite linkedin\"><\/i><\/a>\n                     <a href=\"https:\/\/twitter.com\/PrashantAnna\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite twitter\"><\/i><\/a>\n                     <a href=\"https:\/\/www.facebook.com\/prashant.telangi\/\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite facebook\"><\/i><\/a><\/div><\/div>\n                    <a href=\"javascript:void(0);\" class=\"read-more-link read-less-btn\" onclick=\"toggleAuthorBio(this); return false;\" style=\"display: none;\">Read less <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"collapse\" class=\"read-more-arrow up-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"collapse\" class=\"read-more-arrow up-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"share-section\">\n            <span class=\"share-label\">Share Article<\/span>\n            <div class=\"social-share-buttons\">\n                <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fflutter-theme-management-custom-color-schemes\" target=\"_blank\" class=\"share-btn facebook-share\"><i class=\"fa fa-facebook-f\"><\/i><\/a>\n                <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fflutter-theme-management-custom-color-schemes\" target=\"_blank\" class=\"share-btn linkedin-share\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\"\n  },\n  \"headline\": \"Flutter Theme Management: How to Implement Custom Colors\",\n  \"description\": \"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.\",\n  \"image\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Prashant Telangi\",\n    \"description\": \"Prashant Telangi brings over 14 years of experience in Mobile Technology, He is currently serving as Technical Architect - Mobility at Mobisoft Infotech. With a proven history in IT and services, he is a skilled, passionate developer specializing in Mobile Applications. His strong engineering background underscores his commitment to crafting innovative solutions in the ever-evolving tech landscape.\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Mobisoft Infotech\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n      \"width\": 600,\n      \"height\": 60\n    }\n  },\n  \"datePublished\": \"2024-12-26\",\n  \"dateModified\": \"2024-12-26\"\n}\n<\/script>\n\n<script type=\"application\/ld+json\">\n    [\n    {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-dropdown-theme-selection-custom-colors.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\n            \"name\": \"Theme Selection Dropdown in Flutter for Custom Colors\",\n            \"caption\": \"Dropdown menu in Flutter to select between custom themes for light and dark modes.\",\n            \"description\": \"This image demonstrates a Flutter dropdown widget used to choose a theme in the app. It showcases how developers can set up a theme management system with custom colors to toggle between light and dark modes.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-dropdown-theme-selection-custom-colors.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-light-dark-theme-comparison-custom-colors.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\n            \"name\": \"Flutter Light vs Dark Theme with Custom Colors Comparison\",\n            \"caption\": \"A side-by-side comparison of Flutter's light theme and dark theme with custom color schemes.\",\n            \"description\": \"This image compares the visual differences between Flutter\u2019s light and dark themes, customized with unique color schemes. It helps developers understand how custom colors affect the user interface in both modes.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-light-dark-theme-comparison-custom-colors.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\n            \"name\": \"Guide to Implement Custom Colors in Flutter Theme Management\",\n            \"caption\": \"A detailed guide to implementing custom color schemes in Flutter theme management.\",\n            \"description\": \"This image serves as a visual guide for implementing custom color schemes in Flutter's theme management system, highlighting how developers can customize Flutter's default theme data for unique UI designs.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta01-custom-theme-management-help-flutter.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\n            \"name\": \"Custom Theme Management Help for Flutter App\",\n            \"caption\": \"Let our experts handle custom theme management for your Flutter app!\",\n            \"description\": \"This call-to-action image offers assistance for developers who need help with implementing custom theme management in their Flutter apps. Perfect for users looking for professional support in managing themes and UI design.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta01-custom-theme-management-help-flutter.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta02-stunning-flutter-ui-design-experts.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\n            \"name\": \"Expert Flutter UI\/UX Design Assistance\",\n            \"caption\": \"Work with design experts to create an amazing UI\/UX for your Flutter app.\",\n            \"description\": \"This call-to-action image promotes services from design experts to help developers create a stunning UI\/UX for their Flutter apps. It highlights the importance of professional design when implementing custom themes and colors in Flutter.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/inline-cta02-stunning-flutter-ui-design-experts.png\"\n        }\n        ]\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Flutter&#8217;s Theme Management enables developers to centralize and streamline the control of an app&#8217;s visual appearance and styling within Flutter consulting services. By leveraging themes, you can efficiently manage elements like colors, typography, icons, and other UI components across the entire app, ensuring a unified and cohesive user experience. The ThemeData class in Flutter offers [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":33048,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[286],"tags":[4367,4365,4360,4362,4363,4361,4364,4359,4366,4368],"class_list":["post-33015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-custom-themes-in-flutter","tag-flutter-color-scheme","tag-flutter-custom-color-schemes","tag-flutter-dark-mode","tag-flutter-light-mode","tag-flutter-theme-customization","tag-flutter-theme-data","tag-flutter-theme-management","tag-flutter-theme-setup","tag-flutter-ui-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flutter Theme Management: Custom Color Schemes Made Easy<\/title>\n<meta name=\"description\" content=\"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter Theme Management: Custom Color Schemes Made Easy\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-26T12:41:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T13:03:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/og-flutter-theme-management-custom-color.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Prashant Telangi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prashant Telangi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\"},\"author\":{\"name\":\"Prashant Telangi\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070\"},\"headline\":\"Flutter Theme Management: How to Implement Custom Colors\",\"datePublished\":\"2024-12-26T12:41:00+00:00\",\"dateModified\":\"2026-03-11T13:03:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\"},\"wordCount\":983,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\"keywords\":[\"custom themes in flutter\",\"flutter color scheme\",\"flutter custom color schemes\",\"flutter dark mode\",\"flutter light mode\",\"flutter theme customization\",\"flutter theme data\",\"flutter theme management\",\"flutter theme setup\",\"flutter ui design\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\",\"name\":\"Flutter Theme Management: Custom Color Schemes Made Easy\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\"datePublished\":\"2024-12-26T12:41:00+00:00\",\"dateModified\":\"2026-03-11T13:03:58+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070\"},\"description\":\"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png\",\"width\":855,\"height\":392,\"caption\":\"How to implement custom colors in Flutter theme management\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter Theme Management: How to Implement Custom Colors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070\",\"name\":\"Prashant Telangi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g\",\"caption\":\"Prashant Telangi\"},\"sameAs\":[\"http:\/\/www.mobisoftinfotech.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter Theme Management: Custom Color Schemes Made Easy","description":"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes","og_locale":"en_US","og_type":"article","og_title":"Flutter Theme Management: Custom Color Schemes Made Easy","og_description":"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.","og_url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes","og_site_name":"Mobisoft Infotech","article_published_time":"2024-12-26T12:41:00+00:00","article_modified_time":"2026-03-11T13:03:58+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/og-flutter-theme-management-custom-color.png","type":"image\/png"}],"author":"Prashant Telangi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Prashant Telangi","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes"},"author":{"name":"Prashant Telangi","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070"},"headline":"Flutter Theme Management: How to Implement Custom Colors","datePublished":"2024-12-26T12:41:00+00:00","dateModified":"2026-03-11T13:03:58+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes"},"wordCount":983,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png","keywords":["custom themes in flutter","flutter color scheme","flutter custom color schemes","flutter dark mode","flutter light mode","flutter theme customization","flutter theme data","flutter theme management","flutter theme setup","flutter ui design"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes","url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes","name":"Flutter Theme Management: Custom Color Schemes Made Easy","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png","datePublished":"2024-12-26T12:41:00+00:00","dateModified":"2026-03-11T13:03:58+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070"},"description":"Learn how to implement custom color schemes in Flutter apps. Master theme management and create beautiful, dynamic themes with ease in this step-by-step guide.","breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2024\/12\/flutter-theme-management-custom-colors.png","width":855,"height":392,"caption":"How to implement custom colors in Flutter theme management"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-theme-management-custom-color-schemes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Flutter Theme Management: How to Implement Custom Colors"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/d7a32c3195dc5efe2829391045ffc070","name":"Prashant Telangi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cdde432a920f6002154a0769008dfecabe1f464d11187612020b889ad41808e7?s=96&r=g","caption":"Prashant Telangi"},"sameAs":["http:\/\/www.mobisoftinfotech.com"]}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/33015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=33015"}],"version-history":[{"count":22,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/33015\/revisions"}],"predecessor-version":[{"id":47566,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/33015\/revisions\/47566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/33048"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=33015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=33015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=33015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}