如何在Kivy中更改背景颜色

Question

I need a bit of a hand with a program I'm trying to code using kivy and python 3, however I'm relatively new to both. What I need in my program is to setup two different background colours, that the user can switch between (a night mode, and one to use in daylight)

#globalvariable
backgroundcolour = [50, 50, 50]

class MainScreen(Screen):

    rgb = StringProperty()
    rgb = backgroundcolour

    def changebackground(self):
        self.canvas.clear()
        backgroundcolour = [55, 5, 99]
        print("DONE")

Kivy file:

<MainScreen>:
    name: 'main'
    canvas:
        Color: 
            rgb: root.rgb

However all I get after I run the changebackground subroutine, my kivy window just replaces itself with a blank black screen. I presume what I'm doing wrong is I'm not refreshing the window, or something, but I've got no idea how to go about doing that.]

Many thanks

Answer 1

canvas:
    Color: 
        rgb: root.rgb

After this part you have to draw something that will cover the widget background:

Rectangle:
    size: self.size
    pos: self.pos

or in your changebackground() :

with self.canvas:
    Color(rgb=self.rgb)  # rgba might be better
    Rectangle(size=self.size, pos=self.pos)

which is probably more optimal if you intend to use it when changing the color styles not so often. And the best thing would be using canvas.before , especially if you have a widget that draws something (eg Button ).

Also, the color is in range 0 - 1 , therefore your color will be some kind of really bright purple-ish something. And just a note: this will change only the widget's background, therefore your Window background will still be the default one (currently black). For this to change you'll need to use Window.clearcolor .

Answer 2

This is a pure python code on how to put background on layout, no Kivy design language

Code of App class not include

For future reference:

from kivy.uix.gridlayout import GridLayout
from kivy.graphics.vertex_instructions import Rectangle
from kivy.graphics.context_instructions import Color

from kivy.uix import button

class MyLayout(GridLayout):
    def __init__(self, **kwargs):
        super(MyLayout, self).__init__(**kwargs)
        self.cols = 1

        self.bind(
            size=self._update_rect,
            pos=self._update_rect
        )

        with self.canvas.before:
            Color(.20, .06, .31, 1)
            self.rect = Rectangle(
                size=self.size,
                pos=self.pos
            )

    def _update_rect(self, instance, value):
        self.rect.pos = instance.pos
        self.rect.size = instance.size

Note: To play with the color: my rgb values are (46, 14, 71), then just divide it with 255 (.20, .06, .31, 1). The last value is the alpha, 1 is 100%

Hope it can help you guys. Just up vote to help others who's also looking the answer.

Solution to your problem

Add this code init:

self.daylightBtn = button.Button(text="Day Light")
self.daylightBtn.bind(on_press=self.daylight_bg)
            
self.nightlightBtn = button.Button(text="Night Light")
self.nightlightBtn.bind(on_press=self.nighlight_bg)
            
self.add_widget(self.daylightBtn)
self.add_widget(self.nightlightBtn)

Button event:

   def daylight_bg(self, instance):
        with self.canvas.before:
            Color(1, 1, 1, 1)
            self.rect = Rectangle(
                size=self.size,
                pos=self.pos
            )


    def nighlight_bg(self, instance):
        with self.canvas.before:
            Color(0, 0, 0, 1)
            self.rect = Rectangle(
                size=self.size,
                pos=self.pos
            )

Answer 3

In .kv file

canvas.before:
        Color:
            rgba: (128, 0, 128, 1)
        Rectangle:
            size: self.size
            pos: self.pos

Hope to help you