SetLights together with setPresets

I would love to use the lightPresets together with setting a custom shadow with setLights.

Ultimate goal: Having a slider for the time of day, where the lighting/shadows adjust automatically (given a specific coordinate + position of the sun).

I am able to set the preset with:

  String lightPreset = 'day';

  void _updateMapStyle() {
    var configs = {
      "lightPreset": lightPreset,
    };
    mapboxMap!.style.setStyleImportConfigProperties(
      "basemap",
      configs,
    );
  }

And separately I also managed to set the shadow depending on the day of time like this (using the spa package:

  Future<void> _updateLighting() async {
    final now = DateTime.now();

    final sliderHours = _hour.toInt();
    final localDt = DateTime(
      now.year,
      now.month,
      now.day,
      sliderHours,
    );
    final dt = localDt.toUtc();

    // 4) Now compute sun position
    final sun = _getSunOutput(
      dt,
      widget.initialPosition?.lat ?? stangeNiklasKeller.lat,
      widget.initialPosition?.long ?? stangeNiklasKeller.long,
    );
    final azimuth = sun.azimuth;
    final altitude = 90.0 - sun.zenith;

    final ambient = AmbientLight(
      id: 'ambient',
      color: Colors.white.value,
    );
    final directional = DirectionalLight(
      id: 'directional',
      color: Colors.white.value,
      direction: [azimuth, 90 - altitude],
      castShadows: true,
    );
    await mapboxMap!.style.setLights(ambient, directional);
  }

  SPAOutput _getSunOutput(DateTime time, double lat, double lon) {
    final params = SPAParams(time: time, latitude: lat, longitude: lon);
    return spaCalculate(params);
  }

But now I would love to combine these two. I tried playing around with the colors when setting the light, but didnt come anywhere close to the style of the presets.

How can I use the style of the presets while also setting custom shadow?

Here is a small reproducable example:

final AppPositionModel stangeNiklasKeller = AppPositionModel(
  lat: 49.607729,
  long: 11.004926,
);

class AppMapView extends StatefulWidget {
  final AppPositionModel? initialPosition;
  const AppMapView({
    super.key,
    required this.initialPosition,
  });
  @override
  State<StatefulWidget> createState() => AppMapViewState();
}

class AppMapViewState extends State<AppMapView> {
  MapboxMap? mapboxMap;
  double _hour = 12.0;

  @override
  void initState() {
    super.initState();
    MapboxOptions.setAccessToken(Env.mapboxAccessToken);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        MapWidget(
          cameraOptions: CameraOptions(
            center: Point(
              coordinates: Position(
                widget.initialPosition?.long ?? stangeNiklasKeller.long,
                widget.initialPosition?.lat ?? stangeNiklasKeller.lat,
              ),
            ),
            zoom: 15.0,
          ),
          onMapCreated: _onMapCreated,
        ),
        Align(
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownButton<String>(
                value: lightPreset,
                focusColor: blue,
                dropdownColor: white,
                items: [
                  DropdownMenuItem(value: 'dawn', child: Text('Dawn')),
                  DropdownMenuItem(value: 'day', child: Text('Day')),
                  DropdownMenuItem(value: 'dusk', child: Text('Dusk')),
                  DropdownMenuItem(value: 'night', child: Text('Night')),
                ],
                onChanged: (value) {
                  setState(() {
                    lightPreset = value!;
                    _updateMapStyle();
                  });
                },
              ),
              SizedBox(
                height: 50,
                width: 200,
                child: Slider(
                  min: 0,
                  max: 23.99,
                  divisions: 24,
                  value: _hour,
                  label: '${_hour.toInt()}:00',
                  onChanged: (h) {
                    setState(() => _hour = h);
                    _updateLighting();
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  String lightPreset = 'day';

  void _updateMapStyle() {
    var configs = {
      "lightPreset": lightPreset,
    };
    mapboxMap!.style.setStyleImportConfigProperties(
      "basemap",
      configs,
    );
  }

  Future<void> _onMapCreated(MapboxMap mapboxMap) async {
    this.mapboxMap = mapboxMap;
    mapboxMap.location.updateSettings(
      LocationComponentSettings(
        enabled: true,
        puckBearingEnabled: true,
      ),
    );

    await wait(200.milliseconds);
    mapboxMap.flyTo(
      CameraOptions(
        center: Point(
          coordinates: Position(
            widget.initialPosition?.long ?? stangeNiklasKeller.long,
            widget.initialPosition?.lat ?? stangeNiklasKeller.lat,
          ),
        ),
        zoom: 15.0,
      ),
      MapAnimationOptions(),
    );
  }

  Future<void> _updateLighting() async {
    final now = DateTime.now();

    final sliderHours = _hour.toInt();
    final localDt = DateTime(
      now.year,
      now.month,
      now.day,
      sliderHours,
    );
    final dt = localDt.toUtc();

    // 4) Now compute sun position
    final sun = _getSunOutput(
      dt,
      widget.initialPosition?.lat ?? stangeNiklasKeller.lat,
      widget.initialPosition?.long ?? stangeNiklasKeller.long,
    );
    final azimuth = sun.azimuth;
    final altitude = 90.0 - sun.zenith;

    final ambient = AmbientLight(
      id: 'ambient',
      color: Colors.white.value,
    );
    final directional = DirectionalLight(
      id: 'directional',
      color: Colors.white.value,
      direction: [azimuth, 90 - altitude],
      castShadows: true,
    );
    await mapboxMap!.style.setLights(ambient, directional);
  }

  SPAOutput _getSunOutput(DateTime time, double lat, double lon) {
    final params = SPAParams(time: time, latitude: lat, longitude: lon);
    return spaCalculate(params);
  }

}

Start by running the provided Flutter reproduction and reading the calls to setStyleImportConfigProperties("basemap", ...) and setLights in AppMapViewState. Determine whether the lightPreset styling can be combined with the custom directional shadow, and verify that changing the preset and time slider produces the intended lighting and shadows.