-
DescriptionOn one page of a Quarto website, I'd like to override my site-wide However, I want the colour to be different depending on whether the website is in light or dark mode. Is there a way of doing that? Is it possible, for example, to evaluate such chunks depending on which mode is active? If this is not possible within a chunk, is there a way of doing it with a raw html block? Even better, is there a way to do this that picks up variables in my where I have also tried defining additional e.g. in and in the page yaml: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
|
The body.quarto-dark a:hover {
color: $second-color;
} |
Beta Was this translation helpful? Give feedback.
-
|
Indeed, this would be the more reliable way to have conditional (S)CSS based on themes. |
Beta Was this translation helpful? Give feedback.
-
|
@jimjam-slam, that's a much neater solution for what I wanted to achieve. Thank you 😄. I wasn't sure about making the page-specific chunk pick up the scss variable, but hard-coding the colours is good enough. So now, this css chunk is working well: |
Beta Was this translation helpful? Give feedback.
-
|
@EllaKaye SCSS is a compiled version of CSS, so you can't add SCSS outside of the compilation path which is in Quarto via the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @mcanouil. I can't seem to make then in the page yaml: but when I render, I just see the contents of |
Beta Was this translation helpful? Give feedback.
-
|
Here is a full example: ---
title: "Quarto Playground"
format:
html:
theme:
light: flatly
dark: darkly
include-in-header:
text: |
<style type="text/css">
body.quarto-light a:hover {
color: #006AD4;
}
body.quarto-dark a:hover {
color: #D46A00;
}
</style>
---
This is a playground for [Quarto](https://quarto.org). |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @mcanouil, so helpful (as always!) I didn't know about type="text/css". Using include-in-header with this has really tidied up my code. In case you'd like to see what this is for, it's now live at https://adventofcode.ellakaye.co.uk. On each year's listing page, the post titles (on hover) match the colour of the page's title and navbar link. It's only a small detail, but I think it's pretty neat! |
Beta Was this translation helpful? Give feedback.
-
|
The type attribute is not mandatory, this is also true for script tag, but it makes everything explicit. |
Beta Was this translation helpful? Give feedback.
@jimjam-slam, that's a much neater solution for what I wanted to achieve. Thank you 😄. I wasn't sure about making the page-specific chunk pick up the scss variable, but hard-coding the colours is good enough. So now, this css chunk is working well: