1
0
Fork 0
why-cant-we-deploy-today/css/theme/source/dracula.scss

117 lines
2.4 KiB
SCSS
Raw Normal View History

/**
* 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
2023-05-23 19:50:14 +02:00
$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 * {
2023-05-23 19:50:14 +02:00
color-profile: sRGB;
rendering-intent: auto;
}
2023-05-23 19:50:14 +02:00
$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 {
2023-05-23 19:50:14 +02:00
--r-bold-color: #{$orange};
--r-italic-color: #{$yellow};
--r-inline-code-color: #{$inlineCodeColor};
--r-list-bullet-color: #{$listBulletColor};
}
2023-05-23 19:50:14 +02:00
.reveal strong,
.reveal b {
color: var(--r-bold-color);
}
2023-05-23 19:50:14 +02:00
.reveal em,
.reveal i,
.reveal blockquote {
color: var(--r-italic-color);
}
.reveal code {
2023-05-23 19:50:14 +02:00
color: var(--r-inline-code-color);
}
// Dracula colored list bullets and numbers
.reveal ul {
2023-05-23 19:50:14 +02:00
list-style: none;
}
.reveal ul li::before {
2023-05-23 19:50:14 +02:00
content: "";
color: var(--r-list-bullet-color);
display: inline-block;
width: 1em;
margin-left: -1em;
}
.reveal ol {
2023-05-23 19:50:14 +02:00
list-style: none;
counter-reset: li;
}
.reveal ol li::before {
2023-05-23 19:50:14 +02:00
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 {
2023-05-23 19:50:14 +02:00
counter-increment: li;
}