117 lines
2.4 KiB
SCSS
117 lines
2.4 KiB
SCSS
/**
|
|
* 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;
|
|
}
|