I built a Streamlit chess opening viewer using python-chess where users can step through common openings move by move. I also added sidebar controls to customize the board appearance, including a color picker for light and dark squares and a slider to adjust board size.

At first, the color customization didn’t work because the values from the Streamlit color pickers weren’t being passed into the chess.svg.board() function. Even though the UI was updating, the board rendering was still using the default SVG colors.

To fix this, I connected the selected colors directly into the SVG generator using the colors parameter in chess.svg.board(), like this:

“square light” to light square color picker value
“square dark” to dark square color picker value

I also fixed the board size control by replacing the hardcoded value with the slider value.

Now the board updates dynamically based on user input, making the interface fully interactive and customizable.