[Question] How do you apply themes to user defined elements

[ddunbar84]

Type of Issue (Enhancement, Error, Bug, Question)

Question

---

Operating System

MacOS 12.5.1 Monterey

PySimpleGUI Port (tkinter, Qt, Wx, Web)

tkinter

---

Versions

Version information can be obtained by calling sg.main_get_debug_data()
Python version: 3.11.5 (main, Sep 11 2023, 08:19:27) [Clang 14.0.6 ]
port: tkinter
tkinter version: 8.6.12
PySimpleGUI version: 4.60.5
PySimpleGUI filename: /Users/ddunbar/anaconda3/lib/python3.11/site-packages/PySimpleGUI/PySimpleGUI.py

Or you can print each version shown in ()

Python version (sg.sys.version)

PySimpleGUI Version (sg.__version__)

GUI Version (tkinter (sg.tclversion_detailed), PySide2, WxPython, Remi)

Tkinter

---

Your Experience In Months or Years (optional)

Years Python programming experience 5/6y dabbling and more for data science!

Years Programming experience overall 8/9y

Have used another Python GUI Framework? (tkinter, Qt, etc) (yes/no is fine) No

Anything else you think would be helpful?

---

Troubleshooting

These items may solve your problem. Please check those you've done by changing - [ ] to - [X]

• Searched main docs for your problem www.PySimpleGUI.org
• Looked for Demo Programs that are similar to your goal. It is recommend you use the Demo Browser! Demos.PySimpleGUI.org
• None of your GUI code was generated by an AI algorithm like GPT
• If not tkinter - looked for Demo Programs for specific port
• For non tkinter - Looked at readme for your specific port if not PySimpleGUI (Qt, WX, Remi)
• Run your program outside of your debugger (from a command line)
• Searched through Issues (open and closed) to see if already reported Issues.PySimpleGUI.org
• Have upgraded to the latest release of PySimpleGUI on PyPI (lastest official version)
• Tried using the PySimpleGUI.py file on GitHub. Your problem may have already been fixed but not released

Detailed Description

I'm trying to use a user defined element (UDE) similar what you had in your "Dashboard Mockup" example (here: https://pysimplegui.trinket.io/demo-programs#/graph-element/dashboard-mockup). I can apply the theme to all "sg.xxx" elements in the layout, however the theme doesn't apply to the used defined elements? And I cannot work it out, I may be doing something wrong, but not sure if this is the case or if there is a bug here? I'm trying to get the front end made before I add in the mechanics, as they will need the inputs from the gui to function. I changed the radio buttons in your UDE in the example above and the same thing happens, the spinner is dark and cannot be changed. If you place a spinner in the regular layout it picks up the theme. I can't even manually change the text box colour in the UDE.

Code To Duplicate

A short program that isolates and demonstrates the problem (Do not paste your massive program, but instead 10-20 lines that clearly show the problem)

This pre-formatted code block is all set for you to paste in your bit of code:

import sys
import os
import pandas as pd
#import tkinter as tk
import PySimpleGUI as sg 

sampleNum = [i for i in range(0,100)]
bloodList = {'Heparin blood':'-H-', 'Heparin plasma':'-Hp-', 'EDTA blood':'-E-', 'EDTA plasma':'-Ep-', 'Serum clotted':'-SC-',
            'Serum gel':'-SG-', 'Fluoride Oxalate':'-FO-', 'Glucose':'-Glu-',}
fluidList = {'Ascities (plain)':'-ASCp-', 'Ascities (EDTA)':'-ASCe-', 'Pleural effusion (plain)':'-PEp-', 'Pleural effusion (EDTA)':'-PEe-',
             'Pericaridal effusion (plain)':'-PCEp-','Pericaridal effusion (EDTA)':'-PCEe-', 'Aqueous humour (plain)':'-AHp-',
             'Aqueous humour (EDTA)':'-AHe-'}
swabList = {'VTM oropharyngeal':'-VTMo', 'VTM conjunctival':'-VTMc-', 'VTM nasal':'-VTMn-', 'VTM vaginal':'-VTMv-', 'VTM scab':'-VTMs-',
            'Charcoal oropharyngeal':'-CHARo-', 'Charcoal conjunctival':'-CHARc-', 'Charcoal nasal':'-CHARn-', 'Charcoal vaginal':'-CHARv-',
            'Aimes oropharyngeal':'-AIMo-', 'Aimes conjunctival':'-AIMc-', 'Aimes nasal':'-AIMn-', 'Aimes vaginal':'-AIMv-',
            'Dry oropharyngeal':'-DRYo-', 'Dry conjunctival':'-DRYc-', 'Dry nasal':'-DRYn-', 'Dry vaginal':'-DRYv-'}
