Customise Kivy settings panel by redefining style.kv - python-3.x

Question

I am using the default Kivy Settings widget to create a settings screen for my app. I don't want to build a custom settings widget from scratch, but I would like to customise simple properties like the text size of each item and the colour of the "close" button.
Based on the Kivy docs and the answer to this question I understand that I need to modify the styles for the different Settings class widgets that are defined in style.kv. For example, I have been able to add the following to the top of my main.py to redefine the style of the MenuSidebar widget and change the size and colour of the settings "close" button:
from kivy.lang import Builder
Builder.load_string('''
<-MenuSidebar>:
size_hint_x: None
width: '200dp'
buttons_layout: menu
close_button: button
GridLayout:
pos: root.pos
cols: 1
id: menu
padding: 5
canvas.after:
Color:
rgb: .2, .2, .2
Rectangle:
pos: self.right - 1, self.y
size: 1, self.height
Button:
text: 'Close'
id: button
size_hint: None, None
width: root.width - dp(20)
height: max(50, self.texture_size[1] + dp(20))
pos: root.x + dp(10), root.y + dp(10)
font_size: '30sp'
Following a similar approach, I now want to modify the style of each setting item so that the text colour is red. I add the following into Builder.load_string() at the top of my main.py to redefine the style of the SettingItem widget:
<-SettingItem>:
size_hint: .25, None
height: labellayout.texture_size[1] + dp(10)
content: content
canvas:
Color:
rgba: 47 / 255., 167 / 255., 212 / 255., self.selected_alpha
Rectangle:
pos: self.x, self.y + 1
size: self.size
Color:
rgb: .2, .2, .2
Rectangle:
pos: self.x, self.y - 2
size: self.width, 1
BoxLayout:
pos: root.pos
Label:
size_hint_x: .66
id: labellayout
markup: True
text: u'{0}\\n[size=13sp][color=999999]{1}[/color][/size]'.format(root.title or '', root.desc or '')
font_size: '15sp'
color: [1, 0 , 0 , 1]
text_size: self.width - 32, None
BoxLayout:
id: content
size_hint_x: .33
Everything works as expected, however the value of each setting item disappears.
I have tried everything I can think off, but I can't work out how to modify the appearance of the settings screen without losing the actual value of each setting item, or messing up the whole layout of the settings screen. Can anyone advise how I can achieve my goal?
Here is a minimal reproducible example illustrating the issue that is based on the Kivy Settings example
from kivy.app import App
from kivy.uix.settings import SettingsWithSidebar
from kivy.logger import Logger
from kivy.lang import Builder
kv = '''
BoxLayout:
orientation: 'vertical'
Button:
text: 'Configure app (or press F1)'
on_release: app.open_settings()
Label:
id: label
text: 'Hello'
<-MenuSidebar>:
size_hint_x: None
width: '200dp'
buttons_layout: menu
close_button: button
GridLayout:
pos: root.pos
cols: 1
id: menu
padding: 5
canvas.after:
Color:
rgb: .2, .2, .2
Rectangle:
pos: self.right - 1, self.y
size: 1, self.height
Button:
text: 'Close'
id: button
size_hint: None, None
width: root.width - dp(20)
height: max(50, self.texture_size[1] + dp(20))
pos: root.x + dp(10), root.y + dp(10)
font_size: '30sp'
color: [1, 0 , 0, 1]
<-SettingItem>:
size_hint: .25, None
height: labellayout.texture_size[1] + dp(10)
content: content
canvas:
Color:
rgba: 47 / 255., 167 / 255., 212 / 255., self.selected_alpha
Rectangle:
pos: self.x, self.y + 1
size: self.size
Color:
rgb: .2, .2, .2
Rectangle:
pos: self.x, self.y - 2
size: self.width, 1
BoxLayout:
pos: root.pos
Label:
size_hint_x: .66
id: labellayout
markup: True
text: u'{0}\\n[size=13sp][color=999999]{1}[/color][/size]'.format(root.title or '', root.desc or '')
font_size: '15sp'
color: [1, 0 , 0 , 1]
text_size: self.width - 32, None
BoxLayout:
id: content
size_hint_x: .33
'''
json = '''
[
{
"type": "string",
"title": "Label caption",
"desc": "Choose the text that appears in the label",
"section": "My Label",
"key": "text"
},
{
"type": "numeric",
"title": "Label font size",
"desc": "Choose the font size the label",
"section": "My Label",
"key": "font_size"
}
]
'''
class MyApp(App):
def build(self):
self.settings_cls = SettingsWithSidebar
root = Builder.load_string(kv)
label = root.ids.label
label.text = self.config.get('My Label', 'text')
label.font_size = float(self.config.get('My Label', 'font_size'))
return root
def build_config(self, config):
config.setdefaults('My Label', {'text': 'Hello', 'font_size': 20})
def build_settings(self, settings):
settings.add_json_panel('My Label', self.config, data=json)
def on_config_change(self, config, section, key, value):
Logger.info("main.py: App.on_config_change: {0}, {1}, {2}, {3}".format(
config, section, key, value))
if section == "My Label":
if key == "text":
self.root.ids.label.text = value
elif key == 'font_size':
self.root.ids.label.font_size = float(value)
def close_settings(self, settings=None):
Logger.info("main.py: App.close_settings: {0}".format(settings))
super(MyApp, self).close_settings(settings)
MyApp().run()

Answer 1

Add this to your kv string:
<SettingString>:
Label:
text: root.value or ''
pos: root.pos
font_size: '15sp'
color: 1,0,0,1
Color obviously can be whatever you want.
this only works for the settings string, if you use other settings objects modify them in a similar way :)