Add light/dark theme switching

src/components/app.tsx

@@ -1,12 +1,11 @@
 import Icon from "./icon";
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 
 const AppContainer = styled.a`
   display: flex;
   flex: 1 0 auto;
   padding: 1rem;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
   font-weight: 500;
   text-transform: uppercase;
   margin: 0;
@@ -37,7 +36,7 @@ const AppDescription = styled.p`
   margin: 0;
   font-size: 0.65rem;
   font-weight: 400;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
 `;
 
 export interface IAppProps {

src/components/bookmarks.tsx

@@ -6,7 +6,6 @@ import {
   ListContainer,
   SubHeadline,
 } from "./elements";
-import selectedTheme from "../lib/theme";
 
 const GroupContainer = styled.div`
   display: flex;
@@ -18,7 +17,7 @@ const GroupContainer = styled.div`
 const Bookmark = styled.a`
   font-weight: 400;
   text-decoration: none;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
   padding-top: 0.75rem;
   font-size: 0.9rem;
 

src/components/elements.tsx

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 
 export const ListContainer = styled.div`
   padding: 2rem 0;
@@ -11,7 +10,7 @@ export const Headline = styled.h2`
   text-transform: uppercase;
   margin: 0;
   font-size: 1.5rem;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 export const SubHeadline = styled.h3`
@@ -19,7 +18,7 @@ export const SubHeadline = styled.h3`
   font-weight: 700;
   text-transform: uppercase;
   margin: 0;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 export const ItemList = styled.ul`
@@ -44,8 +43,8 @@ export const Button = styled.button`
   text-transform: uppercase;
   font-family: Roboto, sans-serif;
   font-weight: 400;
-  border: 1px solid ${selectedTheme.mainColor};
-  color: ${selectedTheme.mainColor};
+  border: 1px solid ${(props) => props.theme.mainColor};
+  color: ${(props) => props.theme.mainColor};
   background: none;
 
   min-height: 2rem;

src/components/greeter.tsx

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 
 const GreeterContainer = styled.div`
   padding: 2rem 0;
@@ -9,7 +8,7 @@ const GreetText = styled.h1`
   font-weight: 900;
   font-size: 3rem;
   margin: 0.5rem 0;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 const DateText = styled.h3`
@@ -17,7 +16,7 @@ const DateText = styled.h3`
   font-size: 1rem;
   text-transform: uppercase;
   margin: 0;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
 `;
 
 export interface IGreeterComponentProps {

src/components/icon.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 
 interface IIconProps {
   name: string;
@@ -40,7 +39,7 @@ const IconContainer = styled.i`
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "liga";
   font-size: ${(props) => props.about};
-  color: ${(props) => props.color};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 /**
@@ -49,7 +48,7 @@ const IconContainer = styled.i`
  * @returns {React.ReactNode} the icon node
  */
 export const Icon = ({ name, size }: IIconProps) => (
-  <IconContainer color={selectedTheme.mainColor} about={size}>
+  <IconContainer about={size}>
     {name}
   </IconContainer>
 );

src/components/imprint.tsx

@@ -1,6 +1,5 @@
 import Modal from "./modal";
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 import { ListContainer, ItemList, Headline, SubHeadline } from "./elements";
 
 const ModalSubHeadline = styled(SubHeadline)`
@@ -12,14 +11,14 @@ const Text = styled.p`
   padding: 0;
   margin: 0;
 
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 const Link = styled.a`
   display: block;
   padding: 0;
 
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
   text-decoration: none;
 
   &:hover {

src/components/modal.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import selectedTheme from "../lib/theme";
 
 import { Headline } from "./elements";
 import { IconButton } from "./icon";
@@ -12,8 +11,8 @@ const ModalContainer = styled.div`
   padding: 1rem;
   transform: translate(-50%, -50%);
   z-index: 10;
-  border: 1px solid ${selectedTheme.mainColor};
-  background-color: ${selectedTheme.backgroundColor};
+  border: 1px solid ${(props) => props.theme.mainColor};
+  background-color: ${(props) => props.theme.backgroundColor};
 `;
 
 const Text = styled.p`
@@ -22,7 +21,7 @@ const Text = styled.p`
 
   font-weight: 400;
   text-decoration: none;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
   padding-top: 0.75rem;
   font-size: 0.9rem;
 

src/components/searchBar.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import selectedTheme from "../lib/theme";
-
 import { Button } from "./elements";
 
 const Search = styled.form`
