diff --git a/src/components/Board/Tile/index.tsx b/src/components/Board/Tile/index.tsx
index 09d2930..29eab87 100644
--- a/src/components/Board/Tile/index.tsx
+++ b/src/components/Board/Tile/index.tsx
@@ -2,22 +2,26 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { darktheme } from '../../../data/color';
+import { ColorSchemeType } from '../../../utils/types';
 import { screenWidth, TileStyles } from './styles';
 
+interface ReduxProps {
+    colortheme: ColorSchemeType,
+}
+
 interface TileProps {
     dim: number
     number: number
 }
 
-class Tile extends React.Component<TileProps> {
+class Tile extends React.Component<ReduxProps & TileProps> {
     render() {
-        let backgroundColor = darktheme.tileColors[this.props.number.toString()] || darktheme.tileColors.large;
+        let backgroundColor = this.props.colortheme.tileColors[this.props.number.toString()] || this.props.colortheme.tileColors.large;
         let sides = (screenWidth * 0.8) / this.props.dim; 
 
         return (
             <View style={{ ...TileStyles.root, backgroundColor, height: sides, width: sides }}>
-                <Text style={{ ...TileStyles.text, color: darktheme.textColor }}>
+                <Text style={{ ...TileStyles.text, color: this.props.colortheme.textColor }}>
                     {this.props.number === -1 ? '' : this.props.number}
                 </Text>
             </View>
@@ -26,7 +30,7 @@ class Tile extends React.Component<TileProps> {
 }
 
 const mapStateToProps = state => ({
-
+    colortheme: state.colortheme,
 });
 
 export default connect(mapStateToProps)(Tile);
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index 1123cb2..ef13a0f 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
-import { Directions, FlingGestureHandler } from 'react-native-gesture-handler';
+import { Directions, FlingGestureHandler, } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
 
 import GameoverModal from '../GameoverModal';
 import Tile from './Tile';
 
-import { darktheme } from '../../data/color';
 import { BoardStyles } from './styles';
 
 import Board from '../../game/board';
 import { store } from '../../redux/store';
-import { updateGame, updateHistory, updateRecords } from '../../redux/action';
+import { updateGame, updateHistory, updateRecords, } from '../../redux/action';
 import { keygen } from '../../utils/keygen';
 import { Direction } from '../../utils/enums';
-import { GameConfig, RecordType } from '../../utils/types';
+import { ColorSchemeType, GameConfig, RecordType, } from '../../utils/types';
 
 interface ReduxProps {
+    colortheme: ColorSchemeType,
     game: GameConfig,
     records: Array<RecordType>
 }
@@ -77,7 +77,7 @@ class BoardView extends React.Component<ReduxProps> {
                     <FlingGestureHandler direction={Directions.DOWN} onEnded={() => this.swipe(Direction.down)} >
                         <FlingGestureHandler direction={Directions.LEFT} onEnded={() => this.swipe(Direction.left)}>
                             <FlingGestureHandler direction={Directions.RIGHT} onEnded={() => this.swipe(Direction.right)}>
-                                <View style={{ ...BoardStyles.root, backgroundColor: darktheme.boardColor }}>
+                                <View style={{ ...BoardStyles.root, backgroundColor: this.props.colortheme.boardColor }}>
                                     {this.props.game.board.map(row => {
                                         return (
                                             <View key={keygen()} style={BoardStyles.row}>
@@ -107,6 +107,7 @@ class BoardView extends React.Component<ReduxProps> {
 }
 
 const mapStateToProps = state => ({
+    colortheme: state.colortheme,
     game: state.game,
     records: state.records,
 });
diff --git a/src/components/GameoverModal/index.tsx b/src/components/GameoverModal/index.tsx
index 505afc7..7907444 100644
--- a/src/components/GameoverModal/index.tsx
+++ b/src/components/GameoverModal/index.tsx
@@ -3,10 +3,13 @@ import { Text, TouchableOpacity, View, } from 'react-native';
 import Modal from 'react-native-modal';
 import { connect } from 'react-redux';
 
-import { darktheme } from '../../data/color';
 import { ModalStyles } from './styles';
 
-import { GameConfig } from '../../utils/types';
+import { ColorSchemeType } from '../../utils/types';
+
+interface ReduxProps {
+    colortheme: ColorSchemeType,
+}
 
 interface ModalProps {
     onSaveGame: () => void,
@@ -16,7 +19,7 @@ interface ModalProps {
     open: boolean,
 }
 
-class BoardView extends React.Component<ModalProps> {
+class BoardView extends React.Component<ReduxProps & ModalProps> {
 
     render() {
         return (
@@ -25,35 +28,35 @@ class BoardView extends React.Component<ModalProps> {
                 isVisible={this.props.open}
             >
                 <View style={ModalStyles.modalRoot}>
-                    <Text style={{ ...ModalStyles.text, color: darktheme.textColor }}>
-                        <Text style={{ color: darktheme.accentColor }}>G  A  M  E</Text>  O  V  E  R
+                    <Text style={{ ...ModalStyles.text, color: this.props.colortheme.textColor }}>
+                        <Text style={{ color: this.props.colortheme.accentColor }}>G  A  M  E</Text>  O  V  E  R
                         </Text>
                     <View style={ModalStyles.statsContainer}>
                         <View style={ModalStyles.statsRow}>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.accentColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.accentColor }}>
                                 Score :
                             </Text>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.textColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.textColor }}>
                                 {this.props.score}
                             </Text>
                         </View>
                         <View style={ModalStyles.statsRow}>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.accentColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.accentColor }}>
                                 Highest Tile :
                             </Text>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.textColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.textColor }}>
                                 {this.props.highestTile}
                             </Text>
                         </View>
                     </View>
                     <View style={ModalStyles.optionBar}>
                         <TouchableOpacity onPress={this.props.onSaveGame}>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.accentColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.accentColor }}>
                                 SAVE RECORD
                             </Text>
                         </TouchableOpacity>
                         <TouchableOpacity onPress={this.props.onNewGame}>
-                            <Text style={{ ...ModalStyles.text, color: darktheme.textColor }}>
+                            <Text style={{ ...ModalStyles.text, color: this.props.colortheme.textColor }}>
                                 NEW GAME
                             </Text>
                         </TouchableOpacity>
@@ -65,7 +68,7 @@ class BoardView extends React.Component<ModalProps> {
 }
 
 const mapStateToProps = state => ({
-
+    colortheme: state.colortheme
 });
 
 export default connect(mapStateToProps)(BoardView);
diff --git a/src/data/color.ts b/src/data/color.ts
index cfd7535..343c96d 100644
--- a/src/data/color.ts
+++ b/src/data/color.ts
@@ -1,25 +1,43 @@
-import { ColorSchemeType } from "../utils/types";
+import { ColorSchemeType, TileColorSchemeType, } from "../utils/types";
+
+const tileColors: TileColorSchemeType = {
+    '-1': '#1c1b1b',
+    '2': '#a3948b',
+    '4': '#c2a899',
+    '8': '#dbb49e',
+    '16': '#ebaf8d',
+    '32': '#ed9b6d',
+    '64': '#eb864d',
+    '128': '#f07b3a',
+    '256': '#eb702d',
+    '512': '#cf5d1f',
+    '1024': '#b84e14',
+    '2048': '#9e3f0b',
+    large: '#3d3934',
+}
 
 export const darktheme: ColorSchemeType = {
+    name: 'dark',
     bgColor: '#1E1E1E',
     boardColor: '#151515',
-    tileColors: {
-        '-1': '#1c1b1b',
-        '2': '#a3948b',
-        '4': '#c2a899',
-        '8': '#dbb49e',
-        '16': '#ebaf8d',
-        '32': '#ed9b6d',
-        '64': '#eb864d',
-        '128': '#f07b3a',
-        '256': '#eb702d',
-        '512': '#cf5d1f',
-        '1024': '#b84e14',
-        '2048': '#9e3f0b',
-        large: '#3d3934',
-    },
+    tileColors,
     textColor: '#E0E0E0',
     textboxColor: '#272727',
     btnColor: '#A0A0A0',
     accentColor: '#EB864D'
-}
\ No newline at end of file
+}
+
+export const light: ColorSchemeType = {
+    name: 'light',
+    bgColor: '#EFEFEF',
+    boardColor: '#CFCFCF',
+    tileColors: {
+        ...tileColors,
+        '-1': '#DFDFDF',
+        '2': '#C7BAB3',
+    },
+    textColor: '#0F0F0F',
+    textboxColor: '#CFCFCF',
+    btnColor: '#4F4F4F',
+    accentColor: '#EB864D'
+}
diff --git a/src/redux/action.ts b/src/redux/action.ts
index 1b50008..cc6592d 100644
--- a/src/redux/action.ts
+++ b/src/redux/action.ts
@@ -1,11 +1,17 @@
-import { ActionType, GameConfig, RecordType, } from '../utils/types';
+import { ActionType, ColorSchemeType, GameConfig, RecordType, } from '../utils/types';
 
 export enum ActionName {
+    SAVE_COLOR_CONFIG,
     SAVE_GAME_STATE,
     SAVE_HISTORY,
     SAVE_RECORDS,
 }
 
+export const updateColors = (payload: ColorSchemeType): ActionType => ({
+    type: ActionName.SAVE_COLOR_CONFIG,
+    payload,
+});
+
 export const updateGame = (payload: GameConfig): ActionType => ({
     type: ActionName.SAVE_GAME_STATE,
     payload,
diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts
index 926db41..427a365 100644
--- a/src/redux/reducer.ts
+++ b/src/redux/reducer.ts
@@ -2,18 +2,23 @@ import { combineReducers } from 'redux';
 
 import { ActionName } from './action';
 
-import { ActionType, GameConfig, RecordType } from '../utils/types';
+import { ActionType, ColorSchemeType, GameConfig, RecordType } from '../utils/types';
+import { darktheme } from '../data/color';
 
-const saveHistory = (board: GameConfig = null, action: ActionType) => 
-    action.type === ActionName.SAVE_HISTORY ? action.payload : board;
+const saveColors = (theme: ColorSchemeType = darktheme, action: ActionType) => 
+    action.type === ActionName.SAVE_COLOR_CONFIG ? action.payload : theme;
 
 const saveGame = (board: GameConfig = null, action: ActionType) => 
     action.type === ActionName.SAVE_GAME_STATE ? action.payload : board;
 
+const saveHistory = (board: GameConfig = null, action: ActionType) => 
+    action.type === ActionName.SAVE_HISTORY ? action.payload : board;
+
 const saveRecords = (records: Array<RecordType> = [], action: ActionType) =>
     action.type === ActionName.SAVE_RECORDS ? action.payload : records;
 
 export default combineReducers({
+    colortheme: saveColors,
     game: saveGame,
     history: saveHistory,
     records: saveRecords,
diff --git a/src/screens/main.tsx b/src/screens/main.tsx
index 154eece..da69389 100644
--- a/src/screens/main.tsx
+++ b/src/screens/main.tsx
@@ -6,19 +6,20 @@ import { connect } from 'react-redux';
 
 import BoardView from '../components/Board';
 
-import { darktheme } from '../data/color';
-import { MainStyles, ScreenStyles } from './styles';
+import { darktheme, lighttheme } from '../data/color';
+import { MainStyles, ScreenStyles, } from './styles';
 
 import Board from '../game/board';
-import { updateGame, updateHistory } from '../redux/action';
+import { updateColors, updateGame, updateHistory } from '../redux/action';
 import { store } from '../redux/store';
-import { GameConfig, RecordType } from '../utils/types';
+import { ColorSchemeType, GameConfig, RecordType, } from '../utils/types';
 
 interface NavProps {
     navigation: StackNavigationProp<any, any>,
 }
 
 interface ReduxProps {
+    colortheme: ColorSchemeType,
     game: GameConfig,
     history: GameConfig,
     records: Array<RecordType>
@@ -46,43 +47,47 @@ class Screen extends React.Component<NavProps & ReduxProps> {
         store.dispatch(updateHistory(null));
     }
 
+    toggleTheme = () => {
+        store.dispatch(updateColors(this.props.colortheme.name === 'dark' ? lighttheme : darktheme))
+    }
+
     render() {
         return (
-            <View style={{ ...ScreenStyles.screen, backgroundColor: darktheme.bgColor }}>
-                <Text style={{ ...MainStyles.titleText, color: darktheme.textColor }}>
-                    <Text style={{ color: darktheme.accentColor }}>2</Text>  0  4  8
+            <View style={{ ...ScreenStyles.screen, backgroundColor: this.props.colortheme.bgColor }}>
+                <Text style={{ ...MainStyles.titleText, color: this.props.colortheme.textColor }}>
+                    <Text style={{ color: this.props.colortheme.accentColor }}>2</Text>  0  4  8
                 </Text>
                 <View style={MainStyles.scoreBar}>
-                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: darktheme.textboxColor }}>
-                        <Text style={{ ...MainStyles.scoreLabelText, color: darktheme.accentColor }}>
+                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: this.props.colortheme.textboxColor }}>
+                        <Text style={{ ...MainStyles.scoreLabelText, color: this.props.colortheme.accentColor }}>
                             Score
                         </Text>
-                        <Text style={{ ...MainStyles.scoreText, color: darktheme.textColor }}>
+                        <Text style={{ ...MainStyles.scoreText, color: this.props.colortheme.textColor }}>
                             {this.props.game.score}
                         </Text>
                     </View>
-                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: darktheme.textboxColor }}>
-                        <Text style={{ ...MainStyles.scoreLabelText, color: darktheme.accentColor }}>
+                    <View style={{ ...MainStyles.scoreContainer, backgroundColor: this.props.colortheme.textboxColor }}>
+                        <Text style={{ ...MainStyles.scoreLabelText, color: this.props.colortheme.accentColor }}>
                             High Score
                         </Text>
-                        <Text style={{ ...MainStyles.scoreText, color: darktheme.textColor }}>
-                            {this.props.records[0].score}
+                        <Text style={{ ...MainStyles.scoreText, color: this.props.colortheme.textColor }}>
+                            {this.props.records.length === 0 ? 0 : this.props.records[0].score}
                         </Text>
                     </View>
                 </View>
                 <View style={MainStyles.functionBarOuter}>
                     <View style={MainStyles.functionBar}>
                         <TouchableOpacity onPress={this.back}>
-                            <Icon color={darktheme.btnColor} name='backup-restore' size={40} />
+                            <Icon color={this.props.colortheme.btnColor} name='backup-restore' size={40} />
                         </TouchableOpacity>
                         <TouchableOpacity onPress={this.newGame}>
-                            <Icon color={darktheme.btnColor} name='sync' size={40} />
+                            <Icon color={this.props.colortheme.btnColor} name='sync' size={40} />
                         </TouchableOpacity>
-                        <TouchableOpacity onPress={() => { }}>
-                            <Icon color={darktheme.btnColor} name='lightbulb-outline' size={40} />
+                        <TouchableOpacity onPress={this.toggleTheme}>
+                            <Icon color={this.props.colortheme.btnColor} name='lightbulb-outline' size={40} />
                         </TouchableOpacity>
                         <TouchableOpacity onPress={() => this.props.navigation.navigate('Records')}>
-                            <Icon color={darktheme.accentColor} name='text-box-outline' size={40} />
+                            <Icon color={this.props.colortheme.accentColor} name='text-box-outline' size={40} />
                         </TouchableOpacity>
                     </View>
                 </View>
@@ -93,6 +98,7 @@ class Screen extends React.Component<NavProps & ReduxProps> {
 }
 
 const mapStateToProps = state => ({
+    colortheme: state.colortheme,
     game: state.game,
     history: state.history,
     records: state.records,
diff --git a/src/screens/records.tsx b/src/screens/records.tsx
index bb572c8..242055e 100644
--- a/src/screens/records.tsx
+++ b/src/screens/records.tsx
@@ -4,55 +4,55 @@ import { ScrollView, Text, TouchableOpacity, View, } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { connect } from 'react-redux';
 
-import { darktheme } from '../data/color';
 import { RecordStyles, ScreenStyles } from './styles';
 
 import { keygen } from '../utils/keygen';
-import { RecordType } from '../utils/types';
+import { ColorSchemeType, RecordType } from '../utils/types';
 
 interface NavProps {
     navigation: StackNavigationProp<any, any>,
 }
 
 interface ReduxProps {
+    colortheme: ColorSchemeType,
     records: Array<RecordType>
 }
 
 class Screen extends React.Component<NavProps & ReduxProps> {
     render() {
         return (
-            <View style={{ ...ScreenStyles.screen, backgroundColor: darktheme.bgColor }}>
+            <View style={{ ...ScreenStyles.screen, backgroundColor: this.props.colortheme.bgColor }}>
                 <View style={RecordStyles.topBar}>
                     <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}>
-                        <Icon color={darktheme.textColor} name='chevron-left' size={40} />
+                        <Icon color={this.props.colortheme.textColor} name='chevron-left' size={40} />
                     </TouchableOpacity>
-                    <Text style={{...RecordStyles.titleText, color: darktheme.accentColor}}>
+                    <Text style={{...RecordStyles.titleText, color: this.props.colortheme.accentColor}}>
                         M Y   R E C O R D S
                     </Text>
                 </View>
                 <View key={keygen()} style={RecordStyles.recordBar}>
-                    <Text style={{ ...RecordStyles.recordRankText, ...RecordStyles.recordText, color: darktheme.accentColor }}>
+                    <Text style={{ ...RecordStyles.recordRankText, ...RecordStyles.recordText, color: this.props.colortheme.accentColor }}>
                         Rank
                     </Text>
-                    <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: darktheme.textColor }}>
+                    <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: this.props.colortheme.textColor }}>
                         Score
                     </Text>
-                    <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: darktheme.textColor }}>
+                    <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: this.props.colortheme.textColor }}>
                         Highest Tile
                     </Text>
                 </View>
-                <View style={{ ...RecordStyles.separatorLine, backgroundColor: darktheme.textboxColor }} />
+                <View style={{ ...RecordStyles.separatorLine, backgroundColor: this.props.colortheme.textboxColor }} />
                 <ScrollView>
                     {this.props.records.map((record, index) => {
                         return (
                             <View key={keygen()} style={RecordStyles.recordBar}>
-                                <Text style={{ ...RecordStyles.recordRankText, ...RecordStyles.recordText, color: darktheme.accentColor }}>
+                                <Text style={{ ...RecordStyles.recordRankText, ...RecordStyles.recordText, color: this.props.colortheme.accentColor }}>
                                     {index}.
                                 </Text>
-                                <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: darktheme.textColor }}>
+                                <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: this.props.colortheme.textColor }}>
                                     {record.score}
                                 </Text>
-                                <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: darktheme.textColor }}>
+                                <Text style={{ ...RecordStyles.recordNumberText, ...RecordStyles.recordText, color: this.props.colortheme.textColor }}>
                                     {record.highestTile}
                                 </Text>
                             </View>
@@ -65,7 +65,8 @@ class Screen extends React.Component<NavProps & ReduxProps> {
 }
 
 const mapStateToProps = state => ({
-    records: state.records
+    colortheme: state.colortheme,
+    records: state.records,
 });
 
 export default connect(mapStateToProps)(Screen);
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 4a97959..90d7336 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -21,6 +21,7 @@ export interface ActionType {
 
 // color types
 export interface ColorSchemeType {
+    name: string,
     bgColor: string,
     boardColor: string,
     tileColors: TileColorSchemeType,