DEV Community

Cover image for Created a toggle_state_button with PyQt5
Leon
Leon

Posted on

Created a toggle_state_button with PyQt5

Image description

Image description

I have created a toggle_state_button if anybody is interested in using it. Feel free to use it as you wish.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
from PyQt5.QtCore import Qt, QTimer
from PyQt5.QtGui import QFont

class ToggleSwitchApp(QWidget):
def init(self):
super().init()

    self.initUI()

def initUI(self):
    self.setGeometry(100, 100, 500, 100)
    self.setWindowTitle('PyQt Toggle Switch')

    self.light_theme_stylesheet = """
        /* Light Theme Styles */
        background-color: #CCCCCC;
        color: black;
    """

    self.dark_theme_stylesheet = """
        /* Dark Theme Styles */
        background-color: #333;
        color: white;
    """

    # Create the container label
    self.container = QLabel(self)
    self.container.setObjectName("drop_shadow_effect")
    self.container.setGeometry(213, 23, 101, 35)
    self.container.setStyleSheet(
        "background: #808080;"
        "border-width: 1px;"
        "border-style: solid;"
        "border-color: #808080;"
        "border-radius: 17px;"
    )

    # Create the container label
    self.container = QLabel(self)
    self.container.setObjectName("container")
    self.container.setGeometry(210, 20, 101, 35)
    self.container.setStyleSheet(
        "background: white;"
        "border-width: 0px;"
        "border-style: solid;"
        "border-color: black;"
        "border-radius: 17px;"
    )

    # Create the toggle button label
    self.toggle = QLabel(self)
    self.toggle.setObjectName("toggle")
    self.toggle.setGeometry(212, 22, 31, 31)
    self.toggle.setStyleSheet(
        "background: #333;"
        "border-width: 0px;"
        "border-style: solid;"
        "border-color: teal;"
        "border-radius: 15px;"
    )

    # Create labels for the text
    font = QFont()
    font.setFamily("Cascadia Code")
    font.setPointSize(12)

    self.label_3 = QLabel(self)
    self.label_3.setObjectName("label_3")
    self.label_3.setGeometry(158, 27, 51, 21)
    self.label_3.setFont(font)
    self.label_3.setAlignment(Qt.AlignCenter)
    self.label_3.setText("LIGHT")
    self.label_3.setStyleSheet("background-color: rgba(0, 0, 0, 0)")

    self.label_4 = QLabel(self)
    self.label_4.setObjectName("label_4")
    self.label_4.setGeometry(311, 27, 51, 21)
    self.label_4.setFont(font)
    self.label_4.setAlignment(Qt.AlignCenter)
    self.label_4.setText("DARK")
    self.label_4.setStyleSheet("background-color: rgba(0, 0, 0, 0)")

    # Connect the click event to the toggle function
    self.toggle.mousePressEvent = self.toggle_action
    self.is_toggled = False

    # Initialize QTimer for smooth animation
    self.timer = QTimer(self)
    self.timer.timeout.connect(self.move_toggle)
    self.animating = False

def toggle_action(self, event):
    if not self.animating:
        self.start_x = self.toggle.x()
        if not self.is_toggled:
            self.end_x = 278
            self.is_toggled = True
            print("DARK")
            self.setStyleSheet(self.dark_theme_stylesheet)
        else:
            self.end_x = 212
            self.is_toggled = False
            print("LIGHT")
            self.setStyleSheet(self.light_theme_stylesheet)
        self.timer.start(10)  # Move every 0.01 seconds
        self.animating = True

def move_toggle(self):
    current_x = self.toggle.x()
    if current_x == self.end_x:
        self.timer.stop()
        self.animating = False
    else:
        new_x = current_x + 2 if self.end_x > current_x else current_x - 2
        self.toggle.move(new_x, self.toggle.y())

def closeEvent(self, event):
    # Clean up and close the application
    event.accept()
Enter fullscreen mode Exit fullscreen mode

if name == 'main':
app = QApplication(sys.argv)
window = ToggleSwitchApp()
window.show()
sys.exit(app.exec_())


Obviously when using it within an application you are designing just remove all imports, init and main window components from this code snippet.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs