Merge pull request mermaid-js#296 from mermaid-js/daisyUI

Themes

README.md

@@ -1,4 +1,4 @@
-[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)[![Netlify Status](https://api.netlify.com/api/v1/badges/27fa023d-7c73-4a3f-9791-b3b657a47100/deploy-status)](https://app.netlify.com/sites/mermaidjs/deploys)
 
 # Contributors are welcome!
 
@@ -17,7 +17,7 @@ Edit, preview and share mermaid charts/diagrams.
 
 ## Live demo
 
-You can try out a live version [here](https://mermaid-js.github.io/mermaid-live-editor/).
+You can try out a live version [here](https://mermaid.live/).
 
 ## Docker
 

cypress/integration/themes.spec.ts

@@ -0,0 +1,57 @@
+describe('Test themes', () => {
+	describe('Test light themes', () => {
+		beforeEach(() => {
+			cy.clearLocalStorage();
+			cy.visit('/edit', {
+				onBeforeLoad(win) {
+					cy.stub(win, 'matchMedia')
+						.callThrough()
+						.withArgs('(prefers-color-scheme: dark)')
+						.returns({
+							matches: false
+						});
+				}
+			});
+			cy.contains('Change Theme').click();
+		});
+
+		it('should set light theme as default', () => {
+			cy.contains('light').parent().should('have.class', 'bordered');
+			cy.contains('dark').parent().should('not.have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+
+		it('should change themes when clicked', () => {
+			cy.contains('light').parent().should('have.class', 'bordered');
+			cy.contains('cupcake').click();
+			cy.contains('cupcake').parent().should('have.class', 'bordered');
+			cy.contains('light').parent().should('not.have.class', 'bordered');
+			cy.contains('dark').parent().should('not.have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+	});
+
+	describe('Test dark mode', () => {
+		// eslint-disable-next-line mocha/no-hooks-for-single-case
+		beforeEach(() => {
+			cy.clearLocalStorage();
+			cy.visit('/edit', {
+				onBeforeLoad(win) {
+					cy.stub(win, 'matchMedia')
+						.callThrough()
+						.withArgs('(prefers-color-scheme: dark)')
+						.returns({
+							matches: true
+						});
+				}
+			});
+			cy.contains('Change Theme').click();
+		});
+
+		it('should set dark theme as default', () => {
+			cy.contains('light').parent().should('not.have.class', 'bordered');
+			cy.contains('dark').parent().should('have.class', 'bordered');
+			cy.getLocalStorage('themeStore').snapshot();
+		});
+	});
+});

cypress/snapshots.js

@@ -16,13 +16,37 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "8.3.1",
+  "__version": "8.4.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"
     },
     "should not dim diagram when code is in sync": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Testing\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"
     }
+  },
+  "Test themes": {
+    "should set light theme as default": {
+      "1": "{\"theme\":\"light\",\"isDark\":false}"
+    },
+    "should change themes when clicked": {
+      "1": "{\"theme\":\"cupcake\",\"isDark\":false}"
+    },
+    "should set dark theme as default": {
+      "1": "{\"theme\":\"dark\",\"isDark\":true}"
+    },
+    "Test light themes": {
+      "should set light theme as default": {
+        "1": "{\"theme\":\"light\",\"isDark\":false}"
+      },
+      "should change themes when clicked": {
+        "1": "{\"theme\":\"cupcake\",\"isDark\":false}"
+      }
+    },
+    "Test dark mode": {
+      "should set dark theme as default": {
+        "1": "{\"theme\":\"dark\",\"isDark\":true}"
+      }
+    }
   }
 }

package.json

@@ -51,6 +51,7 @@
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
 		"analytics": "^0.7.14",
+		"daisyui": "^1.14.0",
 		"js-base64": "^3.7.1",
 		"mermaid": "^8.12.1",
 		"moment": "^2.29.1",

src/app.postcss

@@ -2,17 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.nav-btn {
-	@apply lg:p-2 py-3 px-0 block border-b-2 border-transparent hover:border-white;
-}
-
-.btn {
-	@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
+.input {
+	@apply flex-1 border-primary border-solid border-2 rounded;
 }
 .action-btn {
-	@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
-}
-
-.input {
-	@apply flex-1 border-indigo-400 border-solid border-2 rounded;
+	@apply btn btn-primary;
 }

src/lib/components/actions.svelte

@@ -153,39 +153,53 @@
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
 			<button class="action-btn w-full" on:click={onCopyClipboard}
-				><i class="far fa-copy" /> Copy Image to clipboard
+				><i class="far fa-copy mr-2" /> Copy Image to clipboard
 			</button>
 		{/if}
 		<button class="action-btn flex-auto" on:click={onDownloadPNG}>
-			<i class="fas fa-download" /> PNG
+			<i class="fas fa-download mr-2" /> PNG
 		</button>
 		<button class="action-btn flex-auto" on:click={onDownloadSVG}>
-			<i class="fas fa-download" /> SVG
+			<i class="fas fa-download mr-2" /> SVG
 		</button>
 		<button class="action-btn flex-auto">
-			<a target="_blank" href={iUrl}><i class="fas fa-external-link-alt" /> PNG</a>
+			<a target="_blank" href={iUrl}><i class="fas fa-external-link-alt mr-2" /> PNG</a>
 		</button>
 		<button class="action-btn flex-auto">
-			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt" /> SVG</a>
+			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
 
 		<div class="flex gap-2 items-center">
 			PNG size
-			<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} />
-			<label for="autosize">Auto</label>
-			<input type="radio" value="width" id="width-active" bind:group={imagemodeselected} />
-			<label for="width">Width</label>
-			<input type="radio" value="height" id="height-active" bind:group={imagemodeselected} />
-			<label for="height">Height</label>
+			<label for="autosize">
+				<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
+			</label>
+
+			<label for="width">
+				<input type="radio" value="width" id="width" bind:group={imagemodeselected} /> Width
+			</label>
+
+			<label for="height">
+				<input type="radio" value="height" id="height" bind:group={imagemodeselected} /> Height
+			</label>
+
 			{#if imagemodeselected !== 'auto'}
-				<input id="height" type="number" min="3" max="10000" bind:value={userimagesize} />
+				<input
+					id="height"
+					class="input"
+					type="number"
+					min="3"
+					max="10000"
+					bind:value={userimagesize} />
 			{/if}
 		</div>
 
 		<div class="w-full flex gap-2 items-center">
 			<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
 			<label for="markdown">
-				<button class="btn text-white flex-auto" on:click={onCopyMarkdown}> Copy Markdown </button>
+				<button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
+					Copy Markdown
+				</button>
 			</label>
 		</div>
 
@@ -197,7 +211,7 @@
 				bind:value={gistURL}
 				placeholder="Enter Gist URL" />
 			<label for="gist">
-				<button class="btn text-white flex-auto" on:click={loadGist}> Load Gist </button>
+				<button class="btn btn-primary btn-md flex-auto" on:click={loadGist}> Load Gist </button>
 			</label>
 		</div>
 		{#if isNetlify}

src/lib/components/card/card.svelte

@@ -7,21 +7,22 @@
 	export let tabs: Tab[] = [];
 	export let title: string;
 	$: isOpen = isCloseable ? isOpen : true;
+	$: isTabsShown = isOpen && tabs.length > 0;
 </script>
 
-<div class="bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col">
+<div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
 	<div
-		class="bg-indigo-400 border-gray-400 p-2 flex-none cursor-pointer"
+		class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
 		on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
-			<div class="flex gap-x-4 items-center text-white">
+			<div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
 				<slot name="actions" />
 			</div>
 		</div>
 	</div>
 	{#if isOpen}
-		<div class="flex-grow overflow-auto" transition:slide>
+		<div class="card-body p-0 flex-grow overflow-auto text-base-content" transition:slide>
 			<slot />
 		</div>
 	{/if}

src/lib/components/card/tabs.svelte

@@ -17,25 +17,20 @@
 </script>
 
 <div class="flex cursor-default">
-	<span class="text-white mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
+	<span class="mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
 		{#if isCloseable}
 			<i class="fas fa-chevron-right icon" class:isOpen />
 		{/if}
 		{title}</span>
 	{#if isOpen && tabs}
-		<ul class="flex flex-wrap flex-row" transition:fade>
+		<ul class="tabs" transition:fade>
 			{#each tabs as tab}
-				<li class="mr-2 last:mr-0 w-28 h-6 flex-auto text-center">
-					<div
-						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t flex justify-center items-center leading-normal {activeTabID ===
-						tab.id
-							? 'text-indigo-500 bg-white border-white'
-							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
-						on:click|stopPropagation={() => toggleTabs(tab)}>
-						<i class="{tab.icon} mr-1" />
-						{tab.title}
-					</div>
-				</li>
+				<div
+					class="tab tab-lifted text-primary-content {activeTabID === tab.id ? 'tab-active' : ''}"
+					on:click|stopPropagation={() => toggleTabs(tab)}>
+					<i class="mr-1 {tab.icon}" />
+					{tab.title}
+				</div>
 			{/each}
 		</ul>
 	{/if}

src/lib/components/editor/editor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { EditorEvents } from '$lib/types';
 	import { codeStore } from '$lib/util/state';
+	import { themeStore } from '$lib/util/theme';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { initEditor } from './util';
@@ -17,7 +18,7 @@
 		minimap: {
 			enabled: false
 		},
-		theme: 'mermaidTheme',
+		theme: 'mermaid',
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
@@ -33,6 +34,10 @@
 		editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
 	}
 
+	themeStore.subscribe(({ isDark }) => {
+		editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
+	});
+
 	const dispatch = createEventDispatcher<EditorEvents>();
 	const loadMonaco = async () => {
 		let i = 0;
@@ -62,7 +67,7 @@
 				text
 			});
 		});
-
+		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,

src/lib/components/editor/util.ts

@@ -365,9 +365,18 @@ export const initEditor = (monacoEditor): void => {
 		}
 	});
 
-	monacoEditor.editor.defineTheme('mermaidTheme', {
+	monacoEditor.editor.defineTheme('mermaid-dark', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
+			{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
+		]
+	});
+
+	monacoEditor.editor.defineTheme('mermaid', {
 		base: 'vs',
-		inherit: false,
+		inherit: true,
 		rules: [
 			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
 			{ token: 'keyword', foreground: '649696' },

src/lib/components/history/history.svelte

@@ -90,13 +90,13 @@
 	<div slot="actions">
 		<button
 			id="saveHistory"
-			class="btn"
+			class="btn btn-xs btn-success w-12"
 			on:click|stopPropagation={() => saveHistory()}
 			title="Save current state"><i class="far fa-save" /></button>
 		{#if $historyModeStore !== 'loader'}
 			<button
 				id="clearHistory"
-				class="btn text-red-400"
+				class="btn btn-xs btn-error w-12"
 				on:click|stopPropagation={() => clearHistory()}
 				title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
 		{/if}
@@ -107,7 +107,7 @@
 				<li class="rounded p-2 shadow flex-col">
 					<div class="flex">
 						<div class="flex-1">
-							<div class="flex flex-col">
+							<div class="flex flex-col text-base-content">
 								{#if url}
 									<a
 										href={url}
@@ -121,20 +121,18 @@
 							</div>
 						</div>
 						<div class="flex gap-2 content-center">
-							<button
-								class="rounded px-2 w-24 bg-green-200 hover:bg-green-300"
-								on:click={() => restoreHistory(state)}><i class="fas fa-undo" /> Restore</button>
+							<button class="btn btn-success" on:click={() => restoreHistory(state)}
+								><i class="fas fa-undo mr-1" />Restore</button>
 							{#if type !== 'loader'}
-								<button
-									class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
-									on:click={() => clearHistory(time)}><i class="fas fa-trash-alt" /> Delete</button>
+								<button class="btn btn-error" on:click={() => clearHistory(time)}
+									><i class="fas fa-trash-alt mr-1" />Delete</button>
 							{/if}
 						</div>
 					</div>
 				</li>
 			{/each}
 		{:else}
-			<div class="m-2 text-gray-600">
+			<div class="m-2">
 				No items in History<br />
 				Click the Save button to save current state and restore it later.<br />
 				Timeline will automatically be saved every minute.