Darkmode for OpenStreetMap in flutter_map

I want to display OpenStreetMaps in the package flutter_map in a darkmode. I have read that you can use the tileBuilder or a tilesContainerBuilder to create a ColorFiltered, with the help of which the map is then displayed in dark mode. When I create the code with an OpenStreetMaps and a tileBuilder with the appropriate matrix, I get a blank map, no light version and no dark version, just white images.

Also the preconfigured darkModeTileBuilder does not work and returns the same result.

So my TileLayerOptions-Code looks like that:

TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          minNativeZoom: 6,
          maxNativeZoom: 11,
          tileBuilder: (BuildContext context, Widget tileWidget, Tile tile) {
            return ColorFiltered(
            colorFilter: const ColorFilter.matrix(<double>[
              -1,  0,  0, 0, 255,
              0, -1,  0, 0, 255,
              0,  0, -1, 0, 255,
              0,  0,  0, 1,   0,
            ]),
            child: tileWidget);
      },
)

Other try with the native tilesContainerBuilder:

return FlutterMap(
      mapController: mapController,
      options: MapOptions(
        center: position,
        maxZoom: 11,
        minZoom: 6,
        zoom: zoom,
        bounds: LatLngBounds(LatLng(50.24616767738274, 5.649625401773421), LatLng(52.54351073098019, 9.344119584825355)),
      ),
      layers: [
        TileLayerOptions(
          minNativeZoom: 6,
          maxNativeZoom: 11,
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          tilesContainerBuilder: darkModeTilesContainerBuilder,
        ),

      ],
    );

So: How can I display OpenStreetMaps in darkmode in flutter_map?

I had a similar blank white screen like you. I then replaced the colorFilter parameter with the code below and it seemed to do the trick:

const ColorFilter greyscale = ColorFilter.matrix(<double>[
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0,      0,      0,      1, 0,
  ]);

    

screen snippet before using tileBuilder parameter:

screen snippet after: