App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components";
import theme from "styled-theming";
import { Provider as ReduxProvider } from "react-redux";
import store from "./store";

export const backgroundColor = theme("theme", {
  light: "#fff",
  dark: "#2d2d2d",
});

export const textColor = theme("theme", {
  light: "#000",
  dark: "#fff",
});

const Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  background-color: ${backgroundColor};
  color: ${textColor};
`;

const App = () => (
  <ReduxProvider store={store}>
    <ThemeProvider theme={{ theme: "light" }}>
      <Container>
        <h1>My Dark Theme Is Better Than Yours</h1>
        <p>
          <input type="checkbox"></input> Use Dark Theme
        </p>
      </Container>
    </ThemeProvider>
  </ReduxProvider>
);

export default App;