diff --git a/config.yml b/config.yml
index 381510dc..927232fb 100644
--- a/config.yml
+++ b/config.yml
@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
   homepage: "https://flowbite.com"
-  current_version: 3.0.0
+  current_version: 3.1.0
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 
diff --git a/content/getting-started/blazor.md b/content/getting-started/blazor.md
index d7991418..04863112 100644
--- a/content/getting-started/blazor.md
+++ b/content/getting-started/blazor.md
@@ -219,7 +219,7 @@ module.exports = {
 
 ```bash
     <!-- ... -->
-    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.0.0/dist/flowbite.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.0/dist/flowbite.min.js"></script>
   </body>
 </html>
 ```
diff --git a/content/getting-started/changelog.md b/content/getting-started/changelog.md
index 308eb3b9..f664f480 100644
--- a/content/getting-started/changelog.md
+++ b/content/getting-started/changelog.md
@@ -15,6 +15,11 @@ nextLink: getting-started/react/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v3.1.0
+
+- use CSS variables for colors
+- remove setting dark mode by default from plugin
+
 ### v3.0.0
 
 - upgraded Tailwind to v4
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index f22e10a7..f0690dd4 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,5 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
     integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="{{ .Site.BaseURL }}flowbite.min.js?v=3.0.0a"></script>
-<script src="{{ .Site.BaseURL }}docs.js?v=3.0.0a"></script>
\ No newline at end of file
+<script src="{{ .Site.BaseURL }}flowbite.min.js?v=3.1.0a"></script>
+<script src="{{ .Site.BaseURL }}docs.js?v=3.1.0a"></script>
\ No newline at end of file
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index 2fdfe561..dbb337bd 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -2,4 +2,4 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=3.0.0a">
\ No newline at end of file
+<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=3.1.0a">
\ No newline at end of file
diff --git a/layouts/shortcodes/example.html b/layouts/shortcodes/example.html
index 9973d25d..20576337 100644
--- a/layouts/shortcodes/example.html
+++ b/layouts/shortcodes/example.html
@@ -108,7 +108,7 @@
   <div class="code-preview-wrapper">
     <div{{ with .Get "id" }} id="{{ . }}"{{ end }} class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600">
       <div class="w-full code-responsive-wrapper">
-        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}main.css?v=3.0.0a'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/apexcharts@3.46.0/dist/apexcharts.min.js'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/simple-datatables@9.0.4'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} }</script>{{ if $wysiwyg }}<script type='importmap'>{{ $wysiwyg_json_fix | safeHTML }}</script>{{ end }}{{ if $javascript }} <script {{ if $script_module }}type='module'{{ end }}>{{ $javascript }}</script>{{ end }}</body></html>" frameborder="0"></iframe>
+        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}main.css?v=3.1.0a'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/apexcharts@3.46.0/dist/apexcharts.min.js'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/simple-datatables@9.0.4'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} }</script>{{ if $wysiwyg }}<script type='importmap'>{{ $wysiwyg_json_fix | safeHTML }}</script>{{ end }}{{ if $javascript }} <script {{ if $script_module }}type='module'{{ end }}>{{ $javascript }}</script>{{ end }}</body></html>" frameborder="0"></iframe>
         <div class="flex items-center justify-center w-full p-5 bg-white dark:bg-gray-900" data-component-loader>
           <div role="status">
             <svg aria-hidden="true" class="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/package.json b/package.json
index 62f2f1c2..713a8660 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "The most popular library of interactive components built with Tailwind CSS",
   "keywords": [
     "flowbite",
@@ -55,13 +55,13 @@
     "start:webpack": "webpack --mode=development --watch",
     "start:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o static/flowbite.css --watch",
     "start:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css --watch",
-    "build": "cross-env NODE_ENV=production && HUGO_ENV=production && run-s build:webpack build:hugo",
+    "build": "cross-env NODE_ENV=production && HUGO_ENV=production && run-s build:css:docs:min build:webpack build:hugo",
     "build:hugo": "hugo",
     "build:webpack": "webpack --mode=production",
     "build:css:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/flowbite.css -o dist/flowbite.min.css --minify",
     "build:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o dist/flowbite.css",
-    "build:css:docs:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/main.css -o dist/main.min.css --minify",
-    "build:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o dist/main.css",
+    "build:css:docs:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/main.css -o static/main.css --minify",
+    "build:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css",
     "build:js": "run-s build:webpack",
     "copy:js:dist": "copyfiles --flat static/flowbite.js dist && copyfiles --flat static/flowbite.js.map dist && copyfiles --flat static/flowbite.min.js.map dist && copyfiles --flat static/flowbite.min.js dist && copyfiles --flat static/flowbite.turbo.js dist && copyfiles --flat static/flowbite.turbo.min.js dist && copyfiles --flat static/flowbite.turbo.js.map dist && copyfiles --flat static/flowbite.turbo.min.js.map dist && copyfiles --flat static/flowbite.phoenix.js dist && copyfiles --flat static/flowbite.phoenix.min.js dist && copyfiles --flat static/flowbite.phoenix.js.map dist && copyfiles --flat static/flowbite.phoenix.min.js.map dist",
     "build:dist": "mkdir -p dist && run-s build:css:min build:css build:js copy:js:dist",
