rdbende / sun-valley-ttk-theme

A gorgeous theme for Tkinter/ttk, based on the Sun Valley visual style ✨

Sun Valley ttk theme

Make your Tkinter application look better than ever with just two lines of code!

Installation

The theme is easily installable as a Python package

pip install sv-ttk

Usage

Note:

The theme will only be applied to themable (tkinter.ttk) widgets, and not with the regular Tkinter widgets, they only benefit from the colorscheme.

For detailed documentation, visit the wiki page.

import tkinter
from tkinter import ttk

import sv_ttk

root = tkinter.Tk()

button = ttk.Button(root, text="Click me!")
button.pack()

# This is where the magic happens
sv_ttk.set_theme("dark")

root.mainloop()

Wanna see more?

Check out my other ttk themes!

• The Azure ttk theme
• The Forest ttk theme

sun-valley-ttk-theme's Issues

Window resize slow problum

I opened the program manager, i see when i am resize the window, my CPU using is getting higher, like exponential growth, and the window become laggy...
But the gif branch and make the window good than the png branch, go to see the under of of Sun-Valley-ttk-theme's markdown file, it has gif branch, or see my project CodeNoteBook, i replace it very successful : every thing become very good, and the scrollbar become good than the png branch.
So, gif branch can save the CPU using, but can make the window beautifully?
Hope the finish the resize problum.
My CPU is “happy"... 👍🏼

Tree view indentation

I'm creating a personal application using this theme and trying to implement a treeview. I am not sure why, but the children items in the tree are not indented from their parents. I have attached an image showing this.

I am new to Tk/Ttk so I am not sure if the indentation has to be implemented manually or not, but it seems to be automatic judging by things online. I have looked at the documentation for ttk and can't find any option to toggle. Also looked through the theme files and tried tweaking them (I do not know tcl) but nothing seems to be working.

Any help would be appreciated, thanks.

anchor=center attribute in button not working

I already use style to center the text in the button, but the text cant be aligned to the center, can I know how to do so with your theme? sorry for opening this issue

How to optimize app?

Hello. I have a question. Why my program is very heavy and when I maximize and minimize the window, I get stuck on the screen for a few moments. Thank you for guiding me on how I can optimize the program.
here is my app:
Foundation Input.zip

thanks

Pyinstaller Error

Getting the error "ModuleNotFoundError: No module named 'sv_ttk'" when trying to open the exe file...

btw, this's my pyinstaller command:
''' pyinstaller --onefile -w .\scratch_3.py --hidden-import wikipedia --collect-data sv_ttk '''

Add animations for switch

Can you please add animations for the switch and stuff? That would take this project to a new level.

Allow to set accent color

Hi, I would reallay like you added a feature where you could set the accent color of the theme.

theme/light/radio-rest.png is corrupted

When trying to initialize Tkinter, the following error is thrown:

root.tk.call("source", "sun-valley.tcl")
_tkinter.TclError: couldn't recognize data in image file "./theme/light/radio-rest.png"

Explorer is unable to preview radio-rest.png and paint.net cannot open it.

The same issue is not observed with the dark theme.

Treeview font is too small with v2.3

I should publish a new release ASAP.

Change font to Segoe UI Variable Text/Display

Windows 11 uses the following fonts for UI:

• Segoe UI Variable Text for body text
• Segoe UI Variable Display for titles

Would it be possible to add those fonts to sv_ttk so it looks more integrated?

Custom Menu Bars Showing Opposite Theme (Mac)

