question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Theme doesn't apply when using components

See original GitHub issue

Can’t get themes to apply when using bokeh.embed.components.

Have tried manually using theme.apply_to_model(model), but it doesn’t seem to work.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
djpughcommented, Nov 16, 2016

I’ve hit this too, and it looks like it is because components uses a

with _ModelInDocument:

Which adds the model to a document, which combined with _attach_document in model.py applies the document theme and then the default theme if it is removed. It seems to work if you add the model to a document before calling components:

p = figure()
curdoc().theme = Theme(json={'attrs': {'Title': {'text_color': 'pink'}}})
cudoc().add_root(p)
script, div = components(p)

@bryevdv - I’m happy to look at a fix, I guess the obvious one would be to do something to preserve the theme in the with _ModelInDocument: call even if the model is not in a document

0reactions
djpughcommented, Nov 17, 2016

Something like:

class _ModelInDocument(object):
    # 'models' can be a single Model, a single Document, or a list of either
    def __init__(self, models):
        from .document import Document
        self._to_remove_after = []
        self._theme = []
        if not isinstance(models, list):
            models = [models]

        self._doc = _find_some_document(models)
        if self._doc is None:
            # oh well - just make up a doc
            self._doc = Document()

        for model in models:
            if isinstance(model, Model):
                if model.document is None:
                    # Gets the model theme (or None if no theme)
                    self._theme.append(model.themed_values())
                    self._to_remove_after.append(model)

    def __exit__(self, type, value, traceback):
        for i, model in enumerate(self._to_remove_after):
            model.document.remove_root(model)
            if self._theme[i] is not None:
                # Applies the model theme after removing the document
                model.apply_theme(self._theme[i])

    def __enter__(self):
        for i, model in enumerate(self._to_remove_after):
            # This should preserve model theming here
            self._doc.add_root(model)
            if self._theme[i] is not None:
                # Applies the model theme after adding the document
                model.apply_theme(self._theme[i])

But I’m not sure if this would have repercussions elsewhere - otherwise this could be done around the with loop in embed.py.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material-UI theme not working in shared-component
I'm dealing with something similar and haven't resolved it completely, but I have a strong feeling it involves multiple React contexts being created...
Read more >
How to customize - Material UI - MUI
Learn how to customize Material UI components by taking advantage of different strategies for specific use cases.
Read more >
Adding themes to a React app using styled-components | Blog
In this blog post, we'll go through some reasons you might want to provide theme options in your next application, and have a...
Read more >
The complete guide to Angular Material Themes - Tomas Trajan
Angular Material contains components like dropdown or dialog which create overlay over the application's default layout, to theme these elements we have to...
Read more >
Theming with React and MUI - Welcome, Developer
Learn how to create custom themes to React app using MUI. ... is a emotion's library that allows to use styled components in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found