diff --git a/packages/robindoc/src/components/blocks/theme-detector/index.tsx b/packages/robindoc/src/components/blocks/theme-detector/index.tsx
new file mode 100644
index 00000000..b59d78da
--- /dev/null
+++ b/packages/robindoc/src/components/blocks/theme-detector/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const clientLogic = () => {
+    const userTheme = localStorage.getItem("theme");
+    if (userTheme && ["light", "dark"].includes(userTheme)) {
+        document.documentElement.classList.add(`theme-${userTheme}`);
+    } else {
+        document.documentElement.classList.add(`theme-system`);
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            document.documentElement.classList.add("theme-dark");
+        } else {
+            document.documentElement.classList.add("theme-light");
+        }
+    }
+
+    const store = localStorage.getItem("r-tabs");
+    const items = store?.split(";").filter((item) => item && /[\w-]+=[\w]+/.test(item)) || [];
+    const classNames = Array.from(document.documentElement.classList);
+    classNames.forEach((className) => {
+        if (className.startsWith(`r-tabs-global`)) {
+            document.documentElement.classList.remove(className);
+        }
+    });
+    items.forEach((item) => {
+        const [tabsKey, tab] = item.split("=");
+        document.documentElement.classList.add(`r-tabs-global__${tabsKey}`, `r-tabs-global__${tabsKey}_${tab}`);
+    });
+};
+
+export const ThemeDetector: React.FC = () => (
+    <script
+        id="detect-theme"
+        dangerouslySetInnerHTML={{
+            __html: `(${clientLogic})()`,
+        }}
+        async
+    />
+);
diff --git a/packages/robindoc/src/components/blocks/theme-styles/index.tsx b/packages/robindoc/src/components/blocks/theme-styles/index.tsx
new file mode 100644
index 00000000..bc74aeb2
--- /dev/null
+++ b/packages/robindoc/src/components/blocks/theme-styles/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { type Theme } from "@src/core/types/theme";
+
+export interface ThemeStylesProps {
+    theme: Theme;
+}
+
+export const ThemeStyles: React.FC<ThemeStylesProps> = ({ theme }) => {
+    const { colors = {} } = theme;
+
+    const colorsStyles = Object.entries(colors).reduce<string[]>((acc, [type, variants]) => {
+        Object.entries(variants).forEach(([key, color]) => {
+            acc.push(`--${type}-${key}:${color};`);
+        });
+        return acc;
+    }, []);
+
+    return (
+        <style
+            dangerouslySetInnerHTML={{
+                __html: `:root{${colorsStyles.join("")}}`,
+            }}
+        />
+    );
+};
diff --git a/packages/robindoc/src/components/blocks/theme/index.tsx b/packages/robindoc/src/components/blocks/theme-switcher/index.tsx
similarity index 87%
rename from packages/robindoc/src/components/blocks/theme/index.tsx
rename to packages/robindoc/src/components/blocks/theme-switcher/index.tsx
index cc84f7f7..58e0c199 100644
--- a/packages/robindoc/src/components/blocks/theme/index.tsx
+++ b/packages/robindoc/src/components/blocks/theme-switcher/index.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import "./theme.scss";
 import React from "react";
 
