| Marc Kupietz | 09b7575 | 2023-10-07 09:32:19 +0200 | [diff] [blame] | 1 | /** |
| 2 | * Dracula Dark theme for reveal.js. |
| 3 | * Based on https://draculatheme.com |
| 4 | */ |
| 5 | |
| 6 | |
| 7 | // Default mixins and settings ----------------- |
| 8 | @import "../template/mixins"; |
| 9 | @import "../template/settings"; |
| 10 | // --------------------------------------------- |
| 11 | |
| 12 | |
| 13 | |
| 14 | // Include theme-specific fonts |
| 15 | $systemFontsSansSerif: -apple-system, |
| 16 | BlinkMacSystemFont, |
| 17 | avenir next, |
| 18 | avenir, |
| 19 | segoe ui, |
| 20 | helvetica neue, |
| 21 | helvetica, |
| 22 | Cantarell, |
| 23 | Ubuntu, |
| 24 | roboto, |
| 25 | noto, |
| 26 | arial, |
| 27 | sans-serif; |
| 28 | $systemFontsMono: Menlo, |
| 29 | Consolas, |
| 30 | Monaco, |
| 31 | Liberation Mono, |
| 32 | Lucida Console, |
| 33 | monospace; |
| 34 | |
| 35 | /** |
| 36 | * Dracula colors by Zeno Rocha |
| 37 | * https://draculatheme.com/contribute |
| 38 | */ |
| 39 | html * { |
| 40 | color-profile: sRGB; |
| 41 | rendering-intent: auto; |
| 42 | } |
| 43 | |
| 44 | $background: #282A36; |
| 45 | $foreground: #F8F8F2; |
| 46 | $selection: #44475A; |
| 47 | $comment: #6272A4; |
| 48 | $red: #FF5555; |
| 49 | $orange: #FFB86C; |
| 50 | $yellow: #F1FA8C; |
| 51 | $green: #50FA7B; |
| 52 | $purple: #BD93F9; |
| 53 | $cyan: #8BE9FD; |
| 54 | $pink: #FF79C6; |
| 55 | |
| 56 | |
| 57 | |
| 58 | // Override theme settings (see ../template/settings.scss) |
| 59 | $mainColor: $foreground; |
| 60 | $headingColor: $purple; |
| 61 | $headingTextShadow: none; |
| 62 | $headingTextTransform: none; |
| 63 | $backgroundColor: $background; |
| 64 | $linkColor: $pink; |
| 65 | $linkColorHover: $cyan; |
| 66 | $selectionBackgroundColor: $selection; |
| 67 | $inlineCodeColor: $green; |
| 68 | $listBulletColor: $cyan; |
| 69 | |
| 70 | $mainFont: $systemFontsSansSerif; |
| 71 | $codeFont: "Fira Code", $systemFontsMono; |
| 72 | |
| 73 | // Change text colors against light slide backgrounds |
| 74 | @include light-bg-text-color($background); |
| 75 | |
| 76 | // Theme template ------------------------------ |
| 77 | @import "../template/theme"; |
| 78 | // --------------------------------------------- |
| 79 | |
| 80 | // Define additional color effects based on Dracula spec |
| 81 | // https://spec.draculatheme.com/ |
| 82 | :root { |
| 83 | --r-bold-color: #{$orange}; |
| 84 | --r-italic-color: #{$yellow}; |
| 85 | --r-inline-code-color: #{$inlineCodeColor}; |
| 86 | --r-list-bullet-color: #{$listBulletColor}; |
| 87 | } |
| 88 | |
| 89 | .reveal { |
| 90 | strong, b { |
| 91 | color: var(--r-bold-color); |
| 92 | } |
| 93 | em, i, blockquote { |
| 94 | color: var(--r-italic-color); |
| 95 | } |
| 96 | code { |
| 97 | color: var(--r-inline-code-color); |
| 98 | } |
| 99 | // Dracula colored list bullets and numbers |
| 100 | ul, ol { |
| 101 | li::marker { |
| 102 | color: var(--r-list-bullet-color); |
| 103 | } |
| 104 | } |
| 105 | } |
| 106 | |