diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index a3a7b43..77d17b4 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import AccordionIcon from "./AccordionIcon";
const Container = styled.div`
diff --git a/src/components/Accordion/AccordionIcon.tsx b/src/components/Accordion/AccordionIcon.tsx
index 4264b61..f2698b3 100644
--- a/src/components/Accordion/AccordionIcon.tsx
+++ b/src/components/Accordion/AccordionIcon.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "../../theme/colors";
+import colors from "../../theme/colors";
interface AccordionIconProps {
open: boolean;
diff --git a/src/components/AddLink.tsx b/src/components/AddLink.tsx
index bac3b8d..774e53b 100644
--- a/src/components/AddLink.tsx
+++ b/src/components/AddLink.tsx
@@ -1,6 +1,6 @@
import React, { ComponentProps } from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Link } from "@components/index";
import AddIcon from "@components/AddIcon";
diff --git a/src/components/AdminHeader.tsx b/src/components/AdminHeader.tsx
index 7280b49..d0f0147 100644
--- a/src/components/AdminHeader.tsx
+++ b/src/components/AdminHeader.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import HeaderLogo from "./HeaderLogo";
const Header = styled.header`
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 3fc3ec3..a845c6a 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
interface ButtonProps {
onClick: () => void;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 3b2c6ad..576ce7a 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,7 +1,7 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Link } from "@components/index";
import breakpoints from "@theme/breakpoints";
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
index 1262c3f..c21a804 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/ContactCard.tsx
@@ -1,7 +1,7 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Card = styled.article`
display: flex;
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index 1093cdd..8934689 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Divider = styled.hr`
width: 98%;
diff --git a/src/components/DropDownBox.tsx b/src/components/DropDownBox.tsx
index 8af3658..9833ef4 100644
--- a/src/components/DropDownBox.tsx
+++ b/src/components/DropDownBox.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
interface DropDownBoxProps {
onMouseEnter: () => void;
diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx
index 5490e15..f607ac2 100644
--- a/src/components/Hero/HeroAside.tsx
+++ b/src/components/Hero/HeroAside.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Link } from "@components/index";
interface HeroAsideItemProps {
diff --git a/src/components/Hero/HeroPrimaryButtons.tsx b/src/components/Hero/HeroPrimaryButtons.tsx
index c81f279..37b7a60 100644
--- a/src/components/Hero/HeroPrimaryButtons.tsx
+++ b/src/components/Hero/HeroPrimaryButtons.tsx
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Buttons = styled.div<{ row?: boolean }>`
min-width: 20%;
diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx
index b11e990..f8dad40 100644
--- a/src/components/Hero/HeroSecondarySection.tsx
+++ b/src/components/Hero/HeroSecondarySection.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Note = styled.span`
color: white;
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index 68f93fc..e4e26a4 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Loader = styled((props) => (
diff --git a/src/components/NavigationMobile.tsx b/src/components/NavigationMobile.tsx
index 53c3457..85531e5 100644
--- a/src/components/NavigationMobile.tsx
+++ b/src/components/NavigationMobile.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { renderNavigationItems } from "./Navigation";
const Nav = styled.nav`
diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx
index 93941a4..7639ea5 100644
--- a/src/components/PageLink.tsx
+++ b/src/components/PageLink.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Link } from "@components/index";
interface PageLinkProps {
diff --git a/src/components/Sections/CTASection.tsx b/src/components/Sections/CTASection.tsx
index 57659b8..6d3a020 100644
--- a/src/components/Sections/CTASection.tsx
+++ b/src/components/Sections/CTASection.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Link } from "@components/index";
const Section = styled.section<{ colors: string }>`
diff --git a/src/components/Widgets/Checkbox/Checkbox.tsx b/src/components/Widgets/Checkbox/Checkbox.tsx
index bc4deba..4f2895b 100644
--- a/src/components/Widgets/Checkbox/Checkbox.tsx
+++ b/src/components/Widgets/Checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const Container = styled.label`
display: block;
diff --git a/src/components/Widgets/SignupQuestionsWidget/Question.tsx b/src/components/Widgets/SignupQuestionsWidget/Question.tsx
index d271bf9..404d477 100644
--- a/src/components/Widgets/SignupQuestionsWidget/Question.tsx
+++ b/src/components/Widgets/SignupQuestionsWidget/Question.tsx
@@ -1,6 +1,6 @@
import React, { ButtonHTMLAttributes } from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
const RemoveButton = styled.button`
background-color: ${colors.orange1} !important;
diff --git a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
index 2b3dbb2..1743953 100644
--- a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
+++ b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx
@@ -1,7 +1,7 @@
import React, { ReactNode } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import { Question, InputProps } from "./common";
import OptionsWidget from "./OptionsWidget";
import TypeWidget from "./TypeWidget";
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a1fd12e..3104358 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,7 +3,7 @@ import Head from "next/head";
import { AppProps } from "next/app";
import styled, { createGlobalStyle } from "styled-components";
import { ToastContainer } from "react-toastify";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";
import LocaleStore from "../i18n";
diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx
index 770b178..dc9103e 100644
--- a/src/views/ContactsPage/ContactsPageView.tsx
+++ b/src/views/ContactsPage/ContactsPageView.tsx
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { Divider, TextSection, Link } from "@components/index";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import ContactCard from "@components/ContactCard";
import BoardJson from "./board.json";
diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx
index f3a893b..1233304 100644
--- a/src/views/FrontPage/FrontPageView.tsx
+++ b/src/views/FrontPage/FrontPageView.tsx
@@ -11,7 +11,7 @@ import {
} from "@components/index";
import Event from "@models/Event";
import Post from "@models/Feed";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import FullWidthSection from "@components/Sections/FullWidthSection";
import noop from "@utils/noop";
diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx
index c9bffe9..c5268d1 100644
--- a/src/views/SignUpPage/SignUpPageView.tsx
+++ b/src/views/SignUpPage/SignUpPageView.tsx
@@ -5,7 +5,7 @@ import { SignupForm } from "@models/Signup";
import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
import { TextSection, ChangeLanguageButton } from "@components/index";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import FormWrapper from "@views/common/FormWrapper";
import Loader from "@components/Loader";
import { buildFormSchema, buildUISchema } from "./FormUtils";
diff --git a/src/views/admin/AdminCreateCommon.tsx b/src/views/admin/AdminCreateCommon.tsx
index e05b673..b0e2bd5 100644
--- a/src/views/admin/AdminCreateCommon.tsx
+++ b/src/views/admin/AdminCreateCommon.tsx
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import Event from "@models/Event";
import Post from "@models/Feed";
import { SignupForm } from "@models/Signup";
diff --git a/src/views/admin/AdminListCommon.tsx b/src/views/admin/AdminListCommon.tsx
index 5b57170..7e7ec55 100644
--- a/src/views/admin/AdminListCommon.tsx
+++ b/src/views/admin/AdminListCommon.tsx
@@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
import AdminPageWrapper from "@views/common/AdminPageWrapper";
const Main = styled.div`