Javascript 对提供程序不起作用'；无法导入预期的变量

我最近开始了我的react项目，我尝试使用react、redux和axios制作前端。我想让我的应用程序具有暗模式和亮模式

但当我试图使用

ThemeProvider

组件在我的新闻列表中应用主题时，我偶然发现了这个问题。但它不起作用

我希望我的主题是这样的

但它最终没有实现任何深色样式属性

我的app/index.js看起来像这样

import React, { Component } from 'react';
import { colorsDark } from 'styles/palette';
import { ThemeProvider } from 'styled-components';
import List from 'components/List';

import { Wrapper, Title } from './styles';

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={colorsDark}>
        <div>
          <Wrapper>
            <Title>Hacker News</Title>
            <List/>
          </Wrapper>
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

export const colorsDark = {
  background: '#272727',
  backgroundSecondary: '#393C3E',
  text: '#bfbebe',
  textSecondary: '#848886',
  border: '#272727',
};

export const colorsLight = {
  background: '#EAEAEA',
  backgroundSecondary: '#F8F8F8',
  text: '#848886',
  textSecondary: '#aaaaaa',
  border: '#EAEAEA',
};

下面是我在CodeSandBox上的完整回购项目

先谢谢你