Created
April 4, 2024 18:36
-
-
Save leekelleher/77186f83da0f763b02d3ccfd5b1acb88 to your computer and use it in GitHub Desktop.
Prototype of Dracula Theme for Umbraco CMS (v14/Bellissima)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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