Giter Club home page Giter Club logo

azure-ttk-theme's Introduction

Azure theme for ttk

Screenshot of the Azure theme

How to use?

Just like for my Sun Valley theme in version 2.0 I wanted to make usage of the theme very simple, so the theme setting is handled by a separate tcl script. This way whether you want to use a dark or light theme, you need to import just a single file. The other thing that makes this a good solution is that normally switching between light and dark theme is not entirely perfect, and the colors are not correct.

# Just simply import the azure.tcl file
widget.tk.call("source", "azure.tcl")

# Then set the theme you want with the set_theme procedure
widget.tk.call("set_theme", "light")
# or
widget.tk.call("set_theme", "dark")

Changing themes

Normally changing between themes isn't that easy, because then the colors aren't correct. See this Stackoverflow question. However, with my current solution, you can change theme at any time, without any color issues.

import tkinter as tk
from tkinter import ttk

root = tk.Tk()

# Pack a big frame so, it behaves like the window background
big_frame = ttk.Frame(root)
big_frame.pack(fill="both", expand=True)

# Set the initial theme
root.tk.call("source", "azure.tcl")
root.tk.call("set_theme", "light")

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

# Remember, you have to use ttk widgets
button = ttk.Button(big_frame, text="Change theme!", command=change_theme)
button.pack()

root.mainloop()

New style elements

Azure theme has a style for every ttk widget, but there are some new widget styles, such as an accent button, toggle switch, toggle button, tickscale, and card. You can apply these with the style parameter.

If you need a highlighted button, use Accent.TButton:

accent_button = ttk.Button(root, text='Accent button', style='Accent.TButton', command=callback)

To create a toggle button you need a checkbutton, to which you can apply the Toggle.TButton style:

toggle_button = ttk.Checkbutton(root, text='Toggle button', style='Toggle.TButton', variable=var)

The use of switches instead of checkboxes is becoming more common these days, so this theme has a Switch.TCheckbutton style, that can be applied to checkbuttons:

switch = ttk.Checkbutton(root, text='Switch', style='Switch.TCheckbutton', variable=var)

If you don't like the big circle on the scale, you prefer something more solid, then use the Tick.TScale style:

tick_scale = ttk.Scale(root, style='Tick.TScale', variable=var)

If you only want a border around your widgets, not an entire LabelFrame then apply the Card.TFrame style to a Frame:

card = ttk.Frame(root, style='Card.TFrame', padding=(5, 6, 7, 8))

Bugs

  • Tk isn't really good at displaying png images, so if your program is laggy with the theme, please check out the gif-based branch!
  • If your app has a treeview widget, and you change the theme the window will expand horizontally. This is a quite strange bug that applies to all ttk themes.

If you scrolled down here, please check out my other themes!

azure-ttk-theme's People

Contributors

dashyyy avatar mcuntz avatar oldium avatar rdbende avatar robertjn64 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

azure-ttk-theme's Issues

Link error in README

At the very top the link to (I'm assuming) your forest theme you typed github.dom instead of github.com

image

Unable to change the font of ttk.Entry and ttk.Label

Using ttk.Style() there is no impact on the font for both Entry and Label.
My code is as follows:
ttk.Style().configure("TEntry", font=("Righteous", 13 * -1), foreground="red")
ttk.Style().configure("TLabel", font=("Righteous", 13 * -1), foreground="red")
It seems to work at changing the color but fails to update the font.
There is also a slight naming inacuracy with
ttk.Style().configure("Label", font=("Righteous", (13 + size * 2) * -1), foreground="orange")
According to the docs it should be 'TLabelFrame' rather than just 'Label'

I have attached an image of the issue, the font of TMenubutton changes correctly but the font of TEntry and TLabel do not change.
font_changes

notebook tab issue

I was using this theme for a notebook and i decided to make the tabposition in the west, but the tabs looked weird, since it looked like they were leaning on the notebook from their bottom, even though its positioned in the west.

Is it okay if you make different tab images for each notebook tabposition?
If not, then thats okay.

Standard method of additional theme features in Python

This is absolutely the most gorgeous theme for Tkinter I've ever seen. It's refined and it even has alternative toggle button styles! I feel like gushing about it is appropriate here, really awesome!

I'd love to talk about the special features of your theme, and maybe how to standardize them, if you'd like? I've got some work setup in a private repository from a few months back, but I wasn't sure how to continue. If you'd want to, you can drop me an e-mail at the address listed in my profile - I would have sent you one but there's no e-mail address on your profile.

We can also discuss here, of course, if that's what you prefer. I'll have to do some refactoring on my code before making it public though.

2.0

Azure-ttk-theme 2.0 introduced some breaking changes

Relicensing

Any release below 2.0 is licensed under the LGPL v2.1 license.

Any release above version 2.0 is licensed under the MIT license!

Please pay attention to which terms and conditions apply to the release you're using!

Theme refactored

There were plenty of changes and improvements in version 2.0. This affected, among other things, the way of setting a theme and additional widget style naming! If you want/have to use a different theme setting method or widget style naming, please use version 1.4.1.

New widget style names:

Old name New name
AccentButton Accent.TButton
ToggleButton Toggle.TButton
Switch Switch.TCheckbutton
TickScale Tick.TScale
Card Card.TFrame

Using theme with Tabs - Performance issue

After I added tabs to my app with the theme activated I started to experience performance issues.

Also, the tabs and menu bar don't have any visual effect from the theme.

But I really like your Dark theme so keep going :)

