diff --git a/src/screens/Blogs/index.js b/src/screens/Blogs/index.js
index 3fb43ca..ae14847 100644
--- a/src/screens/Blogs/index.js
+++ b/src/screens/Blogs/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  View,
   StyleSheet,
   ScrollView,
   SafeAreaView,
@@ -24,8 +23,6 @@ import Target from "./layouts/Target";
 
 //style
 import tw from "tailwind-rn";
-import fontSize from "../../constants/fontSize";
-import Colors from "../../constants/Colors";
 
 function Blogs({ getList, blogs }) {
   const [position, setPosition] = React.useState("100%");
diff --git a/src/screens/Blogs/layouts/Hashtags.js b/src/screens/Blogs/layouts/Hashtags.js
index e1fbba2..6ab2a09 100644
--- a/src/screens/Blogs/layouts/Hashtags.js
+++ b/src/screens/Blogs/layouts/Hashtags.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, FlatList, Appearance } from "react-native";
+import { View, Text, FlatList } from "react-native";
 import { connect } from "react-redux";
 import Svg, { Path } from "react-native-svg";
 
@@ -8,15 +8,14 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-export const Hashtags = ({ hashtags }) => {
-  const colorScheme = Appearance.getColorScheme();
+export const Hashtags = ({ hashtags, theme }) => {
   return (
     <View
       style={[
         tw(
           "flex flex-row-reverse py-1 pl-3 rounded-full items-center w-full mb-7"
         ),
-        {borderWidth : 2, borderColor : Colors.theme1[colorScheme].greenFF1}
+        {borderWidth : 2, borderColor : Colors.theme1[theme].greenFF1}
       ]}
     >
       <Svg xmlns="http://www.w3.org/2000/svg" width={31.486} height={19.692}>
@@ -59,6 +58,7 @@ const Hashtag = ({ hashtag }) => {
 
 const mapStateToProps = (state) => ({
   hashtags: state.blog.hashtags,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {};
diff --git a/src/screens/Blogs/layouts/Header.js b/src/screens/Blogs/layouts/Header.js
index c8e5870..ba8e787 100644
--- a/src/screens/Blogs/layouts/Header.js
+++ b/src/screens/Blogs/layouts/Header.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, Appearance } from "react-native";
+import { View, Text } from "react-native";
 import { connect } from "react-redux";
 
 //style
@@ -7,8 +7,7 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-export const Header = ({ title }) => {
-  const colorScheme = Appearance.getColorScheme();
+export const Header = ({ title, theme }) => {
   return (
     <View style={tw("flex flex-row-reverse w-full items-center mt-5 mb-4")}>
       <Text
@@ -16,20 +15,22 @@ export const Header = ({ title }) => {
           tw("py-2.5 pr-2.5 pl-5"),
           {
             fontSize: fontSize.base,
-            color: Colors.theme1[colorScheme].white,
-            backgroundColor: Colors.theme1[colorScheme].black,
+            color: Colors.theme1[theme].white,
+            backgroundColor: Colors.theme1[theme].black,
             fontFamily : 'bold'
           },
         ]}
       >
         {title}
       </Text>
-      <View style={{ width : '100%', backgroundColor : Colors.theme1[colorScheme].grayE3, height : 2 }}></View>
+      <View style={{ width : '100%', backgroundColor : Colors.theme1[theme].grayE3, height : 2 }}></View>
     </View>
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme
+});
 
 const mapDispatchToProps = {};
 
diff --git a/src/screens/Blogs/layouts/New.js b/src/screens/Blogs/layouts/New.js
index 40711db..88b9613 100644
--- a/src/screens/Blogs/layouts/New.js
+++ b/src/screens/Blogs/layouts/New.js
@@ -1,13 +1,6 @@
 import React from "react";
-import {
-  View,
-  Text,
-  Dimensions,
-  Pressable,
-  Image,
-  Appearance,
-  Platform,
-} from "react-native";
+import { Text, Dimensions, Pressable, Image, Platform } from "react-native";
+import { connect } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
 
 //style
@@ -18,9 +11,8 @@ import Colors from "../../../constants/Colors";
 const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-export const New = ({ blog }) => {
+export const New = ({ blog, theme }) => {
   const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
   return (
     <Pressable
       style={[
@@ -43,7 +35,7 @@ export const New = ({ blog }) => {
         style={{
           fontSize: fontSize.tiny,
           fontFamily: "bold",
-          color: Colors.theme1[colorScheme].gray20,
+          color: Colors.theme1[theme].gray20,
           marginTop: 5,
           textAlign: ios ? "right" : "auto",
         }}
@@ -54,7 +46,7 @@ export const New = ({ blog }) => {
         style={{
           fontSize: fontSize.xs,
           fontFamily: "regular",
-          color: Colors.theme1[colorScheme].gray2077,
+          color: Colors.theme1[theme].gray2077,
           textAlign: ios ? "right" : "auto",
           marginTop: 5,
         }}
@@ -65,4 +57,8 @@ export const New = ({ blog }) => {
   );
 };
 
-export default New;
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(New);
diff --git a/src/screens/Blogs/layouts/Single.js b/src/screens/Blogs/layouts/Single.js
index d6bf5c0..5062fb7 100644
--- a/src/screens/Blogs/layouts/Single.js
+++ b/src/screens/Blogs/layouts/Single.js
@@ -5,7 +5,6 @@ import {
   Text,
   Dimensions,
   Image,
-  Appearance,
   Platform,
 } from "react-native";
 import { connect } from "react-redux";
@@ -17,12 +16,11 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-const { height, width } = Dimensions.get("window");
+const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-export const Single = ({ blog }) => {
+export const Single = ({ blog, theme }) => {
   const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
   return (
     <Pressable
       style={tw("flex ")}
@@ -111,7 +109,7 @@ export const Single = ({ blog }) => {
             style={{
               fontFamily: "bold",
               fontSize: fontSize.lg,
-              color: Colors.theme1[colorScheme].gray20,
+              color: Colors.theme1[theme].gray20,
               textAlign: ios ? "right" : "auto",
             }}
           >
@@ -121,7 +119,7 @@ export const Single = ({ blog }) => {
             style={{
               fontFamily: "regular",
               fontSize: fontSize.sm,
-              color: Colors.theme1[colorScheme].gray2077,
+              color: Colors.theme1[theme].gray2077,
               lineHeight: 25,
               marginTop: 10,
               textAlign: ios ? "right" : "auto",
@@ -140,6 +138,7 @@ export const Single = ({ blog }) => {
 
 const mapStateToProps = (state) => ({
   blog: state.blog.list[0],
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {};
diff --git a/src/screens/Blogs/layouts/Target.js b/src/screens/Blogs/layouts/Target.js
index 0411d51..553695a 100644
--- a/src/screens/Blogs/layouts/Target.js
+++ b/src/screens/Blogs/layouts/Target.js
@@ -17,12 +17,11 @@ import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-const { height, width } = Dimensions.get("window");
+const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-const Target = ({ blogs }) => {
+const Target = ({ blogs, theme }) => {
   const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
   const Large = ({ blog }) => {
     return (
       <Pressable
@@ -74,7 +73,7 @@ const Target = ({ blogs }) => {
                 style={[
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1[colorScheme].gray20,
+                    color: Colors.theme1[theme].gray20,
                     fontSize: fontSize.tiny,
                   },
                 ]}
@@ -85,7 +84,7 @@ const Target = ({ blogs }) => {
                 style={[
                   {
                     fontFamily: "regular",
-                    color: Colors.theme1[colorScheme].gray20,
+                    color: Colors.theme1[theme].gray20,
                     fontSize: fontSize.xs,
                   },
                 ]}
@@ -99,7 +98,7 @@ const Target = ({ blogs }) => {
               style={[
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                   fontSize: fontSize.sm,
                 },
               ]}
@@ -111,7 +110,7 @@ const Target = ({ blogs }) => {
                 tw("mt-0"),
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                   fontSize: fontSize.sm,
                 },
               ]}
@@ -167,4 +166,8 @@ const Target = ({ blogs }) => {
   );
 };
 
-export default Target;
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(Target);