Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Question: How do I change the style at runtime by clicking a button #2115

Closed
manastalukdar opened this issue Aug 31, 2019 · 4 comments
Closed

Question: How do I change the style at runtime by clicking a button #2115

manastalukdar opened this issue Aug 31, 2019 · 4 comments

Comments

@manastalukdar
Copy link

I have highlight.js integrated into my website along with a style by including the corresponding css file. My website has light and dark modes. When the user changes the theme by clicking a button, I would also like to change the style (say from atom-one-light to atom-one-dark and vice versa) associated with highlight.js. If someone could please provide any pointer on how to do this that would be great.
@manastalukdar manastalukdar mentioned this issue Aug 31, 2019
Closed
@faunaee
Copy link

faunaee commented Sep 4, 2019 •
edited by joshgoebel

The highlight.js demo page shows you one way to do it: https://highlightjs.org/demo/

Each of the alternate stylesheets is included in a <link> tag in the page's <head> tag. demo.js (https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js) disables all but the currently-selected style.

@lucasvazq
Copy link

If you are using sass/scss and handle your dependencies with npm, you can do the next thing:

@use "sass:meta";

html[data-theme="light"] {
  @include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
  @include meta.load-css("highlight.js/styles/a11y-dark");
}

To make it to work, you need to define the data-theme attribute in your html.

<html data-theme="light">  <!-- ensure to change it with javascript and define one with default -->
  ...
</html>

@raeperd raeperd mentioned this issue Jul 20, 2022
Closed
@Pomax
Copy link

Pomax commented Mar 13, 2024

@faunaee that link doesn't appear to work (anymore):

image

@joshgoebel
Copy link
Member

Updated link to new demo page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@joshgoebel @Pomax @manastalukdar @lucasvazq @faunaee