{"id":17596177,"url":"https://github.com/birjuvachhani/adaptive_theme","last_synced_at":"2025-05-15T02:08:02.642Z","repository":{"id":37683324,"uuid":"260859559","full_name":"BirjuVachhani/adaptive_theme","owner":"BirjuVachhani","description":"Easiest way to add support for light and dark theme in your flutter app.","archived":false,"fork":false,"pushed_at":"2025-03-31T04:50:02.000Z","size":700,"stargazers_count":560,"open_issues_count":0,"forks_count":40,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-14T01:51:24.678Z","etag":null,"topics":["adaptive","flutter","flutter-package","flutter-ui","flutter-widget","hacktoberfest","hacktoberfest2023","hactoberfest","hactoberfest-accepted","theme"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/adaptive_theme","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BirjuVachhani.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2020-05-03T08:28:57.000Z","updated_at":"2025-04-13T16:23:57.000Z","dependencies_parsed_at":"2023-10-03T10:45:43.976Z","dependency_job_id":"e5f4287a-ed74-4ed7-a8c8-455ad904b6b6","html_url":"https://github.com/BirjuVachhani/adaptive_theme","commit_stats":{"total_commits":173,"total_committers":5,"mean_commits":34.6,"dds":"0.040462427745664775","last_synced_commit":"2d736832b786c2ba0f3d8178a538680d4917790b"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BirjuVachhani%2Fadaptive_theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BirjuVachhani%2Fadaptive_theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BirjuVachhani%2Fadaptive_theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BirjuVachhani%2Fadaptive_theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BirjuVachhani","download_url":"https://codeload.github.com/BirjuVachhani/adaptive_theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259384,"owners_count":22040820,"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":["adaptive","flutter","flutter-package","flutter-ui","flutter-widget","hacktoberfest","hacktoberfest2023","hactoberfest","hactoberfest-accepted","theme"],"created_at":"2024-10-22T08:23:32.688Z","updated_at":"2025-05-15T02:08:02.595Z","avatar_url":"https://github.com/BirjuVachhani.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/birjuvachhani"],"categories":[],"sub_categories":[],"readme":"![adaptive_theme](https://raw.githubusercontent.com/BirjuVachhani/adaptive_theme/main/banner.png)\n\n# Adaptive Theme\n\nThe easiest way to add support for **light** and **dark** themes in your Flutter app. It allows you \nto manually set a light or dark theme and also lets you define themes based on the system. It also\npersists the theme mode changes across app restarts.\n\n[![Build](https://github.com/BirjuVachhani/adaptive_theme/workflows/Build/badge.svg?branch=main)](https://github.com/BirjuVachhani/adaptive_theme/actions) [![Tests](https://github.com/BirjuVachhani/adaptive_theme/workflows/Tests/badge.svg?branch=main)](https://github.com/BirjuVachhani/adaptive_theme/actions) [![Codecov](https://img.shields.io/codecov/c/github/BirjuVachhani/adaptive_theme.svg)](https://codecov.io/gh/birjuvachhani/adaptive_theme) [![Pub Version](https://img.shields.io/pub/v/adaptive_theme?label=Pub)](https://pub.dev/packages/adaptive_theme)\n\n\nDemo: [Adaptive Theme](https://adaptivetheme.codemagic.app/)\n\n\n## Index\n\n- [Getting Started](#getting-started)\n- [Initialization](#initialization)\n- [Changing Theme Mode](#changing-theme-mode)\n- [Toggle Theme Mode](#toggle-theme-mode)\n- [Changing Themes](#changing-themes)\n- [Reset Theme](#reset-theme)\n- [Set Default Theme](#set-default-theme)\n- [Handling App Start](#get-themeMode-at-app-start)\n- [Handling Theme Changes](#listen-to-the-theme-mode-changes)\n- [Using a floating theme button overlay](#using-a-floating-theme-button-overlay)\n- [Caveats](#caveats)\n  - [Non-Persistent theme changes](#non-persistent-theme-changes)\n  - [Using SharedPreferences](#using-sharedpreferences)\n- [Using CupertinoTheme](#Using-CupertinoTheme)\n  - [Changing Cupertino Theme](#changing-cupertino-theme)\n- [Contribution](#contribution)\n- [License](#license)\n\n## Getting Started\n\nAdd the following dependency to your `pubspec.yaml`\n\n```yaml\ndependencies:\n  adaptive_theme: \u003clatest_version\u003e\n```\n\n\n\n## Initialization\n\nYou need to wrap your `MaterialApp` with `AdaptiveTheme` in order to apply themes.\n\n```dart\nimport 'package:adaptive_theme/adaptive_theme.dart';\nimport 'package:flutter/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n\n  @override\n  Widget build(BuildContext context) {\n    return AdaptiveTheme(\n      light: ThemeData.light(useMaterial3: true),\n      dark: ThemeData.dark(useMaterial3: true),\n      initial: AdaptiveThemeMode.light,\n      builder: (theme, darkTheme) =\u003e MaterialApp(\n        title: 'Adaptive Theme Demo',\n        theme: theme,\n        darkTheme: darkTheme,\n        home: MyHomePage(),\n      ),\n    );\n  }\n}\n```\n\n\n\n## Changing Theme Mode\n\nNow that you have initialized your app as mentioned above. It's very easy and straightforward to \nchange your theme modes: light to dark, dark to light, or to system default.\n\n```dart\n// sets theme mode to dark\nAdaptiveTheme.of(context).setDark();\n\n// sets theme mode to light\nAdaptiveTheme.of(context).setLight();\n\n// sets theme mode to system default\nAdaptiveTheme.of(context).setSystem();\n```\n\n\n\n## Toggle Theme Mode\nAdaptiveTheme allows you to toggle between light, dark, and system themes the easiest way possible.\n\n```dart\nAdaptiveTheme.of(context).toggleThemeMode();\n```\n\n\n\n## Changing Themes\n\nIf you want to change the theme entirely, e.g., change all the colors to some other color swatch,\nthen you can use `setTheme` method.\n\n```dart\nAdaptiveTheme.of(context).setTheme(\n  light: ThemeData(\n    useMaterial3: true,\n    brightness: Brightness.light,\n    colorSchemeSeed: Colors.purple,\n  ),\n  dark: ThemeData(\n    useMaterial3: true,\n    brightness: Brightness.dark,\n    colorSchemeSeed: Colors.purple,\n  ),\n);\n```\n\n\n\n## Reset Theme\n`AdaptiveTheme` is smart enough to keep your **default** themes handy that you provided at the time \nof initialization. You can fall back to those default themes in a very easy way.\n\n```dart\nAdaptiveTheme.of(context).reset();\n```\n\nThis will reset your theme as well as theme mode to the initial values provided at the time of \ninitialization.\n\n\n\n## Set Default Theme\n\n`AdaptiveTheme` persists theme mode changes across app restarts and uses the default themes to set \ntheme modes (light/dark) on. You can change this behavior if you want to set a different theme as \nthe default theme other than the one provided at the time of initialization.\n\nThis comes in handy when you're fetching themes remotely on app starts and the setting theme as the \ncurrent theme.\n\nDoing so is quite easy. You would set a new theme normally as you do by calling `setTheme` method \nbut this time, with a flag isDefault set to true.\n\n\u003e This is only useful when you might want to reset to default theme at some point.\n\n```dart\nAdaptiveTheme.of(context).setTheme(\n  light: ThemeData(\n    useMaterial3: true,\n    brightness: Brightness.light,\n    colorSchemeSeed: Colors.blue,\n  ),\n  dark: ThemeData(\n    useMaterial3: true,\n    brightness: Brightness.dark,\n    colorSchemeSeed: Colors.blue,\n  ),\n  isDefault: true,\n);\n```\n\n\n\n## Get ThemeMode at App Start\n\nWhen you change your theme, the next app run won't be able to pick the most recent theme directly \nbefore rendering with the default theme for the first time. This is because at the time of \ninitialization, we cannot run async code to get the previous theme mode. However, it can be avoided \nif you make your main() method async and load the previous theme mode asynchronously. The example \nbelow shows how it can be done.\n\n```dart\nvoid main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  final savedThemeMode = await AdaptiveTheme.getThemeMode();\n  runApp(MyApp(savedThemeMode: savedThemeMode));\n}\n```\n\n```dart\nAdaptiveTheme(\n  light: lightTheme,\n  dark: darkTheme,\n  initial: savedThemeMode ?? AdaptiveThemeMode.light,\n  builder: (theme, darkTheme) =\u003e MaterialApp(\n    title: 'Adaptive Theme Demo',\n    theme: theme,\n    darkTheme: darkTheme,\n    home: MyHomePage(),\n  ),\n)\n```\nNotice that I passed the retrieved theme mode to my material app so that I can use it while \ninitializing the default theme. This helps to avoid theme change flickering on app startup.\n\n\n\n## Listen to the theme mode changes\n\nYou can listen to the changes in the theme mode via a ValueNotifier. This can be useful when \ndesigning a theme settings screen or developing UI to show theme status.\n\n```dart\nAdaptiveTheme.of(context).modeChangeNotifier.addListener(() {\n  // do your thing.\n});\n```\n\nOr you can utilize it to react on UI with\n\n```dart\nValueListenableBuilder(\n  valueListenable: AdaptiveTheme.of(context).modeChangeNotifier,\n  builder: (_, mode, child) {\n    // update your UI\n    return Container();\n  },\n);\n```\n\n## Using a floating theme button overlay\n\nStarting from `v3.3.0`, you can now set `debugShowFloatingThemeButton` to `true` and enable a \nfloating button that can be used to toggle theme mode very easily. This is useful when you want to \ntest your app with both light and dark themes without restarting the app or navigating to the \nsettings screen where your theme settings are available.\n\n```dart\nAdaptiveTheme(\n  light: ThemeData.light(),\n  dark: ThemeData.dark(),\n  debugShowFloatingThemeButton: true, // \u003c------ add this line\n  initial: AdaptiveThemeMode.light,\n  builder: (theme, darkTheme) =\u003e MaterialApp(\n    theme: theme,\n    darkTheme: darkTheme,\n    home: MyHomePage(),\n  ),\n);\n```\n\n[Video](https://github.com/BirjuVachhani/adaptive_theme/assets/20423471/c3a9fd05-c266-468c-a929-f54c17ece3ba)\n\n## Caveats\n\n#### Non-Persistent theme changes\n\n\u003e This is only useful in scenarios where you load your themes dynamically from network in the splash screen or some initial screens of the app. Please note that AdaptiveTheme does not persist the themes, it only persists the theme modes(light/dark/system). Any changes made to the provided themes won't be persisted and you will have to do the same changes at the time of the initialization if you want them to apply every time app is opened. e.g changing the accent color.\n\n\n\n#### Using SharedPreferences\n\n\u003e This package uses [shared_preferences](https://pub.dev/packages/shared_preferences) plugin internally to persist theme mode changes. If your app uses [shared_preferences](https://pub.dev/packages/shared_preferences) which might be the case all the time, clearing your [shared_preferences](https://pub.dev/packages/shared_preferences) at the time of logging out or signing out might clear these preferences too. Be careful not to clear these preferences if you want it to be persisted.\n\n```dart\n/// Do not remove this key from preferences\nAdaptiveTheme.prefKey\n```\n\nYou can use the above key to exclude it while clearing all the preferences.\n\nOr you can call AdaptiveTheme.persist() method after clearing the preferences to make it persistable\nagain as shown below.\n\n```dart\nfinal prefs = await SharedPreferences.getInstance();\nawait prefs.clear();\nAdaptiveTheme.persist();\n```\n\n## Using CupertinoTheme\n\nWrap your `CupertinoApp` with `CupertinoAdaptiveTheme` in order to apply themes.\n\n```dart\nimport 'package:adaptive_theme/adaptive_theme.dart';\nimport 'package:flutter/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n\n  @override\n  Widget build(BuildContext context) {\n    return CupertinoAdaptiveTheme(\n      light: CupertinoThemeData(\n        brightness: Brightness.light,\n      ),\n      dark: CupertinoThemeData(\n        brightness: Brightness.dark,\n      ),\n      initial: AdaptiveThemeMode.light,\n      builder: (theme) =\u003e CupertinoApp(\n        title: 'Adaptive Theme Demo',\n        theme: theme,\n        darkTheme: darkTheme,\n        home: MyHomePage(),\n      ),\n    );\n  }\n}\n```\n\n#### Changing Cupertino Theme\n\n```dart\n// sets dark theme\nCupertinoAdaptiveTheme.of(context).setDark();\n\n// sets light theme\nCupertinoAdaptiveTheme.of(context).setLight();\n\n// sets system default theme\nCupertinoAdaptiveTheme.of(context).setSystem();\n```\n\n## Contribution\n\nYou are most welcome to contribute to this project!\n\nPlease have a look at [Contributing Guidelines](https://github.com/BirjuVachhani/adaptive_theme/blob/main/CONTRIBUTING.md), before contributing and proposing a change.\n\n#### Liked Adaptive Theme?\n\nShow some love and support by starring the repository.\n\nOr You can\n\n\u003ca href=\"https://www.buymeacoffee.com/birjuvachhani\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n## License\n\n```\nCopyright © 2020 Birju Vachhani\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirjuvachhani%2Fadaptive_theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirjuvachhani%2Fadaptive_theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirjuvachhani%2Fadaptive_theme/lists"}