kivy: change background color to white

Question

I'd like to have an app with black buttons and labels, and with white text, and thus, would like to have white space separating these widgets. I suppose that in order to do so, it would be necessary to convert the background from the default color, which is black, to white. What is the best way of accomplishing this? Thank you!

score 78 · Accepted Answer · answered Jan 01 '14 at 20:01

78

A simple way is to simply draw a big white rectangle behind your root widget. For instance, in kivy language you could do

<YourRootWidget>:
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

I think you can also actually directly set the colour that kivy clears the window background with, which is exposed as Window.clearcolor. You would do this with

from kivy.core.window import Window
Window.clearcolor = (1, 1, 1, 1)

You would probably need to put this before anything else in your app, as it won't affect anything if run after the window has been created.

answered Jan 01 '14 at 20:01

inclement

29,124
4
48
60

2

Thank you! Interestingly, it appears that the 'Window.clearcolor' solution can be used at any point, rather than only prior to the creation of the window. – James_L Jan 01 '14 at 20:13
1

Okay, I guess the ClearColor instruction is at the top of the graphics tree. As long as it works! – inclement Jan 01 '14 at 20:21
I love this! I've been fiddling ages to change Pong background color :D – Pitto Apr 27 '14 at 15:36
How do I draw it just behind my label widget? – Charles Merriam Feb 02 '15 at 03:52
This code should add the Rectangle before the rest of the stuff on the label's canvas. – inclement Feb 02 '15 at 12:40
This is not working for SettingsWithTabbedPane class. I changed background color in style.kv file in kivy installed directory. – Halil İbrahim Oymacı Jan 06 '20 at 13:21

score 1 · Answer 2 · answered Nov 23 '20 at 04:18

I have created a module for this purpose. Please check: Details on Github

#Change background color of a kivy layout
#Place the CustomGraphics.py file to a folder
#code starts here

import sys
sys.path.append([path to CustomGraphics.py])
from CustomModules import CustomGraphics
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label

class TestApp(App):
    def build(self):
        layout = BoxLayout(orientation='vertical', size=(Window.width, Window.height))
        label = Label(text="Remember my name: It's Smruti Ranjan Gochhayat")
        layout.add_widget(label)
        CustomGraphics.SetBG(layout, bg_color=[1,0,0,1])
        return layout
if __name__ == '__main__':
    TestApp().run()
    
#code ends here

I wish it is helpful for some people

you should post the code for the function directly here. Also CustomGraphics does not need to inherit from App — Etienne D, Dec 26 '20 at 15:33

score 0 · Answer 3 · edited Aug 31 '23 at 13:06

Every Layout has a canvas, which can be used as canvas.before or canvas.after and then you get the desired output. If you have some sort of Layout, like a BoxLayout, then you can use canvas.before with the Color instruction like this.

Here I am showing a more complex example with an image, that I am trying in a Food App.

<MainUI>:
BoxLayout:
    orientation:"vertical"
    padding:10
    spacing:10
    canvas.before:
        Color:
            rgba:1,1,1,0.4
        Rectangle:
            pos:self.pos
            size:self.size
            source:"images/bg1.png"

this works with anything, and it looks like this.

Now if you just make the transparency to 100% or 1 in the Color > rgba instruction, and simply remove the image instruction.

<MainUI>:
BoxLayout:
    orientation:"vertical"
    padding:10
    spacing:10
    canvas.before:
        Color:
            rgba:1,1,1,1
        Rectangle:
            pos:self.pos
            size:self.size

and it turns the full background white.

kivy: change background color to white

3 Answers3

Linked

Related