You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dracula.scss 2.1KB

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