diff --git a/src/styles/global.ts b/src/styles/global.ts
index 5f29d08..bb48c8a 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -29,6 +29,9 @@ const SaguGlobalStyles: GlobalStyleComponent<
   }
 
   ${({ theme, globalFontFamily }) => css`
+    :root {
+      --color-secondary-medium: ${theme.colors.secondary.medium};
+    }
     html {
       font-size: 62.5%;
     }
@@ -36,6 +39,7 @@ const SaguGlobalStyles: GlobalStyleComponent<
     body {
       font-family: ${globalFontFamily || theme.font.family.primary};
       font-size: ${theme.font.sizes.medium};
+      background: ${theme.colors.base.white};
     }
   `}
 
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
index d5c104a..a3abb66 100644
--- a/src/styles/theme/index.ts
+++ b/src/styles/theme/index.ts
@@ -35,7 +35,9 @@ export default {
       bold: 700
     }
   },
-  colors,
+  colors: {
+    ...colors
+  },
   spacings: {
     none: '0',
     xmini: '0.2rem',
@@ -61,7 +63,7 @@ export default {
   },
   shadows: {
     default: 'rgb(0 0 0 / 15%) 0px 2rem 8rem 0',
-    focus: `0 0 0.5rem ${colors.secondary.medium}`
+    focus: `0 0 0.5rem var(--color-secondary-medium, #000)`
   },
   avatarSizes: {
     large: '6rem',