-export type ThemeProps = {
+import "./theme-switcher.scss";
+
+export type ThemeSwitcherProps = {
     translations?: {
         /** Dark */
         dark?: string;
@@ -14,7 +15,7 @@ export type ThemeProps = {
     };
 };
 
-export const Theme: React.FC<ThemeProps> = ({ translations }) => {
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ translations }) => {
     const { dark = "Dark", system = "System", light = "light" } = translations || {};
     const changeTheme = (theme: string) => {
         localStorage.setItem("theme", theme);
@@ -32,8 +33,12 @@ export const Theme: React.FC<ThemeProps> = ({ translations }) => {
     };
 
     return (
-        <div className="r-theme">
-            <button className="r-theme-btn r-theme-btn__dark" type="button" onClick={() => changeTheme("dark")}>
+        <div className="r-theme-switcher">
+            <button
+                className="r-theme-switcher-btn r-theme-switcher-btn__dark"
+                type="button"
+                onClick={() => changeTheme("dark")}
+            >
                 <svg width="16" height="16" viewBox="0 0 20 20">
                     <title>{dark}</title>
                     <path
@@ -44,7 +49,11 @@ export const Theme: React.FC<ThemeProps> = ({ translations }) => {
                     />
                 </svg>
             </button>
-            <button className="r-theme-btn r-theme-btn__system" type="button" onClick={() => changeTheme("system")}>
+            <button
+                className="r-theme-switcher-btn r-theme-switcher-btn__system"
+                type="button"
+                onClick={() => changeTheme("system")}
+            >
                 <svg width="16" height="16" viewBox="0 0 20 20">
                     <title>{system}</title>
                     <path
@@ -73,7 +82,11 @@ export const Theme: React.FC<ThemeProps> = ({ translations }) => {
                     />
                 </svg>
             </button>
-            <button className="r-theme-btn r-theme-btn__light" type="button" onClick={() => changeTheme("light")}>
+            <button
+                className="r-theme-switcher-btn r-theme-switcher-btn__light"
+                type="button"
+                onClick={() => changeTheme("light")}
+            >
                 <svg width="16" height="16" viewBox="0 0 20 20">
                     <title>{light}</title>
                     <path
diff --git a/packages/robindoc/src/components/blocks/theme/theme.scss b/packages/robindoc/src/components/blocks/theme-switcher/theme-switcher.scss
similarity index 71%
rename from packages/robindoc/src/components/blocks/theme/theme.scss
rename to packages/robindoc/src/components/blocks/theme-switcher/theme-switcher.scss
index 79b175a5..cb9f6d43 100644
--- a/packages/robindoc/src/components/blocks/theme/theme.scss
+++ b/packages/robindoc/src/components/blocks/theme-switcher/theme-switcher.scss
@@ -1,6 +1,6 @@
 @import "src/assets/_vars";
 
-.r-theme {
+.r-theme-switcher {
   position: relative;
   display: flex;
   gap: 4px;
@@ -24,7 +24,7 @@
   }
 }
 
-.r-theme-btn {
+.r-theme-switcher-btn {
   padding: 8px;
   background: none;
   border: 0;
@@ -43,29 +43,29 @@
   }
 }
 
-.theme-dark:not(.theme-system) .r-theme::before {
+.theme-dark:not(.theme-system) .r-theme-switcher::before {
   left: 2px;
 }
 
-.theme-dark:not(.theme-system) .r-theme-btn__dark {
+.theme-dark:not(.theme-system) .r-theme-switcher-btn__dark {
   color: var(--neutral-950);
   pointer-events: none;
 }
 
-.theme-system .r-theme::before {
+.theme-system .r-theme-switcher::before {
   left: 38px;
 }
 
-.theme-system .r-theme-btn__system {
+.theme-system .r-theme-switcher-btn__system {
   color: var(--neutral-950);
   pointer-events: none;
 }
 
-.theme-light:not(.theme-system) .r-theme::before {
+.theme-light:not(.theme-system) .r-theme-switcher::before {
   left: 74px;
 }
 
-.theme-light:not(.theme-system) .r-theme-btn__light {
+.theme-light:not(.theme-system) .r-theme-switcher-btn__light {
   color: var(--neutral-950);
   pointer-events: none;
 }
diff --git a/packages/robindoc/src/components/elements/footer/index.tsx b/packages/robindoc/src/components/elements/footer/index.tsx
index 097cd8e9..30a17919 100644
--- a/packages/robindoc/src/components/elements/footer/index.tsx
+++ b/packages/robindoc/src/components/elements/footer/index.tsx
@@ -1,8 +1,10 @@
-import "./footer.scss";
 import React from "react";
-import { Theme } from "@src/components/blocks/theme";
+
+import { ThemeSwitcher } from "@src/components/blocks/theme-switcher";
 import { Container } from "@src/components/ui/container";
 
+import "./footer.scss";
+
 export type FooterProps = {
     copyright: string;
     hidePoweredBy?: boolean;
@@ -13,7 +15,7 @@ export const Footer: React.FC<FooterProps> = ({ copyright, hidePoweredBy }) => (
         <Container>
             <div className="r-footer-row">
                 <div className="r-copyright">{copyright}</div>
-                <Theme />
+                <ThemeSwitcher />
             </div>
             {!hidePoweredBy && (
                 <div className="r-footer-row r-footer-additional">
diff --git a/packages/robindoc/src/components/elements/robin-provider/index.tsx b/packages/robindoc/src/components/elements/robin-provider/index.tsx
index b87b5324..f018302a 100644
--- a/packages/robindoc/src/components/elements/robin-provider/index.tsx
+++ b/packages/robindoc/src/components/elements/robin-provider/index.tsx
@@ -1,44 +1,18 @@
 import React from "react";
 
+import { type Theme } from "@src/core/types/theme";
 import { NavigateProvider } from "@src/components/contexts/navigate/provider";
+import { ThemeStyles } from "@src/components/blocks/theme-styles";
+import { ThemeDetector } from "@src/components/blocks/theme-detector";
 
-const clientLogic = () => {
-    const userTheme = localStorage.getItem("theme");
-    if (userTheme && ["light", "dark"].includes(userTheme)) {
-        document.documentElement.classList.add(`theme-${userTheme}`);
-    } else {
-        document.documentElement.classList.add(`theme-system`);
-        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            document.documentElement.classList.add("theme-dark");
-        } else {
-            document.documentElement.classList.add("theme-light");
-        }
-    }
+interface RobinProviderProps {
+    theme?: Theme;
+}
 
-    const store = localStorage.getItem("r-tabs");
-    const items = store?.split(";").filter((item) => item && /[\w-]+=[\w]+/.test(item)) || [];
-    const classNames = Array.from(document.documentElement.classList);
-    classNames.forEach((className) => {
-        if (className.startsWith(`r-tabs-global`)) {
-            document.documentElement.classList.remove(className);
-        }
-    });
-    items.forEach((item) => {
-        const [tabsKey, tab] = item.split("=");
-        document.documentElement.classList.add(`r-tabs-global__${tabsKey}`, `r-tabs-global__${tabsKey}_${tab}`);
-    });
-};
-
-export const RobinProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-    return (
-        <>
-            <script
-                id="detect-theme"
-                dangerouslySetInnerHTML={{
-                    __html: `(${clientLogic})()`,
-                }}
-            />
-            <NavigateProvider>{children}</NavigateProvider>
-        </>
-    );
-};
+export const RobinProvider: React.FC<React.PropsWithChildren<RobinProviderProps>> = ({ children, theme }) => (
+    <>
+        {theme && <ThemeStyles theme={theme} />}
+        <ThemeDetector />
+        <NavigateProvider>{children}</NavigateProvider>
+    </>
+);
diff --git a/packages/robindoc/src/core/types/theme.ts b/packages/robindoc/src/core/types/theme.ts
new file mode 100644
index 00000000..c5140452
--- /dev/null
+++ b/packages/robindoc/src/core/types/theme.ts
@@ -0,0 +1,26 @@
+export type ThemeColors = {
+    accent?: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        "950": string;
+    };
+    link?: {
+        base: string;
+        "base-hovered": string;
+        visited: string;
+        "visited-hovered": string;
+        active: string;
+    };
+};
+
+export type Theme = {
+    colors?: ThemeColors;
+};