faecalList = {'Faeces':'-FAEC-', 'Faeces (3d pool)':'-FAEC3-', 'Faecal swab (any)':'-FAECsw-'}
cytologyList = {'Blood smear':'-SMEARbl-', 'Fluid smear':'-SMEARfl-', 'FNA smear (add site)':'-SMEARfna-'}
otherList = {'Fresh tissue (add site)':'-TISS-', 'Fixed tissue (add site)':'-FTISS-'}

sampleArray = ["2H","1E","1eASC"]
sampleList = ', '.join(sampleArray)

def typeFrames(title, sample_dict):
    layout = [[sg.Text(title,  size=(26,1), justification='center', font='Current 16 underline')]]
    for item, key in sample_dict.items():
        sg.theme('BlueMono'),
        layout += [[sg.Spin(sampleNum, initial_value=0, size=(4,2), readonly=True, enable_events=True, key=key, font='Current 14'), sg.Text(item, font='Current 14')]]
    return sg.Frame('',layout,)

sg.theme('BlueMono')

sampleCol1 = [
            [typeFrames("Bloods", bloodList)], 
            [typeFrames("Fluids", fluidList)],
            [typeFrames("Faecal", faecalList)],
            [typeFrames("Other", otherList)]]

sampleCol2 = [
            [typeFrames("Swabs", swabList)],
            [typeFrames("Cytology", cytologyList)],
            [sg.Button('Generate sample lsit and copy to clipboard', key='-GEN-', size=35, font='Current 14')],
            [sg.Multiline(("add output array here as a string"+"."), size=(35,4), font='Current 14')]]

clinhxLayout = [[sg.T('Clinical history selector')]]

sampleLayout = [ 
        [sg.Text('Select samples submitted: ', font='Current 14')],
        [sg.Spin(sampleNum, initial_value=0)],
        [sg.Column(sampleCol1), sg.Column(sampleCol2)]]

layout = [[sg.Column([[sg.Text('VDS Snippets ', font='Current 30')]]),
        sg.Column([[sg.Button('Exit', font='Current 14')]], key='-EXIT-', element_justification='r', expand_x=True)]]


layout +=[[sg.TabGroup([[sg.Tab('Samples submitted', sampleLayout),
                         sg.Tab('Clinical history', clinhxLayout)]], key='-TAB GROUP-', expand_x=True, expand_y=True, font='Current 14')]]

window = sg.Window("VDS Snippets", layout, keep_on_top=True)

while True:
            event, values = window.read()
            print(event, values)
            out = print(sampleList, end=".")
            #window['-S_OUT-'].update(out)
            if event == sg.WIN_CLOSED or event == 'Exit':
                break
            if event == '-GEN-':
                print('You pressed the button')

window.close()
exit(0)

Screenshot, Sketch, or Drawing

---

Watcha Makin?

I'm building a tool to be used for standardising the input of details about samples submitted to our laboratory, to save errors, style and format differences between users. It'll hopefully make it easier to use the data from the database.

[jason990420]

It should be caused by the option readonly=True in the Spin element.

import PySimpleGUI as sg


font = ("Courier New", 12)
themes = ("Black", "BlueMono", "Reddit", "GreenTan", "Green")

sg.theme("DarkBlue3")
sg.set_options(font=font)

layout = [[sg.Text("readonly=True", size=15)], [sg.Text("readonly=False", size=15)]]
for theme in themes:
    sg.theme(theme)
    layout[0] += [sg.Spin([1,2,3,4,5], size=4, readonly=True, key=theme)]
    layout[1] += [sg.Spin([1,2,3,4,5], size=4)]
layout += [[sg.Button("Change")]]

window = sg.Window("Title", layout)

while True:

    event, values = window.read()

    if event == sg.WIN_CLOSED:
        break
    elif event == "Change":
        for theme  in themes:
            window[theme].widget.configure(readonlybackground='gray')

window.close()

It looks like that PySimpleGUI didn't set the color for readonly Spin element, after you click the Button Change, the background color of Spin will be changed gray.

[ddunbar84]

Ah ok. I think I can change that setting for now as a workaround. Thank you for the rapid response! :)

[PySimpleGUI]

Yea, unlike some other elements, the Input element for example, the Spin doesn't have the "disabled colors" exposed in the API.

The Input element has these additional parameters in the constructor:

 disabled_readonly_background_color=None, disabled_readonly_text_color=None, selected_text_color=None, selected_background_color=None,

Gray is typically the tkinter default for read-only or disabled widgets.

A number of elements need to be expanded to include more control over the states such as readonly.