Endret fargetema for ToggleButton

components/ToggleButton.tsx

-import React from "react";
-import { useState } from "react";
-import { StyleSheet, ViewStyle } from "react-native";
-import { TouchableOpacity } from "react-native";
-import { useThemeColor } from "./common/Themed";
-import glyphmap from "@expo/vector-icons/build/MaterialIcons";
-import MaterialIcons from "@expo/vector-icons/build/MaterialIcons";
+import React from 'react';
+import { useState } from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import { useThemeColor } from './common/Themed';
+import glyphmap from '@expo/vector-icons/build/MaterialIcons';
+import MaterialIcons from '@expo/vector-icons/build/MaterialIcons';
 
 type IconMap = typeof glyphmap.glyphMap;
 
@@ -29,16 +29,22 @@ const ToggleButton: React.FC<IProps> = (props: IProps) => {
         styles.button,
         props.style,
         {
-          backgroundColor: useThemeColor({}, "complement"),
-          borderColor: useThemeColor({}, "border"),
+          backgroundColor: useThemeColor({}, 'component'),
+          borderColor: useThemeColor({}, 'border'),
         },
       ]}
       onPress={() => handleClick()}
     >
       {toggled ? (
-        <MaterialIcons name={props.activeIcon} style={styles.icon} />
+        <MaterialIcons
+          name={props.activeIcon}
+          style={[styles.icon, { color: useThemeColor({}, 'inputText') }]}
+        />
       ) : (
-        <MaterialIcons name={props.inactiveIcon} style={styles.icon} />
+        <MaterialIcons
+          name={props.inactiveIcon}
+          style={[styles.icon, { color: useThemeColor({}, 'inputText') }]}
+        />
       )}
     </TouchableOpacity>
   );
@@ -51,11 +57,11 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 15,
     paddingBottom: 1,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   icon: {
-    color: "#fefefe",
+    color: '#fefefe',
     paddingVertical: 0,
     marginVertical: 0,
     fontSize: 20,

constants/Colors.ts

-const tintColorLight = "#2f95dc";
-const tintColorDark = "#fff";
+const tintColorLight = '#2f95dc';
+const tintColorDark = '#fff';
 
 export default {
   light: {
-    text: "#000",
-    inputText: "#333",
-    background: "#fff",
-    component: "rgb(240, 240, 240)",
-    border: "rgb(221, 221, 221)",
-    complement: "#177ddc",
+    text: '#000',
+    inputText: '#333',
+    background: '#fff',
+    component: 'rgb(240, 240, 240)',
+    border: 'rgb(221, 221, 221)',
+    complement: '#177ddc',
     tint: tintColorLight,
-    tabIconDefault: "#ccc",
+    tabIconDefault: '#ccc',
     tabIconSelected: tintColorLight,
   },
   dark: {
-    text: "#fff",
-    inputText: "rgb(220, 220, 220)",
-    background: "#000",
-    component: "rgb(18, 18, 18)",
-    border: "rgb(39, 39, 41)",
-    complement: "#177ddc",
+    text: '#fff',
+    inputText: 'rgb(220, 220, 220)',
+    background: '#000',
+    component: 'rgb(18, 18, 18)',
+    border: 'rgb(39, 39, 41)',
+    complement: '#177ddc',
     tint: tintColorDark,
-    tabIconDefault: "#ccc",
+    tabIconDefault: '#ccc',
     tabIconSelected: tintColorDark,
   },
 };