How do you create custom Revealjs themes in Quarto? | Emil Hvitfeldt | Data Science Lab

Style presentation slides with SCSS — you don’t even have to write it by hand by using reusable Quarto templates and Positron’s Theme Tweaker extension! In this episode of the Data Science Lab, hosts Libby Heeren and Isabella Velásquez welcome Emil Hvitfeldt to demonstrate how to build, customize, and share custom Revealjs themes in Quarto using SCSS and the Positron IDE. The Data Science Lab is a live weekly call. Register at pos.it/dslab! Discord invites go out each week on lives calls. We'd love to have you! It's is an open, messy space for learning and asking questions. Think of it like pair coding with a friend or two. Learn something new, and share what you know to help others grow. 0:00 Introduction & Welcome 3:34 Meet Emil Hvitfeldt 3:53 Demo: NES Retro Theme for Quarto Revealjs 8:57 Code Readability: Bracket Pair Colorization in Positron 11:24 SCSS for Variables, Fonts 17:06 Demo: Earth Theme 25:06 Publishing & Sharing Themes via GitHub 28:39 Building a Theme from Scratch with Theme Tweaker Resources: Quarto presentations: https://quarto.org/docs/presentations/revealjs/ Emil’s NES Quarto slide theme: https://github.com/EmilHvitfeldt/quarto-nes-theme Emil’s blog post on his setup: https://emilhvitfeldt.com/post/positron-settings-extensions/#editor-settings Bracket pair colorization from Catppuccin theme: https://github.com/catppuccin/vscode/blob/main/packages/catppuccin-vsc/src/theme/tokens/markdown.ts#L6-L92 Make your own theme in 10 minutes: https://slidecrafting-book.com/10-minute Format templates: https://quarto.org/docs/extensions/formats.html#format-templates How to add a logo to Quarto revealjs slides: https://quarto.org/docs/presentations/revealjs/index.html#footer-logo Brand.yml: https://posit-dev.github.io/brand-yml/ Quarto SCSS variables: https://quarto.org/docs/output-formats/html-themes.html#sass-variables Emil’s Quarto theme tweaker VSCode Extension (gives you a UI to change sass variables): https://marketplace.visualstudio.com/items?itemName=EmilHvitfeldt.quarto-theme-tweaker Emil’s quarto slides starter template: https://github.com/EmilHvitfeldt/quarto-revealjs-template Andrew Heiss' Data Science Lab on Positron extensions: https://www.youtube.com/watch?v=kqYbJoebrwE&list=PL9HYL-VRX0oSeWeMEGQt0id7adYQXebhT&index=18 Slidecrafting chapter on slide themes: https://slidecrafting-book.com/theme Emil's Earth RevealJS theme: https://github.com/EmilHvitfeldt/quarto-revealjs-earth Native Tabs: https://lucasprag.com/posts/underrated-vscode-feature-native-tabs/ Sass files: https://sass-lang.com/guide/ Tomorrow Night Eighties theme: https://open-vsx.org/extension/shelbylevel/tomorrow-night-eighties-r-classic