diff --git a/components/toggle.vue b/components/toggle.vue
index a964a10ee..79bbef02a 100644
--- a/components/toggle.vue
+++ b/components/toggle.vue
@@ -92,8 +92,8 @@
 
     methods: {
       toggle() {
-        this.$refs.toggle.classList.toggle("on");
-        this.$emit('change', this.$refs.toggle.classList.contains("on"));
+        const containsOnClass = this.$refs.toggle.classList.toggle("on");
+        this.$emit('change', containsOnClass);
       }
     }
 
diff --git a/pages/index.vue b/pages/index.vue
index 3286d7587..d8189a04e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -100,7 +100,7 @@
         <ul>
           <li>
             <span>
-              <pw-toggle :on="rawInput" @change="rawInput = !rawInput">
+              <pw-toggle :on="rawInput" @change="rawInput = $event">
                 Raw Input {{ rawInput ? "Enabled" : "Disabled" }}
               </pw-toggle>
             </span>
diff --git a/pages/settings.vue b/pages/settings.vue
index ef97f5f45..09c51f7c4 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -25,7 +25,7 @@
         <li>
           <h3 class="title">Frames</h3>
           <span>
-            <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
+            <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="applySetting('DISABLE_FRAME_COLORS', $event)">
               Multi-color {{ settings.DISABLE_FRAME_COLORS ? "Disabled" : "Enabled" }}
             </pw-toggle>
           </span>
@@ -35,7 +35,7 @@
 		<pw-section class="blue" icon="public" label="Proxy">
 			<ul>
 				<li>
-					<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+					<pw-toggle :on="settings.PROXY_ENABLED" @change="applySetting('PROXY_ENABLED', $event)">
 						Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
 					</pw-toggle>
 				</li>