diff options
Diffstat (limited to 'present/css/theme/source/dracula.scss')
| -rw-r--r-- | present/css/theme/source/dracula.scss | 132 | 
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 +} | 
