Change the colour of the buttons of the toolbar when using Quill?

Question

Current toolbar

Above I linked an image of how the toolbar currently looks like. I'm trying to make the colour of the buttons and the text in the dropdowns white.

var toolbarOptions = [
        [{ 'header': [1, 2, 3, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote'],
        [{ 'align': ['', 'center', 'justify'] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }]                  
    ];

    var quill = new Quill('#editor', {
        modules: { toolbar: toolbarOptions },
        theme: 'snow'
    });

Answer 1

Maybe buttons and dropdowns styles are customizable with js, but couldn't find that in docs. However, css is still an option - if that works for you:

.ql-toolbar .ql-stroke {
    fill: none;
    stroke: #fff;
}

.ql-toolbar .ql-fill {
    fill: #fff;
    stroke: none;
}

.ql-toolbar .ql-picker {
    color: #fff;
}