Created a toggle_state_button with PyQt5

Leon — Fri, 08 Sep 2023 23:32:41 +0000

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()

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.

DEV Community: Leon

Created a toggle_state_button with PyQt5

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