aboutsummaryrefslogtreecommitdiff
path: root/present/css/theme/source/dracula.scss
diff options
context:
space:
mode:
Diffstat (limited to 'present/css/theme/source/dracula.scss')
-rw-r--r--present/css/theme/source/dracula.scss132
1 files changed, 132 insertions, 0 deletions
diff --git a/present/css/theme/source/dracula.scss b/present/css/theme/source/dracula.scss
new file mode 100644
index 0000000..67fb59c
--- /dev/null
+++ b/present/css/theme/source/dracula.scss
@@ -0,0 +1,132 @@
+/**
+ * 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, .reveal b {
+ color: var(--r-bold-color);
+}
+
+.reveal em, .reveal i, .reveal blockquote {
+ color: var(--r-italic-color);
+}
+
+.reveal code {
+ color: var(--r-inline-code-color);
+}
+
+// Dracula colored list bullets and numbers
+.reveal ul {
+ list-style: none;
+}
+
+.reveal ul li::before {
+ content: "•";
+ color: var(--r-list-bullet-color);
+ display: inline-block;
+ width: 1em;
+ margin-left: -1em
+}
+
+.reveal ol {
+ list-style: none;
+ counter-reset: li;
+}
+
+.reveal ol li::before {
+ content: counter(li) ".";
+ color: var(--r-list-bullet-color);
+ display: inline-block;
+ width: 2em;
+
+ margin-left: -2.5em;
+ margin-right: 0.5em;
+ text-align: right;
+}
+
+.reveal ol li {
+ counter-increment: li
+}