It's described in the official documentation.

In a .d.ts file add this:

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
     borderRadius: string;
     color: string;
  }
}

I suppose you problem is in light-mode.tsx. How can i see you use typescript in that case need create a declarations file and DefaultTheme interface. example

Create a declarations file TypeScript definitions for styled-components can be extended by using declaration merging since version v4.1.4 of the definitions. documentation

light-mode.tsx

import { DefaultTheme } from 'styled-components';

export const lightTheme: DefaultTheme = {
  colors: {
    cardTitleColor: red;
  }
};

Weird that you're having any for your theme typing.

I'm doing it in a close but different way:

styled-component.d.ts

// import original module declarations
import 'styled-components';
import { ITheme } from './styles/theme';

// and extend them!
declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends ITheme {}
}

I'm extending DefaultTheme with my ITheme object, which is something like that:

import {
  borderRadius,
  boxShadows,
  IBorderRadius,
  IBoxShadows,
  ITransitions,
  IZIndexes,
  transitions,
  zIndexes,
} from './base';
import { colors, IColors } from './colors';
import { ISizes, sizes } from './sizes';

export interface ITheme {
  colors: IColors;
  sizes: ISizes;
  boxShadows: IBoxShadows;
  zIndexes: IZIndexes;
  borderRadius: IBorderRadius;
  transitions: ITransitions;
}

export const Theme: ITheme = {
  colors,
  sizes,
  boxShadows,
  zIndexes,
  borderRadius,
  transitions,
};

And I'm using <ThemeProvider> from import { ThemeProvider } from 'styled-components';

<ThemeProvider theme={Theme}>

I'm using nearly the same versions as you:

"styled-components": "^5.3.3",
"@types/styled-components": "^5.1.19",

And here is my tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "src",
    "paths": {
      "~/*": ["./*"]
    }
  },
  "include": [
    "src"
  ]
}