use native CSS vars from exposer #2740
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
As an example how this could be used. in Index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>reveal.js</title>
<link rel="stylesheet" href="../dist/reset.css" />
<link rel="stylesheet" href="../dist/reveal.css" />
<link rel="stylesheet" href="../dist/theme/black.css" />
<link rel="stylesheet" href="theme-customization.css" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="../plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section
data-markdown="slides.md"
data-separator="^\n---\n$"
data-separator-vertical="^\n\|\|\|\n$"
></section>
</div>
</div>
<script type="module">
import Reveal from "../dist/reveal.esm.js";
import Markdown from "../plugin/markdown/markdown.esm.js";
import Highlight from "../plugin/highlight/highlight.esm.js";
import Notes from "../plugin/notes/notes.esm.js";
import Math from "../plugin/math/math.esm.js";
Reveal.initialize({
plugins: [Markdown, Highlight, Notes, Math],
math: {
mathjax:
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js",
config: "TeX-AMS_HTML-full",
},
});
</script>
</body>
</html>with the following in theme-customization.css :root {
--background-color: #ffffff;
--main-color: #000000;
--heading-color: rgb(31, 2, 136);
--main-font-size: 16pt;
}
.test {
--heading-color: rgb(29, 153, 60);
}overwriting the vars in Assuming a slides.md file with the following Content: # Test Slide 1
some content
---
# Test Slide2
<!-- .slide: data-state="test" -->
some other content
|||
# Horizontal Test-Slide
some content |
flooki009
approved these changes
Sep 17, 2020
|
Any chance of this PR being revitalized and approved? I just wanted to change the font from a built-in theme, and this would make it really easy to do so. |
Repository owner
deleted a comment from
Katy-kaboom101
May 27, 2021
|
This has been merged—thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
just created this change according to my request in #2739
This uses the already exposed CSS Variables in the theme template instead of the SASS vars. we´re still initializing the CSS Vars with the Values from SASS, so it should be compatible.
This allows us to easy overwrite theme vars without building a custom theme.