diff options
Diffstat (limited to '2024-06-18-guix-social/reveal.js/css/theme/source/dracula.scss')
-rw-r--r-- | 2024-06-18-guix-social/reveal.js/css/theme/source/dracula.scss | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/2024-06-18-guix-social/reveal.js/css/theme/source/dracula.scss b/2024-06-18-guix-social/reveal.js/css/theme/source/dracula.scss new file mode 100644 index 0000000..ae968b8 --- /dev/null +++ b/2024-06-18-guix-social/reveal.js/css/theme/source/dracula.scss @@ -0,0 +1,106 @@ +/** + * Dracula Dark theme for reveal.js. + * Based on https://draculatheme.com + */ + + +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + + +// Include theme-specific fonts +$systemFontsSansSerif: -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif; +$systemFontsMono: Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, + monospace; + +/** + * Dracula colors by Zeno Rocha + * https://draculatheme.com/contribute + */ +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +$background: #282A36; +$foreground: #F8F8F2; +$selection: #44475A; +$comment: #6272A4; +$red: #FF5555; +$orange: #FFB86C; +$yellow: #F1FA8C; +$green: #50FA7B; +$purple: #BD93F9; +$cyan: #8BE9FD; +$pink: #FF79C6; + + + +// Override theme settings (see ../template/settings.scss) +$mainColor: $foreground; +$headingColor: $purple; +$headingTextShadow: none; +$headingTextTransform: none; +$backgroundColor: $background; +$linkColor: $pink; +$linkColorHover: $cyan; +$selectionBackgroundColor: $selection; +$inlineCodeColor: $green; +$listBulletColor: $cyan; + +$mainFont: $systemFontsSansSerif; +$codeFont: "Fira Code", $systemFontsMono; + +// Change text colors against light slide backgrounds +@include light-bg-text-color($background); + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- + +// Define additional color effects based on Dracula spec +// https://spec.draculatheme.com/ +:root { + --r-bold-color: #{$orange}; + --r-italic-color: #{$yellow}; + --r-inline-code-color: #{$inlineCodeColor}; + --r-list-bullet-color: #{$listBulletColor}; +} + +.reveal { + strong, b { + color: var(--r-bold-color); + } + em, i, blockquote { + color: var(--r-italic-color); + } + code { + color: var(--r-inline-code-color); + } + // Dracula colored list bullets and numbers + ul, ol { + li::marker { + color: var(--r-list-bullet-color); + } + } +} + |