TCL files have an error

When i tried to use the azure theme for my project, tkinter gave me an error saying:
_tkinter.TclError: can't read "I(box-disabled)": no such element in array

Changing font color in dark.tcl doesn't change anything

I was trying to change the foreground colour of disabled labels in the dark theme (dark.tcl), but changing it didn't have any effect.
Changing it at azure.tcl did bring the expected results.
Am I missing something?

dark.tcl:

namespace eval ttk::theme::azure-dark {
    variable version 2.0
    package provide ttk::theme::azure-dark $version

    ttk::style theme create azure-dark -parent clam -settings {
        proc load_images {imgdir} {
            variable I
            foreach file [glob -directory $imgdir *.gif] {
                set img [file tail [file rootname $file]]
                set I($img) [image create photo -file $file -format gif]
            }
        }

        load_images [file join [file dirname [info script]] dark]

        array set colors {
            -fg             "#ffffff"
            -bg             "#333333"
            -disabledfg     "#aaaaaa"
            -disabledbg     "#737373"
            -selectfg       "#ffffff"
            -selectbg       "#007fff"
        }

azure.tcl:

source [file join [file dirname [info script]] theme light.tcl]
source [file join [file dirname [info script]] theme dark.tcl]

option add *tearOff 0

proc set_theme {mode} {
	if {$mode == "dark"} {
		ttk::style theme use "azure-dark"

		array set colors {
            -fg             "#ffffff"
            -bg             "#333333"
            -disabledfg     "#ffffff"
            -disabledbg     "#737373"
            -selectfg       "#ffffff"
            -selectbg       "#007fff"
        }
        

LGPL Licensing question

Hello there!

Firstly, good job on the theme; looks really good ๐Ÿ˜„

The problem is that I don't know how to interpret the licensing requirements of the LGPL on a programing
language (Tcl) that doesn't understand the concept of linking - for other Tcl scripts at least.

The LGPL says this:

  5. A program that contains no derivative of any portion of the
Library, but is designed to work with the Library by being compiled or
linked with it, is called a "work that uses the Library".  Such a
work, in isolation, is not a derivative work of the Library, and
therefore falls outside the scope of this License.

  However, linking a "work that uses the Library" with the Library
creates an executable that is a derivative of the Library (because it
contains portions of the Library), rather than a "work that uses the
library".  The executable is therefore covered by this License.
Section 6 states terms for distribution of such executables.

However, a Tcl script (the Ttk theme) is only a runtime requirement of the Tk GUI to run and does not participate in the (non-existent) compiling or linking step. Furthermore, the Library is not compiled or linked in any shape or form and is only (re)distributed only in source form. Thinking about it this way, only section 1 of the LGPL applies at all times:

  1. You may copy and distribute verbatim copies of the Library's
complete source code as you receive it, in any medium, provided that
you conspicuously and appropriately publish on each copy an
appropriate copyright notice and disclaimer of warranty; keep intact
all the notices that refer to this License and to the absence of any
warranty; and distribute a copy of this License along with the
Library.
[...]

My question is whether my conclusion aligns with the copyright owner's interpretation of the license, and if not, how is it intended to be understood.

If a more concrete example of my use-case is needed, I have a BSD 3-Clause licensed project that uses Tcl/Tk for the GUI parts, in which I'd like to use this theme; the question is whether I can do that and just distribute the theme's files (license included, of course) with the project without having to relicense it as GPL. (In which case I'm just going to go scavenge for some other theme.)

Thanks in advance,
bodand

edit:
I just realized GitHub's new beta discussions are more appropriate for this, but oh well. It's too late now. Hope it's not much of a bother.

Keyboard focus

Discussed in #48

Originally posted by yoshino-e-valley September 8, 2022
I will remove the following (It is similar to the question to Sun-Valley-ttk-theme).


I am using it all the time. Thank you.
I have one request here.
When using the mouse, I can see where the focus is, but when I move with TAB, I don't know where the focus is.
Could you please improve it?

Images arent transparent

So the images arent transparent, but why is that?
The images not being transparent causes an issue, and that the widget doesnt blend in with the background.
Now obviously, this is an easy peasy fix, but what is the reason for the images not being transparent?

Does not install properly using pip

Under Debian 12
``
$ sudo python3 -m pip install --break-system-packages azure-ttk
Collecting azure-ttk
Downloading azure_ttk-0.0.0.tar.gz (829 bytes)
Preparing metadata (setup.py) ... done
Building wheels for collected packages: azure-ttk
Building wheel for azure-ttk (setup.py) ... done
Created wheel for azure-ttk: filename=azure_ttk-0.0.0-py3-none-any.whl size=1049 sha256=5b2c5b8b1932c6fb27ee1d058e84d19451c13f761f8fab18bf3835d460cb5e81
Stored in directory: /root/.cache/pip/wheels/bc/89/bb/ad82345b74ab7e02621b00b8d7969ec8c27e9411ece5613b7a
Successfully built azure-ttk
Installing collected packages: azure-ttk
Successfully installed azure-ttk-0.0.0
$ python3
Python 3.11.2 (main, Mar 13 2023, 12:18:29) [GCC 12.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tkinter as tk
>>> root = tk.Tk()
>>> root.tk.call('source', 'azure.tcl')
Traceback (most recent call last):
File "", line 1, in
_tkinter.TclError: couldn't read file "azure.tcl": no such file or directory
>>> import azure_ttk
Traceback (most recent call last):
File "", line 1, in
ModuleNotFoundError: No module named 'azure_ttk'

`

How to change the entry text cursor color in dark mode

Hi,

Excellent theme! Quick Question: I have been trying to change the color of the text cursor color but I'm not able to do it.

I already tried thing like foreground="white" or insertbackground="white" also I was checking the tcl files but I haven't be able to figure it out.

Any clue can help! Thanks!

Performance issue

The UI framework is INCREDIBLY leggy/slow. Please fix this issue because it looks very good and I will like to use it in my future projects. I noticed the images are the main thing that are slow.

Cropped treeview items and troubles with launch

First of all, I would like to note that this theme looks really amazing. I like it. When I tried to launch an example, I stumbled upon two issues. First of all, script does not launch when invoked with Windows Python Launcher for some reason (but from terminal and IDLE it works fine, so I have no idea why). Something slightly similar happened to me previously. It may have something to do with a filesystem. Second, program looks blurry, just as any tkinter on my computer. I resolved that by standard method in this situation:

from ctypes import windll
windll.shcore.SetProcessDpiAwareness(1)

It resolves that problem, but unfortunately, introduces another: all items from treeview are cropped. Screenshot attached.
Screenshot 2024-01-23 230104

Treeview with fixed column widths has extra space on right.

I've encountered a strange issue while using your theme. I use the ttk Treeview widget as a Listbox replacement (as the Listbox does not exist in ttk) for a program I write. However, when modifying my Treeview widget to have fixed width columns, there is always an extra space on the right of the last column.

This only happens while Azure is in use, and does not happen with the default themes.

While yes, the space does disappear when stretch=True for any of the columns, I do not want my columns to stretch (due to another weird unrelated issue where Treeview columns will expand infinitely when a specific widget is rendered in another window... yeah I know).

I have included a very short code snippet that reproduces my error, and have included screenshots showing my issue.

About my PC

I am running Windows 10 with Python 3.9.9
I am using Azure version 2.0 - png based branch

If there is anything else I can do or any other information I can provide, please let me know!

I have tried many things to remove this extra space, but I'm honestly not sure what is causing it. There is always the possibility that I am wrong, and this is not an issue with your theme, in which case I would be more than happy to be pointed in the right direction.

Code

import tkinter
from tkinter.ttk import Treeview, Style

root = tkinter.Tk()

# Comment out both for default theme
# Uncomment for Azure Theme
root.tk.call('source', ".\\script\\themes\\azure.tcl")    # Obviously would need to point to theme files
root.tk.call("set_theme", "light")    # Switch to dark for same result

# Uncomment for clam theme
# root.style = Style()
# root.style.theme_use("clam")

tv = Treeview(root, columns=('1', '2', '3'))
tv.pack(padx=20, pady=20)

tv.heading('1', text="Column 1")
tv.heading('2', text="Column 2")
tv.heading('3', text='Column 3')

tv.column('#0', minwidth=0, width=0, stretch=False)
tv.column("1", minwidth=350, width=350, stretch=False)
tv.column("2", minwidth=150, width=150, stretch=False)
tv.column("3", minwidth=75, width=75, stretch=False)

root.mainloop()

With default theme

image

With clam theme

image

With Azure Theme

image
image

entry state="readonly" --> visualize the read only state

Hi,

I noticed the read only state on entries is not graphically represented as in stock tkinter, where the background is turned grey.
An editable entry looks just the same as a not-editable one.
Is there a quick fix for this?

Here is an example app to showcase the issue.
Just # the two root.tk.call lines to see the expected behaviour without the theme.

Thank you in advance!

import tkinter as tk
from tkinter import ttk


class App(ttk.Frame):
    def __init__(self, parent):
        ttk.Frame.__init__(self)
        # Create widgets :)
        self.setup_widgets()

    def setup_widgets(self):
        # Create a Frame for the Checkbuttons
        self.check_frame = ttk.LabelFrame(self, text="Checkbuttons", padding=(20, 10))
        self.check_frame.grid(
            row=0, column=0, padx=(20, 10), pady=(20, 10), sticky="nsew"
        )


        # Create a Frame for input widgets
        self.widgets_frame = ttk.Frame(self, padding=(0, 0, 0, 10))
        self.widgets_frame.grid(
            row=0, column=1, padx=10, pady=(30, 10), sticky="nsew", rowspan=3
        )

        # Entry
        self.entry = ttk.Entry(self.widgets_frame)
        self.entry.insert(0, "Entry editable")
        self.entry.config(state="write")
        self.entry.grid(row=0, column=0, padx=5, pady=(0, 10), sticky="ew")

        self.entry2 = ttk.Entry(self.widgets_frame)
        self.entry2.insert(0, "Not editable")
        self.entry2.config(state="readonly")
        self.entry2.grid(row=0, column=1, padx=5, pady=(0, 10), sticky="ew")


if __name__ == "__main__":
    root = tk.Tk()
    root.title("")

    # Simply set the theme
    root.tk.call("source", "azure.tcl")
    root.tk.call("set_theme", "dark")

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

    # Set a minsize for the window, and place it in the middle
    root.update()
    root.minsize(root.winfo_width(), root.winfo_height())
    x_cordinate = int((root.winfo_screenwidth() / 2) - (root.winfo_width() / 2))
    y_cordinate = int((root.winfo_screenheight() / 2) - (root.winfo_height() / 2))
    root.geometry("+{}+{}".format(x_cordinate, y_cordinate-20))

    root.mainloop()

Error in example.py: it still uses old names "Accentbutton" and "Togglebutton"

Just as the title says, currently you can read:

In line 100:

accentbutton = ttk.Button(root, text='Accent button', style='Accentbutton', command=callback)

and on line 103:

toggle = ttk.Checkbutton(root, text='Toggle button', style='Togglebutton', variable=f, offvalue=0, onvalue=1)

Other than that... the theme looks great! Thanks for your work!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.