ThemeData.from ignore colorPrimary when brightness is dark #48195

bitsydarel · 2020-01-05T03:22:57Z

Steps to Reproduce

create a colorscheme:

const ColorScheme.dark(
      primary: Color(0xFFf8fa93),
      primaryVariant: Color(0xFFc4c763),
      onPrimary: Color(0x8C000000),
      secondary: Color(0xFF9593fa),
      secondaryVariant: Color(0xFF6265c6),
      onSecondary: Color(0xA8000000),
    );

create a theme data using the ThemeData.from:

ThemeData.from(
      colorScheme: defaultDarkColorScheme,
      textTheme: Typography.englishLike2018,
    );

override the primary text theme with text color matching eligible text color:

defaultDarkTheme.copyWith(
      primaryTextTheme: defaultDarkTheme.primaryTextTheme.apply(
        displayColor: Color(0x6B000000),
        bodyColor: Color(0x8C000000),
      ),
      accentTextTheme: defaultDarkTheme.accentTextTheme.apply(
        displayColor: Color(0x7D000000),
        bodyColor: Color(0xA8000000),
      ),
    );

pass the theme to the material app theme or dark theme property.

Result:
the app bar color does not match the primary color so then the text appbar is not visible.

Here's a dart pad example showing the issue https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b

Target Platform:
Any
Target OS version/browser:
Any
Devices:
Any

bitsydarel · 2020-01-05T03:27:50Z

After spending few moments checking the themedata from method content, i see that the colorPrimary property is ignored if the brighness is dark.

flutter/packages/flutter/lib/src/material/theme_data.dart

Line 613 in 0aed0b6

    
           // For surfaces that use primary color in light themes and surface color in dark

bitsydarel · 2020-01-05T03:29:18Z

After spending few moments checking the tests for this method, i see that this is intended but it's not specified in the docs of the method, ThemeData.from.

flutter/packages/flutter/test/material/theme_data_test.dart

Line 169 in 0aed0b6

    
           // in dark theme's the color used for main components is surface instead of primary

bitsydarel · 2020-01-05T03:34:59Z

If this is intended then why the ColorScheme.dark does not use black as primary ?
because it's confusing and if in some place of your UI you have such code:

Theme.of(context).primaryColor

This behavior completely break the expected result of such behavior.

bitsydarel · 2020-01-05T03:35:44Z

maybe @darrenaustin can put some light on why such strict restrictions ?

HansMuller · 2020-04-30T01:06:03Z

I think the root problem here is how AppBar relates to the theme, see #54776 (comment)

However, I may have interpreted this issue incorrectly. The DartPad link, https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b, doesn't seem to be the test case you've described.

bitsydarel · 2020-04-30T01:11:32Z

@HansMuller Yes the dart pad link seems broken.

my issue is this line

flutter/packages/flutter/lib/src/material/theme_data.dart

Line 632 in bd6ccb6

    
           final Color primarySurfaceColor = isDark ? colorScheme.surface : colorScheme.primary;

Since many widget are currently dependent on ThemeData.primaryColor and not ThemeData.colorScheme.primaryColor. in dark mode many widget does not reflect the primary colour specified in the colorScheme.

HansMuller · 2020-04-30T01:29:35Z

Right. ThemeData.from() tries pretty hard to be backwards compatible in terms of the old ThemeData properties. Until we wean the Material components off of those old ThemeData properties, problems like this one will persist. We are moving in that direction, but it's going to take a while.

bitsydarel · 2020-04-30T01:37:25Z

@HansMuller would be amazing to have a GitHub project https://github.com/flutter/flutter/projects to track all the changes that need to be applied in order to get to that point.

Simple and consistent theming really help achieve design perfect apps that make our clients and users happier.

Thanks for the hard work.

TahaTesser · 2020-07-09T09:46:52Z

Code Sample

import 'package:flutter/material.dart';

const defaultDarkColorScheme = ColorScheme.dark(
  primary: Color(0xFFf8fa93),
  primaryVariant: Color(0xFFc4c763),
  onPrimary: Color(0x8C000000),
  secondary: Color(0xFF9593fa),
  secondaryVariant: Color(0xFF6265c6),
  onSecondary: Color(0xA8000000),
);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.from(
        colorScheme: defaultDarkColorScheme,
        textTheme: Typography.englishLike2018,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).primaryColor,
          // color: Colors.red,
          height: 100,
          width: 100,
          child: Text('Hello World'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.adb),
        onPressed: () {
          print(Theme.of(context).primaryColor);
        },
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-3.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.20.0-3.0.pre at /Users/taha/Code/flutter_dev
    • Framework revision 0af027f805 (5 days ago), 2020-07-04 12:19:20 -0700
    • Engine revision a751393804
    • Dart version 2.9.0 (build 2.9.0-20.0.dev 22da8934ac)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.46.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.1

[✓] Connected device (4 available)
    • SM M305F (mobile)      • 32003c30dc19668f          • android-arm64  •
      Android 10 (API 29)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      13.5.1
    • Web Server (web)       • web-server                • web-javascript •
      Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 83.0.4103.116

• No issues found!

abhaysood · 2021-06-05T15:21:27Z

Ran into the same issue. Any update on it?

What would be a good work around for this meanwhile?

magician20 · 2021-09-18T19:17:26Z

@bitsydarel Can you share full code example for ColorScheme?

maheshmnj · 2022-12-19T23:21:41Z

Reproduces on 3.3 and master 3.7

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.55.20221129

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.53.20221101

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

cc: @darrenaustin

iapicca added a: quality A truly polished experience f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 6, 2020

bitsydarel mentioned this issue Apr 30, 2020

Updating the Material Buttons and their Themes #54776

Closed

timekone mentioned this issue Jul 4, 2020

[Material] Applying a color scheme to a flutter app is difficult. #31284

Closed

TahaTesser added found in release: 1.20 Found to occur in 1.20 has reproducible steps The issue has been confirmed reproducible and is ready to work on labels Jul 9, 2020

maheshmnj added found in release: 3.3 Found to occur in 3.3 found in release: 3.7 Found to occur in 3.7 and removed found in release: 1.20 Found to occur in 1.20 labels Dec 19, 2022

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ThemeData.from ignore colorPrimary when brightness is dark #48195

ThemeData.from ignore colorPrimary when brightness is dark #48195

bitsydarel commented Jan 5, 2020 •

edited

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

HansMuller commented Apr 30, 2020

bitsydarel commented Apr 30, 2020

HansMuller commented Apr 30, 2020

bitsydarel commented Apr 30, 2020

TahaTesser commented Jul 9, 2020

abhaysood commented Jun 5, 2021 •

edited

magician20 commented Sep 18, 2021

maheshmnj commented Dec 19, 2022

ThemeData.from ignore colorPrimary when brightness is dark #48195

ThemeData.from ignore colorPrimary when brightness is dark #48195

Comments

bitsydarel commented Jan 5, 2020 • edited

Steps to Reproduce

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

bitsydarel commented Jan 5, 2020

HansMuller commented Apr 30, 2020

bitsydarel commented Apr 30, 2020

HansMuller commented Apr 30, 2020

bitsydarel commented Apr 30, 2020

TahaTesser commented Jul 9, 2020

abhaysood commented Jun 5, 2021 • edited

magician20 commented Sep 18, 2021

maheshmnj commented Dec 19, 2022

bitsydarel commented Jan 5, 2020 •

edited

abhaysood commented Jun 5, 2021 •

edited