Prototype of Dracula Theme for Umbraco CMS (v14/Bellissima)

dracula.theme.css

:root {
	/* Dracula Theme
   * Links for reference:
	 * https://draculatheme.com/contribute
	 * https://spec.draculatheme.com/
	 * https://github.com/dracula/visual-studio-code/blob/master/src/dracula.yml
	*/

	/* Dracula: Base */
	--umb-dragula-background: #282a36;
	--umb-dragula-foreground: #f8f8f2;
	--umb-dragula-selection: #44475a;
	--umb-dragula-comment: #6272a4;
	--umb-dragula-cyan: #8be9fd;
	--umb-dragula-green: #50fa7b;
	--umb-dragula-orange: #ffb86c;
	--umb-dragula-pink: #ff79c6;
	--umb-dragula-purple: #bd93f9;
	--umb-dragula-red: #ff5555;
	--umb-dragula-yellow: #f1fa8c;

	/* Dracula: ANSI */
	--umb-dragula-ansi-black: #21222c;
	--umb-dragula-ansi-red: #ff5555;
	--umb-dragula-ansi-green: #50fa7b;
	--umb-dragula-ansi-yellow: #f1fa8c;
	--umb-dragula-ansi-blue: #bd93f9;
	--umb-dragula-ansi-magenta: #ff79c6;
	--umb-dragula-ansi-cyan: #8be9fd;
	--umb-dragula-ansi-white: #f8f8f2;
	--umb-dragula-ansi-bright-black: #6272a4;
	--umb-dragula-ansi-bright-red: #ff6e6e;
	--umb-dragula-ansi-bright-green: #69ff94;
	--umb-dragula-ansi-bright-yellow: #ffffa5;
	--umb-dragula-ansi-bright-blue: #d6acff;
	--umb-dragula-ansi-bright-magenta: #ff92df;
	--umb-dragula-ansi-bright-cyan: #a4ffff;
	--umb-dragula-ansi-bright-white: #ffffff;

	/* Dracula: UI Variants */
	--umb-dragula-background-lighter: #424450;
	--umb-dragula-background-light: #343746;
	--umb-dragula-background-dark: #21222c;
	--umb-dragula-background-darker: #191a21;

	/* Umbraco */
	--uui-color-background: var(--umb-dragula-background);
	--uui-color-border: var(--umb-dragula-background-dark);
	--uui-color-header-surface: var(--umb-dragula-background-dark);
	--uui-color-surface: var(--umb-dragula-background-light);
	--uui-color-surface-emphasis: var(--umb-dragula-background-lighter);

	--uui-color-text: var(--umb-dragula-foreground);
	--uui-color-interactive: var(--umb-dragula-foreground);

	--uui-color-current: var(--umb-dragula-pink);
	--uui-color-current-emphasis: var(--umb-dragula-ansi-bright-magenta);
	--uui-color-default-emphasis: var(--umb-dragula-pink);
	--uui-color-interactive-emphasis: var(--umb-dragula-pink);

	--uui-color-header-contrast-emphasis: var(--umb-dragula-pink);
	--uui-tab-text-active: var(--umb-dragula-pink);

	--uui-button-background-color: var(--umb-dragula-selection);
	--uui-button-background-color-hover: var(--umb-dragula-comment);

	--uui-color-danger: var(--umb-dragula-red);
	--uui-color-danger-standalone: var(--umb-dragula-red);

	--uui-color-divider-standalone: var(--uui-color-border);
}

manifest.ts

import type { ManifestTheme } from '@umbraco-cms/backoffice/extension-registry';

export const manifest: ManifestTheme = {
  type: 'theme',
  alias: 'umb-dracula-theme',
  name: 'Dracula',
  css: 'dracula.theme.css',
  weight: 500,
};

Note

The code in this gist is licensed under the MIT license.

@leekelleher was it on purpose naming the variables dragula instead of dracula? 🤷‍♂️🙃

Some other inspiration I found https://daisyui.com/docs/themes/

Not sure about how and if Monaco editor theme change, when switching theme, but I guess it possible can switch theme - eventually if backoffice used Shiki's syntax highlighting
umbraco/Umbraco.CMS.Backoffice#1002 (comment)

So potentially it could switch to dracula theme. For other theme it may be possible to ship and register a custom theme to code editor / syntax highlighting.

@leekelleher was it on purpose naming the variables dragula instead of dracula? 🤷‍♂️🙃

@bjarnef Haha, it's a typo... but I do listen to Rob Zombie, so maybe I subconsciously did it on purpose. 😂
https://youtu.be/EqQuihD0hoI?si=Eyz-JO8im80eSRUM