diff --git a/components/settings.js b/components/settings.js
index 49172db04b901ce2430a27bfc8f046483b278234..7b0d0479a79b49457371109f8eecb63c8ffc18da 100644
--- a/components/settings.js
+++ b/components/settings.js
@@ -10,7 +10,7 @@ import Slider from '@ptomasroos/react-native-multi-slider'
 import Share from 'react-native-share'
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
 import rnfs from 'react-native-fs'
-import styles from '../styles/index'
+import styles, { secondaryColor } from '../styles/index'
 import config from '../config'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
@@ -106,7 +106,7 @@ class TempSlider extends Component {
             height:10,
           }}
           markerStyle={{
-            backgroundColor: '#351c4d',
+            backgroundColor: secondaryColor,
             height: 20,
             width: 20,
             borderRadius: 100,
diff --git a/styles/index.js b/styles/index.js
index 2019b9c69894248ba50f7abb1a09e85739546db6..43a55996d0c501ca2b510644302fd010cd1091fc 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -163,13 +163,13 @@ export default StyleSheet.create({
     fontWeight: 'bold'
   },
   settingsButton: {
-    backgroundColor: '#351c4d',
+    backgroundColor: secondaryColor,
     padding: 10,
     alignItems: 'center',
     margin: 10
   },
   settingsButtonText: {
-    color: 'white'
+    color: fontOnPrimaryColor
   },
   statsRow: {
     flexDirection: 'row',