When running an App using the theme custom menu bars have the opposite display mode to what the app is showing i.e. in dark mode the text is showing dark on dark menu (as opposed to light text on dark menu, in light mode the text is showing light text on light menu.

Occurring on MacOS Big Sur 11.5 with the OS theme set to dark.

Love the theme and your work, thank you. Hope the above helps.

Change Button Background

Hello rdbende

I want to be able to change the color of a button. Usually by hex code.
Since the buttons are pictures, I don't know how to do that.

Do you have any idea?

Looks like puke on Android

Ttk scaling...

Implement new elements from WinUI 3

WinUI 3 introduced some new UI elements, like Pill Button, Segmented Control and Lite Nav¹. This theme should include them as new styles.

Footnotes

1. https://www.figma.com/community/file/1159947337437047524 ↩

Add a `Text` widget

I would really love for a multi-line Text widget to be implemented!

beautify Combobox

Can you please beautify the Combobox. It doesn't fit the rest of the program at all. I would be very happy about that. Thanks in advance.

TclError: can't invoke "winfo" command: application has been destroyed

Hello, I am getting a TCL Error when I run the example code. I am currently programming in Visual Studio code, I also used the pip install method. When i run the code the first time around it works without any isssue, however when i go to run it once again the TCL error appears.

Do you know why this happens and/or a fix for this issue?

Attached is a picture of the calculator example code and the error that's being shown

Color of tk.Menu becomes weird when switching theme

Hi, thanks for this awesome looking theme. While I've been testing my program with this theme, I noticed a bit odd issue.
When switching themes, color of tk.Menu gets a little bit off.

When switching from dark to light: menu is white (i'm not sure but i think it should be light gray)
When switching from light to dark: menu is a little bit darker than original

and that's kinda OK but the real issue is switching once again. Text color changes but background color doesn't so text is unreadable.
From that point, color is fixed to slightly off color and only the text color changes.

I wasn't sure if the issue was on my code's side or theme's side so I made a dirty but quick test code using your example.

import tkinter as tk
from tkinter import ttk
import sv_ttk

THEME = 'dark'

class App(ttk.Frame):
    def __init__(self, parent):
        ttk.Frame.__init__(self, parent)

        # Create widgets
        self.setup_widgets()

    def setup_widgets(self):
        # Create a Frame for input widgets
        self.widgets_frame = ttk.Frame(self)
        self.widgets_frame.pack(expand=True)

        # Menu for the Menubutton
        self.menu = tk.Menu(self)
        self.menu.add_command(label="Menu item 1")
        self.menu.add_command(label="Menu item 2")
        self.menu.add_separator()
        self.menu.add_command(label="Menu item 3")
        self.menu.add_command(label="Menu item 4")

        # Menubutton
        self.menubutton = ttk.Menubutton(
            self.widgets_frame, text="Menubutton", menu=self.menu, direction="below"
        )
        self.menubutton.grid(row=0, column=0, padx=5, pady=10, sticky="nsew")

        # Button
        self.button = ttk.Button(self.widgets_frame, text="Switch Theme", command=sv_ttk.toggle_theme)
        self.button.grid(row=1, column=0, padx=5, pady=10, sticky="nsew")


def main():
    root = tk.Tk()
    root.title("Simple example")

    sv_ttk.set_theme(THEME)

    app = App(root)
    app.pack(fill="both", expand=True)

    root.update_idletasks()  # Make sure every screen redrawing is done

    width, height = root.winfo_width(), root.winfo_height()
    x = int((root.winfo_screenwidth() / 2) - (width / 2))
    y = int((root.winfo_screenheight() / 2) - (height / 2))

    # Set a minsize for the window, and place it in the middle
    root.minsize(250, 200)
    root.geometry(f"+{x}+{y}")

    menubar = tk.Menu(root)
    menu = tk.Menu(menubar, tearoff=0)

    menu.add_command(label='Menu item 1')
    menu.add_command(label='Menu item 2')
    menu.add_separator()
    menu.add_command(label='Menu item 3')
    menu.add_command(label='Menu item 4')
    menubar.add_cascade(label='Menu', menu=menu)
    root.config(menu=menubar)

    root.mainloop()


if __name__ == "__main__":
    main()

Result of changing theme from dark to light to dark:

Sure I can have the user restart program each time they change theme but that's kind of a last option so wanted to see if there are no fix/workaround.

The theme not apply correctly

why it render like this ?

-show option of ttk::treeview

These two commands
option add *Treeview.show tree
override the default -show option of ttk::treeview.

That's in Sun-Valley themes (dark & light) only.

And that's not very good. Drives a developer into mad searches, sort of "why my treeview not working as Tk default should?... while with other themes it works OK."

Will it be possible to change accent colour in the theme based on the PC's accent colour?

By default, for accented buttons and other stuff, this theme uses the default windows 11 blue accent colour. This looks good for most cases, but when the background is not particularly blue in colour, it kinda looks weird. So will it be possible to implement accent colours that change based on the user's accent colour, for more consistency?

Question: ToolButton doesent actuallay have transperent background

Hi, While using BlurWindow to get a acrilic effect in my app, it turns out that ToolButtons don't actually have transperent background. Are there any workarounds/code modifications to fix this?

Thanks!

Scaling issues with HighDPI

Problems with all elements:

• switch, checkboxes and radio buttons do not scale at all
• border radius of textboxes and buttons do not scale
• treeview height does not scale
• progress bar and scale does not scale

Theme doesn't apply itself

Hi,

I am trying to develop a simple popup window for TimerX.
Development code here. I accomplished so much in that, so I tried adding the Ttk to it.
Yeah, I know it's not a real popup yet, but back to the issue.
I got the theme code, v1.0.0 if you were going to ask and added it, did all the extravaganzas to set it up. However, on Replit as well as my local Windows 7 machine(which can very well display the theme), it doesn't apply itself. Do you have a fix for this? Or is the solution simple?

Edit: Changed to the latest source code but still fails.

Pyinstaller Problems

I use the module version of this theme in one of my apps, and it all works, as long as i dont compile it. When i compile the app with pyinstaller, i get an error when opening the exe.

How do i fix this?

Add support for Scrolled Text

Title bar is not black

In the examples, the title bar of the window is also coloured black. However, when I test it out I always have a white title bar.

Note:
I am working on Windows 10.

Merge control images into a single sprite sheet?

This theme is really helpful to make a GUI application with modern style. I have already used it in my personal projects!

The theme's controls are made up of hundreds of png images, and I think that lots of tiny files might be a little unfriendly to hard drive and compression. So I tried to merge these images into a single sprite sheet (the following image) and it works great. This is a small enhancement and may be useful for distributing the theme with GUI applications since the users generally don't need to modify these images.

(I put the light and dark theme together)

merged.zip

The zip archive contains the following files:

• sprites.png The merged sprite sheet image. It can be created with TexturePacker (non-free) or Free texture packer (free and open-source).
• sprites.json The sprite sheet image's metadata in "JSON (array)" format.
• extract.py Reads the metadata and generates tcl code to load separate files from the sprite sheet. The code replaces load_images.
• sun-valley.tcl Modified tcl code.

Checkbutton widget in dark mode problem

In dark mode I cannot set Checkbutton as selected, the field where the selction mark should be stays empty.

Combobox dropdown is not themed

I just want to know if it could be implemented, but i think you wouldve already done it if it was possible. Asking anyway.

File not found

couldn't read file "/theme/light.tcl": no such file or directory
  File "[C:\Users\kawle\Documents\VSC\installer\installer.py]()", line 33, in <module>
    window.tk.call('source', (dir_path+'/sun-valley.tcl'))```

code:

window = Tk()
style = ttk.Style(window)
window.tk.call('source', (dir_path+'/sun-valley.tcl'))
style.theme_use('sun-valley-light')

UI scales when toggling theme

I'm using Python and Tkinter for GUI. I've a function using switch and ttk for switching between light and dark mode:

def ThemeChanger():
    if screen.tk.call("ttk::style", "theme", "use") == "sun-valley-dark":
        # Set light theme
        screen.tk.call("set_theme", "light")
    else:
        # Set dark theme
        screen.tk.call("set_theme", "dark"

But when I clicked into the switch, all the UI automatically scales a litter bit:

It will scale larger if i use tabs or table in ttk Tkinter, and won't scale back when switch to light mode, it scales more and more when I clicked into theme switch button:

def change_theme():
    # NOTE: The theme's real name is sun-valley-<mode>
    if root.tk.call("ttk::style", "theme", "use") == "sun-valley-dark":
        # Set light theme
        root.tk.call("set_theme", "light")
    else:
        # Set dark theme
        root.tk.call("set_theme", "dark")

I don't know how to fix this. I would so appreciate if anyone can recommend me improving these. Thank you!

LabeledScale background

Hi
I noticed today that the background of LabeledScale is wrong. Can you fix that?

Add transparency option to button

I want to make something like this:

Can I use this use with PySimpleGUI?

Can this use with PySimpleGUI?

Dark theme has inconsistent padding compared to light theme

If you look closely at the titlebar in my demo window, the "b" becomes slightly more cut off than in light theme after the theme switches to dark. It appears to be affecting both the horizontal and vertical padding/margin, because more complex windows with vertically stacked items also results in the labels pushing the rest of the content down. Here is an example from another project I am working on:

I have skimmed through the light and dark tcl themes but haven't found anything that might cause this.

How to package sv_ttk into exe?

I use the following code to package into an exe.
#-----------------------------------------------------------------------
import os

dirPath = os.getcwd()

os.system(f'cd /d {dirPath}')
os.system(r'pyinstaller -F -n "test" main.py')
#-----------------------------------------------------------------------

And i got this error:
_tkinter.TclError: couldn't read file "C:\Users\Augus\AppData\Local\Temp_MEI43082\sv_ttk\sv.tcl": no such file or directory
.

And I used
#--------------
os.system(r'pyinstaller -p "D:\anaconda\envs\ocrApp" -F -n "test" main.py')
#---------------
.

But I still got this error.

_tkinter.TclError: couldn't read file "sun-valley.tcl": no such file or directory

I've done everything but the problem remains the same USING PYINSTALLER! Any Help?

`sv_ttk` doesn't work with multiple `tkinter.Tk` instances

hi . When I want to create several forms, the theme is only applied to one of them.

Cannot install with pip / requirements.txt yet

Currently, attempting to install this theme through the Github link with pip or a requirements.txt file results in an error:
ERROR: File "setup.py" not found for legacy project Sun-Valley-ttk-theme from git+git://github.com/rdbende/Sun-Valley-ttk-theme@master#egg=Sun-Valley-ttk-theme (from -r requirements.txt (line 7)).
This theme can therefore only be installed by placing it manually, resulting in more difficulty for the end user.
Are there any automatic installation options for this?

Thanks :-)

How to use this with Pyinstaller

Hello. This error is displayed during the execution of the program when we get an Exe with the pyinstaller. Thank you for your guidance

Traceback (most recent call last): File "main2.py", line 7, in <module> File "sv_ttk\__init__.py", line 59, in <lambda> File "sv_ttk\__init__.py", line 18, in wrapper _tkinter.TclError: couldn't read file "C:\Users\rahbar\AppData\Local\Temp\_MEI471922\sv_ttk\sun-valley.tcl": no such file or directory

Text background is not white

When my editor use sun-valley-ttk theme, i found a bug:
Python:3.9.9, Tcl/Tkinter:8.6, Windows:10
I used idle's highlight, when the highlight work, the highlighted word's background's color is different with the Text() background.
That looks bad.....
This is a bug or just my computer's wrong.
When i "take off" sun-valley-ttk theme, everything goes well, and the highlight color this not different with the Text() background
And use ttk lib isn't effect the Text() color, so i think is theme's wrong.
Can anyone tell me what is the happened.
Thx.
Program original file github.com/sadjok/CodeNoteBook

Importing files with the theme

Basically, I had to call in a file using the import module command so that I can access certain functions of it. It also has a GUI, however, when I use this theme, it throws up an error saying that winfo cannot be invoked.

I know that this theme requires that we should not destroy the Tcl Interpreter, and that we should make Toplevel windows. But I wanted to use this in multiple other python scripts, so toplevel windows aren't an option. Any suggestions/help would be very much appreciated as I ain't much of an expert with Python.

Edit: Basically, I seem to be unable to use import to import another python file, and I cannot use other ways to do so either as I wanna use the functions inside the script to be imported

TL;DR: I wanna import a script with a GUI (and one that uses this theme) into another one so that I can access its functions. But it seems like the original tcl interpreter is destroyed in the process

Feel free to ask if you have any questions :)

Odd Issue

I am not sure why, but the images for the custom buttons and stuff do not work. The only thing this style changes for me is when I hover over and click a button it turns blue and the background is slightly more gray. On Linux, you can see the entry and buttons as you're supposed to, but only in the file dialog? On windows, nothing works but the slight color changes mentioned earlier. I do not believe this is an issue with my code. I am using the module.

Strange dashed line around notebook tab text

When I create a notebookelement I get a dashed line around the tabs of the notebook. It only appears when i click on the tab and dissapears when I click on another element.

Is there a way to hide this line or can I change the color of it to the backgroundcolor ?

Can you update the 'pressed' state button in light mode to not transparent?

Because the button need to click multiple times before they can be insert into the content. It only happens in light mode because the 'pressed' state in light mode is a bit transparent, but the windows was also transparent for the mica effects so it needs to click multiple times before they can be insert into the content. This does not happen in dark mode, because the 'pressed' state in dark mode is not transparent.

2022-04-22-214358.mp4

Gif branch problems

There's no documentation for how to install the gif brach, replacing files didin't work for me.
I'm on windows 10, using python 3.10

Edit: Alright you have to replace the themes folder, nothing else
Anyway, gif branch seems as slow when resizing, I would rename this to gif brach problems now.

Should have Textbox Component

Changing tick mark color

Hi!
First of all, I love your themes!
Great work, really well done and easy to alter.

We basically could alter anything we wanted, either editing the .tcl files or overwriting the pngs provided.
But... The tick mark (esp, in dark mode).

Is that something that's part of tKinter or your theme?
I couldn't find a way to alter it.

As you can see, even in your Simple Example.py the contrast with the dark background is kinda meh.
The tick mark icon next to Option 1, I'm refering to.
I'd love to have it bright, instead of dark for better contrast.

Or... maybe I'm barking up the wrong tree and this is a part of tKinter by default?
If so, do you know what I need to alter?

Thanks in advance!

TclError: unknown option "-troughcolor"

I was programming a project. I did:

self.tk.call("source", self.path)
self.tk.call("set_theme", "light")

And I made a function like this:

def dark_mode(self, sync = True):
    """Turn Program into Dark Mode"""
    if sync:
	self.tk.call("set_theme", "dark")

    DWMWA_USE_IMMERSIVE_DARK_MODE = 20
    set_self_attribute = windll.dwmapi.DwmSetWindowAttribute
    get_parent = windll.user32.GetParent
    hwnd = get_parent(self.winfo_id())
    rendering_policy = DWMWA_USE_IMMERSIVE_DARK_MODE
    value = c_int(2)
    set_self_attribute(hwnd, rendering_policy, byref(value), sizeof(value))
    self["background"] = "black"

I want to make the program turn into dark mode, and I want theme into dark mode too.
But I get a error, it is:

_tkinter.TclError: unknown option "-troughcolor"

How can I change theme when it has already been loaded?