Commit 13221fcd authored by Simen Kristoffersen's avatar Simen Kristoffersen
Browse files

Endret fargetema for ToggleButton

parent 5396b37a
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,
......
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,
},
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment