How to fix this lerp method override in creating a customized ThemeData of my own?

Note: Improvements to this answer as separate answers or comments are welcome. I am not marking my answer as accepted because there might be better solution with others. Currently I'm not satisfied with how I'm having to null check and assign a default value as:

TextStyle mcat02 =
Theme.of(context).myCustomThemeData?.specialTextStyle ??
TextStyle().copyWith(color: Colors.green);

Update, to above, I've learned that we can type-case the right hand side as follows (which seems simpler):

TextStyle mcat03 =
Theme.of(context).myCustomThemeData?.specialTextStyle as TextStyle;

I managed to get things working. I am posting it as answer for documentation purpose, if it might help others.

In this main.dart file, in one of the Text widget I've directly used the class MyCustomThemeData and consequently imported import 'package:extending_flutter_themedata/themes/extending_themedata/my_custom_themedata.dart'; which is not how we want to access the theme. The alternative method shown using the TextStyle mcat02 = ... ... is the preferred way.

The theme for both light and dark modes apply. We may check them with the following command in the terminal:

adb shell "cmd uimode night yes" // dark mode
adb shell "cmd uimode night no" // light mode

main.dart:

import 'package:extending_flutter_themedata/themes/extending_themedata/my_custom_themedata.dart';
import 'package:extending_flutter_themedata/themes/theme.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.system,
      theme: MyCustomAppTheme.lightTheme,
      darkTheme: MyCustomAppTheme.darkTheme,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    /*
    // Could not get the following working:
    MyCustomAppTheme? mcat = Theme.of(context).extension<MyCustomAppTheme>();
    TextStyle myTextStyle = mcat.specialTextStyle;
    */

    // This one works:
    TextStyle mcat02 =
        Theme.of(context).myCustomThemeData?.specialTextStyle ??
        TextStyle().copyWith(color: Colors.green);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: const Text("Extending ThemeData"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: [
              Text(
                "Hello world",
                style: MyCustomThemeData.of(context).specialTextStyle,
              ),
              Text("Hello world", style: mcat02),
              Text("Hello world", style: mcat02.copyWith(color: Colors.pink)),
            ],
          ),
        ),
      ),
    );
  }
}

theme.dart:

import 'package:extending_flutter_themedata/themes/extending_themedata/my_custom_themedata.dart';
import 'package:flutter/material.dart';

class MyCustomAppTheme {
  MyCustomAppTheme._();

  static ThemeData lightTheme = ThemeData(
    useMaterial3: true,
    fontFamily: "Roboto",
    brightness: Brightness.light,
    extensions: <ThemeExtension<dynamic>>[
      MyCustomThemeData(
        customBackgroundColor: Colors.pink,
        specialTextStyle: const TextStyle(
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
          color: Colors.amber,
        ),
      ),
    ],
  );

  static ThemeData darkTheme = ThemeData(
    useMaterial3: true,
    fontFamily: "Roboto",
    brightness: Brightness.dark,
    extensions: <ThemeExtension<dynamic>>[
      MyCustomThemeData(
        customBackgroundColor: Colors.pink,
        specialTextStyle: const TextStyle(
          fontSize: 30.0,
          fontWeight: FontWeight.bold,
          color: Colors.tealAccent,
        ),
      ),
    ],
  );
}

my_custom_themedata.dart:

import 'package:flutter/material.dart';

class MyCustomThemeData extends ThemeExtension<MyCustomThemeData> {
  final Color customBackgroundColor;
  final TextStyle specialTextStyle;

  MyCustomThemeData({
    this.customBackgroundColor = Colors.blue,
    this.specialTextStyle = const TextStyle(),
  });

  @override
  MyCustomThemeData copyWith({
    Color? customBackgroundColor,
    TextStyle? specialTextStyle,
  }) {
    return MyCustomThemeData(
      customBackgroundColor:
          customBackgroundColor ?? this.customBackgroundColor,
      specialTextStyle: specialTextStyle ?? this.specialTextStyle,
    );
  }

  static MyCustomThemeData of(BuildContext context) {
    return Theme.of(context).extension<MyCustomThemeData>()!;
  }

  @override
  MyCustomThemeData lerp(ThemeExtension<MyCustomThemeData>? other, double t) {
    if (other is! MyCustomThemeData) {
      return this;
    }

    return MyCustomThemeData(
      customBackgroundColor:
          Color.lerp(customBackgroundColor, other.customBackgroundColor, t)!,
      specialTextStyle:
          TextStyle.lerp(specialTextStyle, other.specialTextStyle, t)!,
    );
  }

  static const id = 'my_custom_theme_data';
}

extension ThemeDataExtension on ThemeData {
  MyCustomThemeData? get myCustomThemeData => extension<MyCustomThemeData>();

  ThemeData copyWithCustom({MyCustomThemeData? myCustomThemeData}) {
    return copyWith(
      extensions: <ThemeExtension<dynamic>>{
        if (myCustomThemeData != null) myCustomThemeData,
      },
    );
  }

  /*

  static ThemeData lerp(ThemeData? a, ThemeData? b, double t) {
    return ThemeData.lerp(a, b, t)?.copyWithCustom(
      myCustomThemeData: MyCustomThemeData.lerp(
        a?.extension<MyCustomThemeData>(),
        b?.extension<MyCustomThemeData>(),
        t,
      ),
    );
  }

  */
}

In my_custom_themedata.dart, I am just commenting out the static ThemeData lerp definition. Any answer fixing are welcome.