use default import for colors

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`

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;

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";
 

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`

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;

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";
 

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;

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%;

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;

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 {

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%;

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;

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) => (
   <div {...props}>

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`

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 {

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 }>`

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;

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;

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";

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";
 

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";

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";

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";

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";

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`