@@ -21,11 +19,11 @@ const SearchInput = styled.input`
   font-size: 1rem;
 
   border: none;
-  border-bottom: 1px solid ${selectedTheme.accentColor};
+  border-bottom: 1px solid ${(props) => props.theme.accentColor};
   border-radius: 0;
 
   background: none;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 
   :focus {
     outline: none;

src/components/select.tsx

@@ -8,6 +8,7 @@ export interface IItemProps {
 export interface ISelectProps {
   items: Array<IItemProps>;
   onChange: (item: any) => void;
+  current: string;
   className?: string;
 }
 
@@ -19,7 +20,7 @@ const update = (
   onChange(items.find((item) => item.value.toString() === e.target.value));
 };
 
-const Select = ({ items, onChange, className }: ISelectProps) => (
+const Select = ({ items, onChange, current, className }: ISelectProps) => (
   <select
     data-testid="select"
     onChange={(e) => update(items, onChange, e)}
@@ -30,6 +31,7 @@ const Select = ({ items, onChange, className }: ISelectProps) => (
         data-testid={"option-" + index}
         key={[label, index].join("")}
         value={value.toString()}
+        selected={current === label}
       >
         {label}
       </option>

src/components/settings.tsx

@@ -4,25 +4,24 @@ import styled from "styled-components";
 import Select from "./select";
 
 import { ISearchProps } from "./searchBar";
-import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
+import { setTheme, IThemeProps, getTheme } from "../lib/theme";
 import { Button, SubHeadline } from "./elements";
 
 import Modal from "./modal";
 
 export const FormContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto auto;
+  margin-bottom: 1em;
 `;
 
 export const Table = styled.table`
   font-weight: 400;
   background: none;
   width: 100%;
-  color: ${selectedTheme.mainColor};
+  color: ${(props) => props.theme.mainColor};
 `;
 
 export const TableRow = styled.tr`
-  border-bottom: 1px solid ${selectedTheme.mainColor};
+  border-bottom: 1px solid ${(props) => props.theme.mainColor};
 `;
 
 export const TableCell = styled.td`
@@ -41,18 +40,23 @@ export const Section = styled.div`
 
 export const SectionHeadline = styled(SubHeadline)`
   width: 100%;
-  border-bottom: 1px solid ${selectedTheme.accentColor};
+  border-bottom: 1px solid ${(props) => props.theme.accentColor};
   margin-bottom: 0.5rem;
 `;
 
 const Text = styled.p`
   font-weight: 700;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
 `;
 
 const Code = styled.p`
   font-family: monospace;
-  color: ${selectedTheme.accentColor};
+  color: ${(props) => props.theme.accentColor};
+`;
+
+const ThemeHeader = styled.p`
+  grid-column: 1 / 4;
+  color: ${(props) => props.theme.accentColor};
 `;
 
 const ThemeSelect = styled(Select)`
@@ -62,12 +66,12 @@ const ThemeSelect = styled(Select)`
   text-transform: uppercase;
   font-family: Roboto, sans-serif;
   font-weight: 400;
-  border: 1px solid ${selectedTheme.mainColor};
-  color: ${selectedTheme.mainColor};
+  border: 1px solid ${(props) => props.theme.mainColor};
+  color: ${(props) => props.theme.mainColor};
   background: none;
 
   & > option {
-    background-color: ${selectedTheme.backgroundColor};
+    background-color: ${(props) => props.theme.backgroundColor};
   }
 `;
 
@@ -82,7 +86,12 @@ interface ISettingsProps {
  * @param {ISearchProps} search - the list of search providers
  */
 const Settings = ({ themes, search }: ISettingsProps) => {
-  const [newTheme, setNewTheme] = useState<IThemeProps>();
+  const [newLightTheme, setNewLightTheme] = useState<IThemeProps>();
+  const [newDarkTheme, setNewDarkTheme] = useState<IThemeProps>();
+
+  const currentLightTheme = getTheme("light").label;
+  const currentDarkTheme = getTheme("dark").label;
+  console.log(currentLightTheme, currentDarkTheme);
 
   if (themes || search) {
     return (
@@ -91,25 +100,34 @@ const Settings = ({ themes, search }: ISettingsProps) => {
           <Section>
             <SectionHeadline>Theme:</SectionHeadline>
             <FormContainer>
+              <ThemeHeader>Light</ThemeHeader>
               <ThemeSelect
                 items={themes}
-                onChange={(theme: IThemeProps) => setNewTheme(theme)}
+                onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
+                current={currentLightTheme}
+              ></ThemeSelect>
+              <ThemeHeader>Dark</ThemeHeader>
+              <ThemeSelect
+                items={themes}
+                onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
+                current={currentDarkTheme}
               ></ThemeSelect>
-              <Button
-                data-testid="button-submit"
-                onClick={() => {
-                  if (newTheme) setTheme(newTheme);
-                }}
-              >
-                Apply
-              </Button>
-              <Button
-                data-testid="button-refresh"
-                onClick={() => window.location.reload()}
-              >
-                Refresh
-              </Button>
             </FormContainer>
+            <Button
+              data-testid="button-submit"
+              onClick={() => {
+                if (newLightTheme) setTheme("light", newLightTheme);
+                if (newDarkTheme) setTheme("dark", newDarkTheme);
+              }}
+            >
+              Apply
+            </Button>
+            <Button
+              data-testid="button-refresh"
+              onClick={() => window.location.reload()}
+            >
+              Refresh
+            </Button>
           </Section>
         )}
         {search && (