rdbende / Sun-Valley-ttk-theme

A gorgeous theme for Tkinter/ttk, based on the Sun Valley visual style ✨
https://pypi.org/project/sv-ttk
MIT License
1.91k stars 111 forks source link

Add main asset source code #130

Closed GogleSiteBank closed 6 months ago

GogleSiteBank commented 6 months ago

Allow us to see the main asset source, it would be so useful to know what widgets are what and how to use them, for example I have no clue how to get a slider/toggle bar but I would love to be able to, just allowing me to see that asset's source would give me the power to do that

rdbende commented 6 months ago

All asset's source is in this repo (dark.svg and light.svg). The XML nodes even have their ids set, to be easily identifiable.

GogleSiteBank commented 6 months ago

How do I get a clean slider? Like the ones without the thumb, "rect5385" doesn't help, but maybe im looking in the wrong place

rdbende commented 6 months ago

How do I get a clean slider? Like the ones without the thumb

I'm not exactly sure what you mean by "clean slider", but in the source SVG the thumb and the through are separate objects.

GogleSiteBank commented 6 months ago

the one shown on the bottom right here, without the thumb, in Azure TTK you can use a style but im not sure if its the same here screenshot

rdbende commented 6 months ago

Ah, I got it! So basically you want something like the Tick.TScale.

For that you can basically just copy the code from the azure ttk theme, create your custom "tick" thumb SVG, and re-build the compiled PNG spritesheet with spritesheet_generator.js

ttk::style layout Horizontal.Tick.TScale {
    Horizontal.TickScale.trough -sticky ew -children {
        Horizontal.TickScale.slider -sticky w
    }
}

ttk::style layout Vertical.Tick.TScale {
    Vertical.TickScale.trough -sticky ns -children {
        Vertical.TickScale.slider -sticky n
    }
}

[...]

ttk::style element create Horizontal.TickScale.trough image $I(scale-hor) \
    -border 5 -padding 0

ttk::style element create Horizontal.TickScale.slider \
    image [list $I(tick-hor-accent) \
        disabled $I(tick-hor-basic) \
        pressed $I(tick-hor-hover) \
        active $I(tick-hor-hover) \
    ] -sticky {}

ttk::style element create Vertical.TickScale.trough image $I(scale-vert) \
    -border 5 -padding 0

ttk::style element create Vertical.TickScale.slider \
    image [list $I(tick-vert-accent) \
        disabled $I(tick-vert-basic) \
        pressed $I(tick-vert-hover) \
        active $I(tick-vert-hover) \
    ] -sticky {}
GogleSiteBank commented 6 months ago

Alright, is there not a way to do it just as the pure python code like with the checkbox? Did you do this for the PNG I uploaded before?

rdbende commented 6 months ago

Alright, is there not a way to do it just as the pure python code like with the checkbox?

No. Every element is built in Tcl code using PNG images.