How can I get variables from my Theme with styled components and use within astroturf css

Question

I've come across a "problem" which is making me feel like I've chosen the wrong stack for what I'd like. I'm pretty new with React & Typescript but I wondered if anyone knew of a way too do the following.

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

I get the following error message, which DOES make sense

Could not resolve interpolation to a value, css returned class name, or styled component. All interpolated styled components must be in the same file and values must be statically determinable at compile time

I'm running webpack with postcss but also, trying to use themes from style-components. The end goal is to use a toggle switch to change theme from light/dark but I just need some guidance on what approach I should be taking. Clearly implementing css-in-js with astroturf for postcss is going to be problematic with the way I've used themes but I wanted to ask you guys before I tear it out.

There could be an easy solution which I'm missing. I have tried just importing the variables light and dark and then trying to use those within my css string but, this also doesnt work.

Thanks in advance