Как я могу получить переменные из моей темы со стилизованными компонентами и использовать их в astroturf css

Question

Я столкнулся с "проблемой", из-за которой мне кажется, что я выбрал не тот стек для того, что мне нужно. Я новичок в React & Typescript, но мне было интересно, знает ли кто-нибудь способ сделать следующее.

theme.ts

      import { createGlobalStyle } from "styled-components"
import { ThemeType } from "../types/theme"

export const lightTheme = {
    background: "#F2F3EF",
    text: "#252524",
}

export const darkTheme = {
    background: "#1C282B",
    text: "#F2F3EF",
}

export const GlobalStyles = createGlobalStyle<{ theme: ThemeType }>`
  body {
    margin: 0;
    margin-left: 300px;
    background: ${({ theme }) => theme.background};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
  }
`

styles.ts

      import { css } from "astroturf"
import { useTheme } from "styled-components"

const theme = useTheme()

const styles = css`
    .navContainer {
        width: 300px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .themeToggle {
        position: absolute;
        bottom: 0;
        text-align: left;
        padding: 15px;
    }

    .logo {
        padding: 20px;
    }

    .menuItems {
        a {
            text-decoration: none;
            display: block;
            padding: 5px;
        }
        a.light:hover {
            background-color: ${({ theme }) => theme.background};
        }
        a.dark:hover {
            background-color: ${({ theme }) => theme.background};
        }
    }
`
export default styles

Я получаю следующее сообщение об ошибке, которое имеет смысл

Не удалось разрешить интерполяцию значения, возвращаемого css имени класса или стилизованного компонента. Все компоненты с интерполированным стилем должны находиться в одном файле, а значения должны быть статически определены во время компиляции.

Я запускаю webpack с postcss, но также пытаюсь использовать темы из компонентов стиля. Конечная цель - использовать тумблер, чтобы изменить тему с светлой / темной, но мне просто нужно руководство о том, какой подход я должен использовать. Ясно, что реализация css-in-js с astroturf для postcss будет проблематичной из-за того, как я использовал темы, но я хотел спросить вас, ребята, прежде чем я его вырву.

Может быть простое решение, которого мне не хватает. Я попытался просто импортировать переменные light и dark, а затем попытаться использовать их в моей строке css, но это тоже не работает.

заранее спасибо