Final changes for now

components/styles/themedropdown.tsx

@@ -12,16 +12,14 @@ interface ActivePropType {
 export const ThemeDropDown = styled.div`
   margin-left: 1%;
   min-width: 180px;
-  color: ${({ theme }) => theme.colors.primary}
-  display: flex;
-  flex-direction: column;
+  color: ${({ theme }) => theme.colors.primary};
 `
 
 export const ThemeDropDownButton = styled.button<DisplayPropType>`
   width: 160px;
   border: 2px solid;
   border-radius: 5px;
-  background-color: ${props => props.focus ? 
+  background-color: ${ props => props.focus ? 
     ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
     ({ theme }) => theme.colors.background};
   padding: 2px 6px;
@@ -30,7 +28,7 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
     theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : 
     ({ theme }) => theme.colors.primary};
 
-  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background;
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
   transition-timing-function: ease;
   transition-duration: 0.15s;
   transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
@@ -52,8 +50,6 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
 export const ThemeDropDownOptions = styled.div<DisplayPropType>`
   position: absolute;
   color: ${({ theme }) => theme.colors.primary};
-
-  background-color: ${({ theme }) => theme.colors.background};
   background-image: ${({ theme }) => theme.backgroundImage ? 
   "linear-gradient("
   + theme.colors.background + "," + theme.colors.background +
@@ -70,7 +66,7 @@ export const ThemeDropDownOptions = styled.div<DisplayPropType>`
   border-radius: 5px;
   border-top-left-radius: 0px; border-top-right-radius: 0px;
   z-index: 1;
-  overflow: hidden;
+  overflow: ${ props => props.show ? "scroll" : "hidden" };
   max-height: ${ props => props.show ? "20%" : "0%" };
   visibility: ${ props => props.show ? "visible" : "hidden" };
 

public/data/themes.json

@@ -49,7 +49,7 @@
       }
     },
     {
-      "themeName": "Norrsken",
+      "themeName": "Nordlys",
       "themeId": 4,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
       "invertButtons": true,
@@ -63,6 +63,22 @@
         "loading": "#0063C7",
         "offline": "#ff0000"
       }
+    },
+    {
+      "themeName": "dev",
+      "themeId": 5,
+      "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
+      "invertButtons": true,
+      "colors": {
+        "background": "#0000",
+        "backgroundAlt": "#0000",
+        "primary": "#ccc",
+        "secondary": "#00C7C7",
+        "text": "#000",
+        "online": "#00ff00",
+        "loading": "#0063C7",
+        "offline": "#ff0000"
+      }
     }
   ]
 }