F1eX

Нашел для себя наиболее оптимальное решение, когда оперировать классами и css-переменными не приходится, но что-то подобное очень хочется, а пробрасывать кучу пропсов или менять структуру переменных - нельзя.
Если вдруг кто-то когда-то наткнется на этот вопрос - может будет полезным. Ответ - пакет styled-theming

import styled, {ThemeProvider} from 'styled-components';
import theme from 'styled-theming';

const backgroundColor = theme('mode', {
  light: '#f1c40f',
  dark: '#f39c12',
});

const Button = styled.div`
  background-color: ${backgroundColor};
`;

export default function App() {
  return (
    <ThemeProvider theme={{ mode: 'light' }}>
      <Button>
        Primary Button
      </Button>
    </ThemeProvider>
  );
}