Frame around a code chunk - theme problem

[witszymanski]

``I have a custom theme which is frankensteined from different other themes and it does something strange to my code chunk in the presentation. If I use simple default theme, the code looks like this:

You can see, that there is a frame around the code, which I don't want to have. I was deleting parts of the theme.scss and I found out, that the part of the code that causes problem is this

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

Without it, the slide looks like this:

I'm a Quarto noob still, and I can't locate the ../template/theme

Can anyone help me?

Greets

Theme:

/*-- scss:rules --*/

/**
 * 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: #272822;
$foreground: #F8F8F2;
$selection: #44475A;
$comment: #75715E;
$red: #F92672;
$orange: #FD971F;
$yellow: #E6DB74;
$green: #A6E22E;
$purple: #AE81FF;
$cyan: #8BE9FD;
$pink: #FF79C6;
$heading: #CCE0E6;




// Override theme settings (see ../template/settings.scss)
$mainColor: $foreground;
$headingColor: $orange;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: $background;
$linkColor: $green;
$linkColorHover: $cyan;
$selectionBackgroundColor: $selection;
$inlineCodeColor: $green;
$listBulletColor: $cyan;
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;

$mainFont: $systemFontsSansSerif;
$codeFont: "Fira Code", $systemFontsMono;

// Change text colors against light slide backgrounds
@include light-bg-text-color($background);



// Define additional color effects based on Dracula spec
// https://spec.draculatheme.com/
:root {
	--r-bold-color: #{$green};
	--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);
}



// Dracula colored list bullets and numbers





h1 {

}

h2 {
    font-weight: bold !important;
}

// Monokai title
h1.title {
  font-size: 2.2em;
  line-height: 100px;
  #margin-top: -250px;
  width: 70%;
  letter-spacing: 0.01em;
}

#title-slide {
  text-align: left;
  display: none;

  .institute, .quarto-title-affiliation {
    font-weight: bold !important;
    font-size: 90%;
  }

  .author, .quarto-title-author-name {
    color: #f5f7f7;
  }

  .quarto-title-authors {
    display: flex;
    justify-content: left;
  
    .quarto-title-author {
      padding-left: 0em;
      padding-right: 0em;
      width: 100%;
    }
  }

  p.author::before, div.quarto-title-author::before {
    content: "";
    display: block;
    border: none;
    background-color: $body-color;
    color: #f5f7f7;
    height: 3px;
    margin-bottom: 1em;
  }

  p, a {
    padding-top: 1em;
    color: #f5f7f7;
     font-size: 120%;
     letter-spacing: 0.01em;
  }
}

.reveal .slides section[data-state="title"] .footer {
    display: none;
}

[cderv]

Are the theme made for Quarto or adapted from a reveal.js theme ?
Usually those @import lines are from Reveal.js custom theme : Dracula ones is there https://github.com/hakimel/reveal.js/blob/master/css/theme/source/dracula.scss#L7-L9

This means the ../template folder is there: https://github.com/hakimel/reveal.js/tree/master/css/theme/template

But with Quarto you should not need to go this low for customization

Customize a theme

This is documented here: https://quarto.org/docs/presentations/revealjs/themes.html#customizing-themes

You can customize the dracula theme for example by providing only some modification layer in a custom.scss and do this

format:
  revealjs: 
    theme: [dracula, custom.scss]

Creating a theme

This is documented here: https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes

You can just provide a quarto theme file, and we'll add the revealjs mixins for you internally when merging

You can find more about the design of those Quarto theme files in this part of the doc: https://quarto.org/docs/output-formats/html-themes-more.html (it is about Bootstrap integration too, but even with that main idea applies to RevealJS format as we use the same theming system)

I believe you should reorganize your .scss file to correctly use a /*-- scss:defaults --*/ section for variables, and then /*-- scss:rules --*/ for the CSS rules.

Hope it helps

[yutannihilation]

@cderv
Hi, I was about to file a feature request for adding the dracula theme! Do you think your example code is supposed to work? The dracula theme was added in version 4.5.0, which was released in this April.

format:
  revealjs: 
    theme: [dracula, custom.scss]

And, guessing from this issue, maybe revealjs used in Quato is not v4 yet?

hakimel/reveal.js#3324

[cderv]

Yes unfortunately, Quarto bundles currently revealjs v4.3.1

So indeed my examples won't work as is, without using an updated version of revealjs.

We track the need for update here

• Update Revealjs to latest version 5 #4795

[yutannihilation]

Oh, I see. I didn't notice the issue. Thanks for the details!