Background color Speck

[raimon-fa]

Hi everyone, Is there a way to change the background of the 3d molecular view using Speck? Thanks a lot for the help!

[kinimesi]

You can change the background by using custom CSS: https://dash.plotly.com/external-resources

Here is a simple example to demonstrate it: create a folder named assets, add styles.css file in it with the following content:

#my-speck {
  background-color: red;
}

This is your app.py file:

import six.moves.urllib.request as urlreq
from six import PY3

import dash
import dash_bio as dashbio
import dash_html_components as html
from dash_bio_utils import xyz_reader

app = dash.Dash(__name__)

data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/speck_methane.xyz').read()

if PY3:
    data = data.decode('utf-8')

data = xyz_reader.read_xyz(datapath_or_datastring=data, is_datafile=False)

app.layout = html.Div([
dashbio.Speck(
    data=data,
    id='my-speck',
    view={
        'resolution': 400,
        'ao': 0.1,
        'outline': 1,
        'atomScale': 0.25,
        'relativeAtomScale': 0.33,
        'bonds': True
    }
)  
])

if __name__ == '__main__':
    app.run_server(debug=True)

Once you run it, you will get the following: