-
-
Save leekelleher/77186f83da0f763b02d3ccfd5b1acb88 to your computer and use it in GitHub Desktop.
: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); | |
} |
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, | |
}; |
@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
https://github.com/umbraco/Umbraco.CMS.Backoffice/discussions/1002#discussioncomment-9020771
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 ofdracula
? π€·ββοΈπ
@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
Note
The code in this gist is licensed under the MIT license.