diff --git a/AgileWorks/Common/WidgetView.swift b/AgileWorks/Common/WidgetView.swift
index 19fadfa7fd17a7d473d31b8964ed0de155b584cf..136a249adf1df5f538e576807f7bc62182cc165e 100644
--- a/AgileWorks/Common/WidgetView.swift
+++ b/AgileWorks/Common/WidgetView.swift
@@ -121,7 +121,7 @@ struct StatusBoxView: View {
 
     func backColor() -> Color {
         if #available(iOS 14.0, *) {
-           return Color(UIColor.systemGray6)
+            return Color.backgroundColor
         } else {
             return Color(UIColor.clear)
         }
@@ -268,12 +268,15 @@ struct ApprovalItemView: View {
             HStack(spacing: 0) {
                 Image(systemName: "folder")
                     .frame(width: geometry.size.width * 0.3, height: geometry.size.height)
+                    .foregroundColor(Color.textColor)
                 if message == nil {
                     VStack(alignment: .leading) {
                         Text(approvalItem.name)
                             .frame(alignment: .leading)
+                            .foregroundColor(Color.textColor)
                         Text("\(approvalItem.count)").font(.subheadline)
                             .frame(alignment: .leading)
+                            .foregroundColor(Color.textColor)
                     }
                 } else { //APIサーバーエラーの場合の表示
                     Text(message ?? "-")
@@ -281,7 +284,7 @@ struct ApprovalItemView: View {
             }
             Spacer()
         }
-        .background(Color.white)
+        .background(Color.widgetBoxColor)
         .cornerRadius(20)
     }
 }
@@ -292,5 +295,13 @@ struct FailureWidgetView: View {
 
     var body: some View {
         Text(entry.message ?? "")
+            .foregroundColor(Color.textColor)
     }
 }
+
+extension Color {
+    static let backgroundColor = Color("WidgetBackgroundColor")
+    static let widgetBoxColor = Color("WidgetBoxColor")
+    static let textColor = Color("WidgetTextColor")
+}
+
diff --git a/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBackgroundColor.colorset/Contents.json b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBackgroundColor.colorset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..12ac8cffe54debaebd414f7388b725fd7f3939bf
--- /dev/null
+++ b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBackgroundColor.colorset/Contents.json
@@ -0,0 +1,28 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemGray6Color"
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemGray6Color"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBoxColor.colorset/Contents.json b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBoxColor.colorset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..ca5bf100d095aa42f9902ebc18db5e26977e3c76
--- /dev/null
+++ b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetBoxColor.colorset/Contents.json
@@ -0,0 +1,28 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemBackgroundColor"
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "platform" : "ios",
+        "reference" : "systemGray5Color"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/AgileWorks/WidgetExtension/Assets.xcassets/WidgetTextColor.colorset/Contents.json b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetTextColor.colorset/Contents.json
new file mode 100644
index 0000000000000000000000000000000000000000..1effc4f12791cdbc123f53d64a8dfb0fd1e56e23
--- /dev/null
+++ b/AgileWorks/WidgetExtension/Assets.xcassets/WidgetTextColor.colorset/Contents.json
@@ -0,0 +1,28 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "platform" : "universal",
+        "reference" : "labelColor"
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "platform" : "universal",
+        "reference" : "labelColor"
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}