diff --git a/src/docs/pages/ThemePage.tsx b/src/docs/pages/ThemePage.tsx
index 39891b3fd..fee652dfc 100644
--- a/src/docs/pages/ThemePage.tsx
+++ b/src/docs/pages/ThemePage.tsx
@@ -58,6 +58,19 @@ const ThemePage: FC = () => {
           )}
         </SyntaxHighlighter>
       </Card>
+      <span className="text-xl font-bold">Get the theme</span>
+      <p>
+        For more customizations, there is the possibility to get the theme with the <strong>useTheme</strong> hook and
+        its mode with the <strong>useThemeMode</strong> hook.
+      </p>
+      <Card>
+        <SyntaxHighlighter language="tsx" style={dracula}>
+          const theme = useTheme().theme.button;
+        </SyntaxHighlighter>
+        <SyntaxHighlighter language="tsx" style={dracula}>
+          const [mode, setMode, toggleMode] = useThemeMode(usePreferences);
+        </SyntaxHighlighter>
+      </Card>
     </div>
   );
 };
diff --git a/src/lib/components/Flowbite/index.tsx b/src/lib/components/Flowbite/index.tsx
index 2d4530423..10c528f3f 100644
--- a/src/lib/components/Flowbite/index.tsx
+++ b/src/lib/components/Flowbite/index.tsx
@@ -5,7 +5,7 @@ import { mergeDeep } from '../../helpers/mergeDeep';
 import windowExists from '../../helpers/window-exists';
 import defaultTheme from '../../theme/default';
 import type { FlowbiteTheme } from './FlowbiteTheme';
-import { ThemeContext, useThemeMode } from './ThemeContext';
+import { ThemeContext, useTheme, useThemeMode } from './ThemeContext';
 
 export interface ThemeProps {
   dark?: boolean;
@@ -49,3 +49,4 @@ export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
 };
 
 export type { FlowbiteTheme } from './FlowbiteTheme';
+export { useTheme, useThemeMode };