diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 175b4fd..9faa593 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -5,7 +5,7 @@ import './global.css'
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className="flex flex-col bg-slate-300">
+      <body className="bg-lightAccent dark:bg-darkAccent flex flex-col bg-slate-300">
         <main>{children}</main>
       </body>
     </html>
diff --git a/src/components/message.jsx b/src/components/message.jsx
index 977a9ed..34859a1 100644
--- a/src/components/message.jsx
+++ b/src/components/message.jsx
@@ -16,7 +16,7 @@ export default function Message({ sentAt, children }) {
           alt="Picture of the author"
         />
       </Link>
-      <div className="flex justify-between gap-2 rounded-lg rounded-bl-none w-fit max-w-md py-2 px-3 bg-orange-100">
+      <div className="bg-primary dark:bg-dark text-light flex justify-between gap-2 rounded-lg rounded-bl-none w-fit max-w-md py-2 px-3 bg-orange-100">
         <p className="break-words">{children}</p>
         <span className="text-xs self-end">{formatTime(sentAt)}</span>
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 591fd3f..0f716ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,jsx}'],
+  darkMode: 'class',
   theme: {
+    colors: {
+      light: '#fff',
+      lightAccent: '#efeff3',
+      dark: '#18323b',
+      darkAccent: '#102024',
+      primary: '#00c2ed',
+    },
     extend: {},
   },
   plugins: [],
