+
+
Editor
Templates
Docs +
+
+ {children}
+
+ );
+}
+
+// Custom hook for using theme
+export const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+};
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 2638d733..031e4dbd 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -18,6 +18,7 @@ import axios from "axios";
import { languages } from "../i18n/i18n";
import { Tweet } from "react-tweet";
import { socials } from "../data/socials";
+import { useTheme } from "../context/ThemeContext";
function shortenNumber(number) {
if (number < 1000) return number;
@@ -29,6 +30,8 @@ function shortenNumber(number) {
export default function LandingPage() {
const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
+ const { theme } = useTheme();
+
useEffect(() => {
const fetchStats = async () => {
await axios
@@ -36,7 +39,6 @@ export default function LandingPage() {
.then((res) => setStats(res.data));
};
- document.body.setAttribute("theme-mode", "light");
document.title =
"drawDB | Online database diagram editor and SQL generator";
@@ -44,36 +46,36 @@ export default function LandingPage() {
}, []);
return (
-
document
.getElementById("features")
@@ -28,24 +28,25 @@ export default function Navbar() {
Editor
Templates
Docs
-
@@ -92,7 +93,7 @@ export default function Navbar() {
width={window.innerWidth}
>
{
document
.getElementById("features")
@@ -105,24 +106,29 @@ export default function Navbar() {
Editor
Templates
Docs +
+
+ Theme:
+
);
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 00000000..a35e40ff
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,24 @@
+import { useTheme } from "../context/ThemeContext";
+
+export default function ThemeToggle({ className = "" }) {
+ const { theme, toggleTheme } = useTheme();
+
+ return (
+
+ );
+}
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 00000000..13f686f1
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,83 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+// Create context
+export const ThemeContext = createContext();
+
+// Theme provider component
+export default function ThemeProvider({ children }) {
+ // Check for system preference and stored preference
+ const getInitialTheme = () => {
+ // Check if we're in the browser
+ if (typeof window !== "undefined") {
+ // Check localStorage first
+ const storedTheme = localStorage.getItem("theme");
+ if (storedTheme) {
+ return storedTheme;
+ }
+
+ // Check system preference
+ const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ return userPrefersDark ? "dark" : "light";
+ }
+
+ // Default to light if not in browser
+ return "light";
+ };
+
+ const [theme, setTheme] = useState(getInitialTheme);
+
+ // Toggle theme function
+ const toggleTheme = () => {
+ setTheme(prevTheme => prevTheme === "light" ? "dark" : "light");
+ };
+
+ // Update localStorage and apply theme class to html element
+ useEffect(() => {
+ // Save to localStorage
+ localStorage.setItem("theme", theme);
+
+ // Apply class to html element
+ const htmlElement = document.documentElement;
+ if (theme === "dark") {
+ htmlElement.classList.add("dark");
+ } else {
+ htmlElement.classList.remove("dark");
+ }
+
+ // Also update the theme-mode attribute for semi-ui components
+ document.body.setAttribute("theme-mode", theme);
+ }, [theme]);
+
+ // Listen for system preference changes
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = () => {
+ // Only update if user hasn't manually set a preference
+ if (!localStorage.getItem("theme")) {
+ setTheme(mediaQuery.matches ? "dark" : "light");
+ }
+ };
+
+ // Add listener
+ mediaQuery.addEventListener("change", handleChange);
+
+ // Clean up
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }, []);
+
+ // Provide theme context to children
+ return (
+
-
-
+
+
+
{/* Hero section */}
-
+
+
+
-
+
+
Draw, Copy, and Paste
Free and open source, simple, and intuitive database design
editor, data-modeler, and SQL generator.{" "}
-
+
No sign up
-
+
Free of charge
-
+
Quick and easy
@@ -81,7 +83,7 @@ export default function LandingPage() {
Try it for yourself
@@ -103,10 +105,10 @@ export default function LandingPage() {
{/* Learn more */}
-
+
{/* Supported by */}
-
+
Supported by
@@ -121,13 +123,13 @@ export default function LandingPage() {
width={260}
className="m-auto mb-4"
/>
-
+
Next-gen AI-powered intelligent terminal for all platforms
-
+
Build diagrams with a few clicks, see the full picture, export SQL
scripts, customize your editor, and more.
@@ -160,7 +162,7 @@ export default function LandingPage() {
-
+
Design for your database
@@ -183,31 +185,30 @@ export default function LandingPage() {
>
-
+
More than just an editor
-
+
What drawDB has to offer
{features.map((f, i) => (
-
+ className="flex rounded-xl hover:bg-zinc-100 dark:hover:bg-gray-700 border border-zinc-100 dark:border-gray-700 shadow-xs hover:-translate-y-2 transition-all duration-300 dark:bg-gray-800">
+
- {f.title}
+ {f.title}
{f.content}
- {f.footer}
+ {f.footer}
))}
@@ -216,12 +217,12 @@ export default function LandingPage() {
{/* Tweets */}
-
-
+
+
What the internet says about us
-
+
+
© {new Date().getFullYear()} drawDB - All rights reserved.
diff --git a/tailwind.config.js b/tailwind.config.js
index 619a0f9f..269b905f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ export default {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
+ darkMode: 'class',
theme: {
screens: {
'3xl': {'max': '2047px'},
diff --git a/vite.config.js b/vite.config.js
index 5a33944a..8e26efea 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,57 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+ build: {
+ // Disable source maps to reduce memory usage
+ sourcemap: false,
+ // Use esbuild for minification (lighter than Terser)
+ minify: 'esbuild',
+ // Reduce chunk size to avoid memory issues
+ chunkSizeWarningLimit: 1000,
+ // Reduce parallel operations to minimize memory usage
+ target: 'es2015',
+ rollupOptions: {
+ output: {
+ // Limit the number of chunks to reduce memory usage
+ manualChunks: {
+ // Split large vendor dependencies into separate chunks
+ 'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+ 'ui-vendor': ['@douyinfe/semi-ui', 'framer-motion'],
+ 'editor-vendor': ['lexical', '@monaco-editor/react'],
+ 'lexical-vendor': [
+ '@lexical/react/LexicalComposer',
+ '@lexical/react/LexicalComposerContext',
+ '@lexical/html',
+ '@lexical/rich-text',
+ '@lexical/utils',
+ '@lexical/selection'
+ ],
+ 'utils-vendor': ['lodash', 'axios', 'nanoid', 'dexie', 'jszip', 'jspdf']
+ },
+ },
+ },
+ },
+ // Optimize dependencies to reduce processing time
+ optimizeDeps: {
+ include: [
+ 'react',
+ 'react-dom',
+ 'react-router-dom',
+ 'lexical',
+ '@lexical/react/LexicalComposer',
+ '@lexical/react/LexicalComposerContext',
+ '@lexical/html',
+ '@lexical/rich-text',
+ '@lexical/utils',
+ '@lexical/selection'
+ ],
+ esbuildOptions: {
+ // Fix for ESM/CJS interop issues
+ preserveSymlinks: true,
+ },
+ },
+});
+
-
+
{/* Supported by */}
-
+
Supported by
@@ -121,13 +123,13 @@ export default function LandingPage() {
width={260}
className="m-auto mb-4"
/>
-
-
+
Next-gen AI-powered intelligent terminal for all platforms
+
-
Build diagrams with a few clicks, see the full picture, export SQL
scripts, customize your editor, and more.
@@ -160,7 +162,7 @@ export default function LandingPage() {
+
Design for your database
@@ -183,31 +185,30 @@ export default function LandingPage() {
>
{/* Features */}
-
+
-
+
More than just an editor
-
+
What drawDB has to offer
{features.map((f, i) => (
{/* Tweets */}
-
-
+ className="flex rounded-xl hover:bg-zinc-100 dark:hover:bg-gray-700 border border-zinc-100 dark:border-gray-700 shadow-xs hover:-translate-y-2 transition-all duration-300 dark:bg-gray-800">
+
))}
@@ -216,12 +217,12 @@ export default function LandingPage() {
-
{f.title}
+ {f.title}
{f.content}
- {f.footer}
+ {f.footer}
-
+
+
What the internet says about us
-
+
+
-
Reach out to us
-
+
We love hearing from you. Join our community on Discord, GitHub, and
X.
@@ -295,12 +296,12 @@ export default function LandingPage() {
+
-
Attention! The diagrams are saved in your browser. Before clearing the
browser make sure to back up your data.
- -
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 619a0f9f..269b905f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ export default {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
+ darkMode: 'class',
theme: {
screens: {
'3xl': {'max': '2047px'},
diff --git a/vite.config.js b/vite.config.js
index 5a33944a..8e26efea 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,57 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
-})
+ build: {
+ // Disable source maps to reduce memory usage
+ sourcemap: false,
+ // Use esbuild for minification (lighter than Terser)
+ minify: 'esbuild',
+ // Reduce chunk size to avoid memory issues
+ chunkSizeWarningLimit: 1000,
+ // Reduce parallel operations to minimize memory usage
+ target: 'es2015',
+ rollupOptions: {
+ output: {
+ // Limit the number of chunks to reduce memory usage
+ manualChunks: {
+ // Split large vendor dependencies into separate chunks
+ 'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+ 'ui-vendor': ['@douyinfe/semi-ui', 'framer-motion'],
+ 'editor-vendor': ['lexical', '@monaco-editor/react'],
+ 'lexical-vendor': [
+ '@lexical/react/LexicalComposer',
+ '@lexical/react/LexicalComposerContext',
+ '@lexical/html',
+ '@lexical/rich-text',
+ '@lexical/utils',
+ '@lexical/selection'
+ ],
+ 'utils-vendor': ['lodash', 'axios', 'nanoid', 'dexie', 'jszip', 'jspdf']
+ },
+ },
+ },
+ },
+ // Optimize dependencies to reduce processing time
+ optimizeDeps: {
+ include: [
+ 'react',
+ 'react-dom',
+ 'react-router-dom',
+ 'lexical',
+ '@lexical/react/LexicalComposer',
+ '@lexical/react/LexicalComposerContext',
+ '@lexical/html',
+ '@lexical/rich-text',
+ '@lexical/utils',
+ '@lexical/selection'
+ ],
+ esbuildOptions: {
+ // Fix for ESM/CJS interop issues
+ preserveSymlinks: true,
+ },
+ },
+});
+
+
© {new Date().getFullYear()} drawDB - All rights reserved.