.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mainsail",
-    "version": "2.12.2",
+    "version": "2.12.3",
     "private": true,
     "decription": "a klipper web interface",
     "author": {

src/components/TheEditor.vue

@@ -271,7 +271,11 @@ export default class TheEditor extends Mixins(BaseMixin) {
         if (this.filename === 'telegram.conf') return 'moonraker-telegram-bot'
 
         // fallback for moonraker with multi instances
-        if (this.filename === 'moonraker.conf' || this.filepath === 'Moonraker') return 'moonraker'
+        if (this.filename === 'moonraker.conf' || this.filepath.toLowerCase().startsWith('moonraker')) return 'moonraker'
+
+        if (this.filename === 'KlipperScreen.conf' || this.filepath.toLowerCase().startsWith('klipperscreen')
+            || this.fileExtension === 'ks_include' || this.fileExtension === 'ks')
+            return 'KlipperScreen'
 
         // all .cfg files will be klipper config files
         if (this.fileExtension === 'cfg' || this.fileExtension === 'include') return 'klipper'

src/components/inputs/Codemirror.vue

@@ -94,7 +94,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
             }),
         ]
 
-        if (['cfg', 'conf', 'include'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(klipper_config))
+        if (['cfg', 'conf', 'include', 'ks', 'ks_include'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(klipper_config))
         else if (['gcode'].includes(this.fileExtension)) extensions.push(StreamLanguage.define(gcode))
         else if (['json'].includes(this.fileExtension)) extensions.push(json())
         else if (['css', 'scss', 'sass'].includes(this.fileExtension)) extensions.push(css())

src/components/mixins/control.ts

@@ -53,25 +53,25 @@ export default class ControlMixin extends Vue {
     }
 
     get colorQuadGantryLevel() {
-        const status = this.$store.state.printer.quad_gantry_level?.applied ?? true
+        const status = this.$store.state.printer.quad_gantry_level?.applied ?? false
 
         return status ? 'primary' : 'highlight'
     }
 
     get colorQuadGantryLevelCircle() {
-        const status = this.$store.state.printer.quad_gantry_level?.applied ?? true
+        const status = this.$store.state.printer.quad_gantry_level?.applied ?? false
 
         return status ? 'highlight' : 'primary'
     }
 
     get colorZTilt() {
-        const status = (this.$store.state.printer.z_tilt?.applied || this.$store.state.printer.z_tilt_ng?.applied) ?? true
+        const status = (this.$store.state.printer.z_tilt?.applied ?? false) || (this.$store.state.printer.z_tilt_ng?.applied ?? false)
 
         return status ? 'primary' : 'highlight'
     }
 
     get colorZTiltCircle() {
-        const status = (this.$store.state.printer.z_tilt?.applied || this.$store.state.printer.z_tilt_ng?.applied) ?? true
+        const status = (this.$store.state.printer.z_tilt?.applied ?? false) || (this.$store.state.printer.z_tilt_ng?.applied ?? false)
 
         return status ? 'highlight' : 'primary'
     }