Make Your Login App Stylish! 🎨✨

Hello, CodeCrafters! 👋 

Ready to add some flair to your PySimpleGUI applications?

Today, we’re going to explore the various themes available in PySimpleGUI and apply them to our login app. If the login is successful, a new window with a different theme will open. If not, an error message will appear.

Let’s dive in and make our app not just functional but also visually appealing! 🎉

Step 1: Install PySimpleGUI

If you haven’t installed PySimpleGUI yet, open your terminal or command prompt and type:

pip install pysimplegui

Step 2: Import the Library

We’ll start by importing PySimpleGUI:

import PySimpleGUI as sg

Step 3: Choose a Theme

PySimpleGUI offers a variety of themes that you can apply to your windows. You can list all available themes using:

sg.theme_previewer()

For this example, let’s pick a theme called 'DarkAmber':

sg.theme('DarkAmber')

Step 4: Design the Login Layout

Let’s design our login window. We need fields for the username and password, and a button to submit the login details.

layout = [

    [sg.Text('Username'), sg.InputText(key='-USERNAME-')],

    [sg.Text('Password'), sg.InputText(key='-PASSWORD-', password_char='*')],

    [sg.Button('Login'), sg.Button('Cancel')]

]

Step 5: Create the Login Window

Next, we create a window with the specified layout:

window = sg.Window('Login App', layout)

Step 6: Event Loop for Login

Here’s where the magic happens! We’ll create an event loop that checks for button clicks and retrieves the input values.

while True:

    event, values = window.read()

    if event sg.WIN_CLOSED or event 'Cancel':

        break

    username = values['-USERNAME-']

    password = values['-PASSWORD-']

    if username 'admin' and password 'secret':

        sg.popup('Login Successful! 🎉')

        break

    else:

        sg.popup('Login Failed. Try Again. 😞')

window.close()

Step 7: Create a Themed Window on Successful Login

If the login is successful, we’ll open a new window with a different theme. Let’s use the 'LightBlue' theme for this window.

if username 'admin' and password 'secret':

    sg.theme('LightBlue')

    new_layout = [

        [sg.Text('Welcome to the themed window! 🎉')],

        [sg.Button('OK')]

    ]

    new_window = sg.Window('Themed Window', new_layout)

    while True:

        event, values = new_window.read()

        if event sg.WIN_CLOSED or event 'OK':

            break

    new_window.close()

Step 8: Putting It All Together

Here’s the complete code:

import PySimpleGUI as sg

sg.theme('DarkAmber')  # Set the initial theme

layout = [

    [sg.Text('Username'), sg.InputText(key='-USERNAME-')],

    [sg.Text('Password'), sg.InputText(key='-PASSWORD-', password_char='*')],

    [sg.Button('Login'), sg.Button('Cancel')]

]

window = sg.Window('Login App', layout)

while True:

    event, values = window.read()

    if event sg.WIN_CLOSED or event 'Cancel':

        break

    username = values['-USERNAME-']

    password = values['-PASSWORD-']

    if username 'admin' and password 'secret':

        sg.theme('LightBlue')

        new_layout = [

                [sg.Text('Welcome to the themed window! 🎉')],

                [sg.Button('OK')]

            ]

        new_window = sg.Window('Themed Window', new_layout)

        while True:

            event, values = new_window.read()

            if event sg.WIN_CLOSED or event 'OK':

                break

        new_window.close()

    else:

        sg.popup('Login Failed. Try Again. 😞')

window.close()

Output

Step-by-Step Breakdown:

1. Choosing a Theme:

• We set the theme for our initial window using sg.theme('DarkAmber').

• You can choose from many themes; use sg.theme_previewer() to see them all.

2. Designing the Layout:

• We create text labels and input fields for the username and password.

• The password_char='*' ensures that the password is hidden when typed.

3. Creating the Login Window:

• We initialize the window with the layout we designed.

4. Event Loop for Login:

• The loop reads events (like button clicks) and values (input text).

• If the window is closed or 'Cancel' is clicked, the loop breaks, and the window closes.

• It checks if the username is 'admin' and the password is 'secret'. If they match, a success message pops up. If not, an error message is displayed.

5. Creating a Themed Window on Successful Login:

• If the login is successful, a new window with the 'LightBlue' theme is opened.

• This new window has a simple layout with a welcome message and an 'OK' button.

Why This Is Fun and Useful:

• Visual Appeal: Themes make your applications look more professional and user-friendly.

• Real-World Application: Adding themes can enhance user experience and make your apps stand out.

• Interactive Learning: You get to see immediate visual changes, making learning more engaging. 

Recommended Resources 📚

Discover the power of Agent AI with Simple.ai! Join over 100,000 subscribers in the Agent AI newsletter and learn how cutting-edge AI can transform your career or business. Simple.ai offers actionable insights, expert tips, and real-world examples of how Agent AI can streamline your workflows, boost productivity, and drive innovation. Don’t miss out on this opportunity to stay ahead in the ever-evolving tech landscape. Subscribe now and unlock the full potential of AI for your professional growth.

Let’s Inspire Future AI Coders Together!

I’m excited to continue sharing my passion for Python programming and AI with you all. If you’ve enjoyed the content and found it helpful, do consider supporting my work with a small gift. Just click the link below to make a difference – it’s quick, easy, and every bit helps and motivates me to keep creating awesome contents for you.

Thank you for being amazing!

Ready for More Python Fun? 📬

Subscribe to our newsletter now and get a free Python cheat sheet! 📑 Dive deeper into Python programming with more exciting projects and tutorials designed just for beginners.

Keep learning, keep coding 👩‍💻👨‍💻, and keep discovering new possibilities! 💻✨

Enjoy your journey into artificial intelligence, machine learning, data analytics, data science and more with Python!

Stay tuned for our next exciting project in the following edition!

Happy coding!🚀📊✨