| 1 | /** |
| 2 | * Dracula Dark theme for reveal.js. |
| 3 | * Based on https://draculatheme.com |
| 4 | */ |
| 5 | |
| 6 | // Load utils |
| 7 | @use 'sass:color'; |
| 8 | @use 'template/mixins' as mixins; |
| 9 | |
| 10 | // Include theme-specific fonts |
| 11 | $systemFontsSansSerif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, |
| 12 | helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; |
| 13 | $systemFontsMono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; |
| 14 | |
| 15 | $background: #282a36; |
| 16 | $foreground: #f8f8f2; |
| 17 | $selection: #44475a; |
| 18 | $comment: #6272a4; |
| 19 | $red: #ff5555; |
| 20 | $orange: #ffb86c; |
| 21 | $yellow: #f1fa8c; |
| 22 | $green: #50fa7b; |
| 23 | $purple: #bd93f9; |
| 24 | $cyan: #8be9fd; |
| 25 | $pink: #ff79c6; |
| 26 | |
| 27 | $mainFont: $systemFontsSansSerif; |
| 28 | $codeFont: 'Fira Code', $systemFontsMono; |
| 29 | |
| 30 | // Inject theme variables (with some overrides) |
| 31 | @use 'template/settings' with ( |
| 32 | $background-color: #191919, |
| 33 | |
| 34 | $main-font: $mainFont, |
| 35 | $main-font-size: 42px, |
| 36 | $main-color: $foreground, |
| 37 | |
| 38 | $code-font: $codeFont, |
| 39 | |
| 40 | $heading-color: $purple, |
| 41 | $heading-font: $mainFont, |
| 42 | $heading-font-weight: 600, |
| 43 | $heading-text-transform: none, |
| 44 | |
| 45 | $heading1-size: 2.5em, |
| 46 | $heading2-size: 1.6em, |
| 47 | $heading3-size: 1.3em, |
| 48 | $heading4-size: 1em, |
| 49 | |
| 50 | $link-color: $pink, |
| 51 | $link-color-hover: $cyan, |
| 52 | |
| 53 | $selection-color: #fff, |
| 54 | $selection-background-color: $selection |
| 55 | ); |
| 56 | |
| 57 | // Inject the theme template |
| 58 | @use 'template/theme'; |
| 59 | |
| 60 | // Change text colors against light slide backgrounds |
| 61 | @include mixins.light-bg-text-color($background); |
| 62 | |
| 63 | // Define additional color effects based on Dracula spec |
| 64 | // https://spec.draculatheme.com/ |
| 65 | :root { |
| 66 | --r-bold-color: #{$orange}; |
| 67 | --r-italic-color: #{$yellow}; |
| 68 | --r-inline-code-color: #{$green}; |
| 69 | --r-list-bullet-color: #{$cyan}; |
| 70 | } |
| 71 | |
| 72 | /** |
| 73 | * Dracula colors by Zeno Rocha |
| 74 | * https://draculatheme.com/contribute |
| 75 | */ |
| 76 | .reveal { |
| 77 | strong, |
| 78 | b { |
| 79 | color: var(--r-bold-color); |
| 80 | } |
| 81 | em, |
| 82 | i, |
| 83 | blockquote { |
| 84 | color: var(--r-italic-color); |
| 85 | } |
| 86 | code { |
| 87 | color: var(--r-inline-code-color); |
| 88 | } |
| 89 | // Dracula colored list bullets and numbers |
| 90 | ul, |
| 91 | ol { |
| 92 | li::marker { |
| 93 | color: var(--r-list-bullet-color); |
| 94 | } |
| 95 | } |
| 96 | } |
| 97 |