dark mode start

src/App.vue

@@ -13,11 +13,6 @@ export default {
 <style lang="sass">
 .tabs-tbl-sticky
 
-  .q-table__top,
-  .q-table__bottom,
-  thead tr:first-child th
-    background-color: #f5f4f2
-
   thead tr th
     position: sticky
     z-index: 1
@@ -41,11 +36,6 @@ export default {
 .audit-mgr-tbl-sticky
   max-height: 75vh
 
-  .q-table__top,
-  .q-table__bottom,
-  thead tr:first-child th
-    background-color: #fffefe
-
   thead tr th
     position: sticky
     z-index: 1
@@ -55,11 +45,6 @@ export default {
 .settings-tbl-sticky
   max-height: 60vh
 
-  .q-table__top,
-  .q-table__bottom,
-  thead tr:first-child th
-    background-color: #CBCBCB
-
   thead tr th
     position: sticky
     z-index: 1
@@ -68,22 +53,32 @@ export default {
 
 .agents-tbl-sticky
 
-  .q-table__top,
-  .q-table__bottom,
-  thead tr:first-child th
-    background-color: #f5f4f2
-
   thead tr th
     position: sticky
     z-index: 1
   thead tr:first-child th
     top: 0
 
+.table-bgcolor
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #f5f4f2
+
+.table-bgcolor-dark
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #1d1d1d
+
 .highlight
   background-color: #c9e6ff
 
+.highlight-dark
+  background-color: #343434
+
 .action-completed
-  background-color: #baf5cc
+  background-color: $positive
 
 .agent-offline
   background: gray !important

src/components/AgentTable.vue

@@ -2,6 +2,7 @@
   <div class="q-pt-none q-pb-none q-pr-xs q-pl-xs">
     <q-table
       dense
+      :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
       class="agents-tbl-sticky"
       :style="{ 'max-height': agentTableHeight }"
       :data="filter"
@@ -70,7 +71,7 @@
         <q-tr
           @contextmenu="agentRowSelected(props.row.id, props.row.agent_id)"
           :props="props"
-          :class="{ highlight: selectedRow === props.row.id }"
+          :class="rowSelectedClass(props.row.id)"
           @click="agentRowSelected(props.row.id, props.row.agent_id)"
           @dblclick="rowDoubleClicked(props.row.id)"
         >
@@ -631,6 +632,9 @@ export default {
     menuMaintenanceText(mode) {
       return mode ? "Disable Maintenance Mode" : "Enable Maintenance Mode";
     },
+    rowSelectedClass(id) {
+      if (this.selectedRow === id) return this.$q.dark.isActive ? "highlight-dark" : "highlight";
+    },
   },
   computed: {
     ...mapGetters(["selectedAgentPk", "agentTableHeight"]),

src/components/AutomatedTasksTab.vue

@@ -19,7 +19,7 @@
         <q-table
           dense
           class="tabs-tbl-sticky"
-          :style="{'max-height': tabsTableHeight}"
+          :style="{ 'max-height': tabsTableHeight }"
           :data="tasks"
           :columns="columns"
           :row-key="row => row.id"
@@ -88,7 +88,7 @@
               </q-td>
               <!-- policy check icon -->
               <q-td v-if="props.row.managed_by_policy">
-                <q-icon style="font-size: 1.3rem;" name="policy">
+                <q-icon style="font-size: 1.3rem" name="policy">
                   <q-tooltip>This task is managed by a policy</q-tooltip>
                 </q-icon>
               </q-td>
@@ -96,14 +96,14 @@
               <q-td>{{ props.row.name }}</q-td>
               <q-td v-if="props.row.sync_status === 'notsynced'">Will sync on next agent checkin</q-td>
               <q-td v-else-if="props.row.sync_status === 'synced'">Synced with agent</q-td>
-              <q-td
-                v-else-if="props.row.sync_status === 'pendingdeletion'"
-              >Pending deletion on agent</q-td>
+              <q-td v-else-if="props.row.sync_status === 'pendingdeletion'">Pending deletion on agent</q-td>
               <q-td v-if="props.row.retcode !== null || props.row.stdout || props.row.stderr">
                 <span
-                  style="cursor:pointer;color:blue;text-decoration:underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="scriptMoreInfo(props.row)"
-                >output</span>
+                  >output</span
+                >
               </q-td>
               <q-td v-else>Awaiting output</q-td>
               <q-td v-if="props.row.last_run">{{ props.row.last_run }}</q-td>
@@ -122,7 +122,13 @@
     </q-dialog>
 
     <q-dialog v-model="showScriptOutput">
-      <ScriptOutput @close="showScriptOutput = false; scriptInfo = {}" :scriptInfo="scriptInfo" />
+      <ScriptOutput
+        @close="
+          showScriptOutput = false;
+          scriptInfo = {};
+        "
+        :scriptInfo="scriptInfo"
+      />
     </q-dialog>
   </div>
 </template>

src/components/ChecksTab.vue

@@ -58,7 +58,7 @@
         <q-table
           dense
           class="tabs-tbl-sticky"
-          :style="{'max-height': tabsTableHeight}"
+          :style="{ 'max-height': tabsTableHeight }"
           :data="checks"
           :columns="columns"
           :row-key="row => row.id + row.check_type"
@@ -142,12 +142,12 @@
               </q-td>
               <!-- policy check icon -->
               <q-td v-if="props.row.managed_by_policy">
-                <q-icon style="font-size: 1.3rem;" name="policy">
+                <q-icon style="font-size: 1.3rem" name="policy">
                   <q-tooltip>This check is managed by a policy</q-tooltip>
                 </q-icon>
               </q-td>
               <q-td v-else-if="props.row.overriden_by_policy">
-                <q-icon style="font-size: 1.3rem;" name="remove_circle_outline">
+                <q-icon style="font-size: 1.3rem" name="remove_circle_outline">
                   <q-tooltip>This check is overriden by a policy</q-tooltip>
                 </q-icon>
               </q-td>
@@ -155,10 +155,10 @@
               <!-- status icon -->
               <q-td v-if="props.row.status === 'pending'"></q-td>
               <q-td v-else-if="props.row.status === 'passing'">
-                <q-icon style="font-size: 1.3rem;" color="positive" name="check_circle" />
+                <q-icon style="font-size: 1.3rem" color="positive" name="check_circle" />
               </q-td>
               <q-td v-else-if="props.row.status === 'failing'">
-                <q-icon style="font-size: 1.3rem;" color="negative" name="error" />
+                <q-icon style="font-size: 1.3rem" color="negative" name="error" />
               </q-td>
               <!-- check description -->
               <q-td>{{ props.row.readable_desc }}</q-td>
@@ -173,30 +173,36 @@
               <!-- more info -->
               <q-td v-if="props.row.check_type === 'ping'">
                 <span
-                  style="cursor:pointer;color:blue;text-decoration:underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="pingInfo(props.row.readable_desc, props.row.more_info)"
-                >output</span>
+                  >output</span
+                >
               </q-td>
               <q-td v-else-if="props.row.check_type === 'script'">
                 <span
-                  style="cursor:pointer;color:blue;text-decoration:underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="scriptMoreInfo(props.row)"
-                >output</span>
+                  >output</span
+                >
               </q-td>
               <q-td v-else-if="props.row.check_type === 'eventlog'">
                 <span
-                  style="cursor:pointer;color:blue;text-decoration:underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="eventLogMoreInfo(props.row)"
-                >output</span>
+                  >output</span
+                >
               </q-td>
-              <q-td
-                v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'"
-              >{{ props.row.history_info }}</q-td>
+              <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">{{
+                props.row.history_info
+              }}</q-td>
               <q-td v-else>{{ props.row.more_info }}</q-td>
               <q-td>{{ props.row.last_run }}</q-td>
-              <q-td
-                v-if="props.row.assigned_task !== null && props.row.assigned_task.length > 1"
-              >{{ props.row.assigned_task.length }} Tasks</q-td>
+              <q-td v-if="props.row.assigned_task !== null && props.row.assigned_task.length > 1"
+                >{{ props.row.assigned_task.length }} Tasks</q-td
+              >
               <q-td v-else-if="props.row.assigned_task">{{ props.row.assigned_task.name }}</q-td>
               <q-td v-else></q-td>
             </q-tr>
@@ -206,67 +212,41 @@
     </div>
     <!-- modals -->
     <q-dialog v-model="showDiskSpaceCheck">
-      <DiskSpaceCheck
-        @close="showDiskSpaceCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <DiskSpaceCheck @close="showDiskSpaceCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showMemCheck">
-      <MemCheck
-        @close="showMemCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <MemCheck @close="showMemCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showCpuLoadCheck">
-      <CpuLoadCheck
-        @close="showCpuLoadCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <CpuLoadCheck @close="showCpuLoadCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showPingCheck">
-      <PingCheck
-        @close="showPingCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <PingCheck @close="showPingCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showWinSvcCheck">
-      <WinSvcCheck
-        @close="showWinSvcCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <WinSvcCheck @close="showWinSvcCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showEventLogCheck">
-      <EventLogCheck
-        @close="showEventLogCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <EventLogCheck @close="showEventLogCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showScriptCheck">
-      <ScriptCheck
-        @close="showScriptCheck = false"
-        :agentpk="selectedAgentPk"
-        :mode="mode"
-        :checkpk="checkpk"
-      />
+      <ScriptCheck @close="showScriptCheck = false" :agentpk="selectedAgentPk" :mode="mode" :checkpk="checkpk" />
     </q-dialog>
     <q-dialog v-model="showScriptOutput">
-      <ScriptOutput @close="showScriptOutput = false; scriptInfo = {}" :scriptInfo="scriptInfo" />
+      <ScriptOutput
+        @close="
+          showScriptOutput = false;
+          scriptInfo = {};
+        "
+        :scriptInfo="scriptInfo"
+      />
     </q-dialog>
     <q-dialog v-model="showEventLogOutput">
       <EventLogCheckOutput
-        @close="showEventLogOutput = false; evtlogdata = {}"
+        @close="
+          showEventLogOutput = false;
+          evtlogdata = {};
+        "
         :evtlogdata="evtlogdata"
       />
     </q-dialog>

src/components/EventLog.vue

@@ -32,21 +32,9 @@
       <template v-slot:top>
         <q-btn dense flat push @click="getEventLog" icon="refresh" />
         <q-space />
-        <q-radio
-          v-model="logType"
-          color="cyan"
-          val="Application"
-          label="Application"
-          @input="getEventLog"
-        />
+        <q-radio v-model="logType" color="cyan" val="Application" label="Application" @input="getEventLog" />
         <q-radio v-model="logType" color="cyan" val="System" label="System" @input="getEventLog" />
-        <q-radio
-          v-model="logType"
-          color="cyan"
-          val="Security"
-          label="Security"
-          @input="getEventLog"
-        />
+        <q-radio v-model="logType" color="cyan" val="Security" label="Security" @input="getEventLog" />
         <q-space />
         <q-input v-model="filter" outlined label="Search" dense clearable>
           <template v-slot:prepend>
@@ -61,9 +49,9 @@
           <q-td>{{ props.row.eventID }}</q-td>
           <q-td>{{ props.row.time }}</q-td>
           <q-td @click.native="showFullMsg(props.row.message)">
-            <span
-              style="cursor:pointer;color:blue;text-decoration:underline"
-            >{{ formatMessage(props.row.message) }}</span>
+            <span style="cursor: pointer; text-decoration: underline" class="text-primary">{{
+              formatMessage(props.row.message)
+            }}</span>
           </q-td>
         </q-tr>
       </template>

src/components/ScriptManager.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md q-gutter-sm">
     <q-dialog :value="toggleScriptManager" @hide="hideScriptManager" @show="getScripts">
-      <q-card style="min-width: 70vw;">
+      <q-card style="min-width: 70vw">
         <q-bar>
           <q-btn @click="getScripts" class="q-mr-sm" dense flat push icon="refresh" />Script Manager
           <q-space />
@@ -19,7 +19,10 @@
               unelevated
               no-caps
               icon="add"
-              @click="showScript('add'); clearRow()"
+              @click="
+                showScript('add');
+                clearRow();
+              "
             />
             <q-btn
               label="Edit"
@@ -66,14 +69,11 @@
               @click="downloadScript"
             />
             <q-space />
-            <q-toggle
-              :value="showBuiltIn"
-              label="Show Community Scripts"
-              @input="showBuiltIn = !showBuiltIn"
-            />
+            <q-toggle :value="showBuiltIn" label="Show Community Scripts" @input="showBuiltIn = !showBuiltIn" />
           </div>
           <q-table
             dense
+            :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
             class="settings-tbl-sticky"
             :data="visibleScripts"
             :columns="columns"
@@ -88,16 +88,19 @@
           >
             <template slot="body" slot-scope="props" :props="props">
               <q-tr
-                :class="{highlight: scriptpk === props.row.id}"
-                @click="scriptpk = props.row.id; filename = props.row.filename; code = props.row.code;"
+                :class="rowSelectedClass(props.row.id)"
+                @click="
+                  scriptpk = props.row.id;
+                  filename = props.row.filename;
+                  code = props.row.code;
+                "
               >
                 <q-td>{{ props.row.name }}</q-td>
                 <q-td>
                   {{ truncateText(props.row.description) }}
-                  <q-tooltip
-                    v-if="props.row.description.length >= 60"
-                    content-style="font-size: 12px"
-                  >{{ props.row.description }}</q-tooltip>
+                  <q-tooltip v-if="props.row.description.length >= 60" content-style="font-size: 12px">{{
+                    props.row.description
+                  }}</q-tooltip>
                 </q-td>
                 <q-td>{{ props.row.filename }}</q-td>
                 <q-td>{{ props.row.shell }}</q-td>
@@ -113,12 +116,7 @@
       </q-card>
     </q-dialog>
     <q-dialog v-model="showScriptModal">
-      <ScriptModal
-        :mode="mode"
-        :scriptpk="scriptpk"
-        @close="showScriptModal = false"
-        @uploaded="getScripts"
-      />
+      <ScriptModal :mode="mode" :scriptpk="scriptpk" @close="showScriptModal = false" @uploaded="getScripts" />
     </q-dialog>
   </div>
 </template>
@@ -256,6 +254,9 @@ export default {
         return false;
       }
     },
+    rowSelectedClass(id) {
+      if (this.scriptpk === id) return this.$q.dark.isActive ? "highlight-dark" : "highlight";
+    },
   },
   computed: {
     ...mapState({

src/components/WindowsUpdates.vue

@@ -6,7 +6,7 @@
     <q-table
       dense
       class="tabs-tbl-sticky"
-      :style="{'max-height': tabsTableHeight}"
+      :style="{ 'max-height': tabsTableHeight }"
       :data="sortedUpdates"
       :columns="columns"
       :visible-columns="visibleColumns"
@@ -22,36 +22,16 @@
         <q-tr :props="props">
           <q-menu context-menu>
             <q-list dense style="min-width: 100px">
-              <q-item
-                v-if="!props.row.installed"
-                clickable
-                v-close-popup
-                @click="editPolicy(props.row.id, 'inherit')"
-              >
+              <q-item v-if="!props.row.installed" clickable v-close-popup @click="editPolicy(props.row.id, 'inherit')">
                 <q-item-section>Inherit</q-item-section>
               </q-item>
-              <q-item
-                v-if="!props.row.installed"
-                clickable
-                v-close-popup
-                @click="editPolicy(props.row.id, 'approve')"
-              >
+              <q-item v-if="!props.row.installed" clickable v-close-popup @click="editPolicy(props.row.id, 'approve')">
                 <q-item-section>Approve</q-item-section>
               </q-item>
-              <q-item
-                v-if="!props.row.installed"
-                clickable
-                v-close-popup
-                @click="editPolicy(props.row.id, 'ignore')"
-              >
+              <q-item v-if="!props.row.installed" clickable v-close-popup @click="editPolicy(props.row.id, 'ignore')">
                 <q-item-section>Ignore</q-item-section>
               </q-item>
-              <q-item
-                v-if="!props.row.installed"
-                clickable
-                v-close-popup
-                @click="editPolicy(props.row.id, 'nothing')"
-              >
+              <q-item v-if="!props.row.installed" clickable v-close-popup @click="editPolicy(props.row.id, 'nothing')">
                 <q-item-section>Do Nothing</q-item-section>
               </q-item>
             </q-list>
@@ -67,11 +47,7 @@
             <q-icon v-else-if="props.row.action === 'ignore'" name="fas fa-check" color="negative">
               <q-tooltip>Ignore</q-tooltip>
             </q-icon>
-            <q-icon
-              v-else-if="props.row.action === 'inherit'"
-              name="fiber_manual_record"
-              color="accent"
-            >
+            <q-icon v-else-if="props.row.action === 'inherit'" name="fiber_manual_record" color="accent">
               <q-tooltip>Inherit</q-tooltip>
             </q-icon>
           </q-td>
@@ -92,9 +68,9 @@
           <q-td>{{ props.row.severity }}</q-td>
           <q-td>{{ formatMessage(props.row.title) }}</q-td>
           <q-td @click.native="showFullMsg(props.row.title, props.row.description)">
-            <span
-              style="cursor:pointer;color:blue;text-decoration:underline"
-            >{{ formatMessage(props.row.description) }}</span>
+            <span style="cursor: pointer; text-decoration: underline" class="text-primary">{{
+              formatMessage(props.row.description)
+            }}</span>
           </q-td>
           <q-td>{{ props.row.date_installed }}</q-td>
         </q-tr>

src/components/automation/AutomationManager.vue

@@ -48,6 +48,7 @@
           />
         </div>
         <q-table
+          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           dense
           :data="policies"
           :columns="columns"
@@ -156,14 +157,16 @@
               <q-td>{{ props.row.desc }}</q-td>
               <q-td>
                 <span
-                  style="cursor: pointer; color: blue; text-decoration: underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="showRelationsModal(props.row)"
                   >{{ `Show Relations (${props.row.agents_count}+)` }}</span
                 >
               </q-td>
               <q-td>
                 <span
-                  style="cursor: pointer; color: blue; text-decoration: underline"
+                  style="cursor: pointer; text-decoration: underline"
+                  class="text-primary"
                   @click="showEditPatchPolicyModal(props.row)"
                   >{{ patchPolicyText(props.row) }}</span
                 >

src/components/automation/PolicyAutomatedTasksTab.vue

@@ -23,6 +23,7 @@
       <template>
         <q-table
           dense
+          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
           style="max-height: 35vh"
           :data="tasks"
@@ -105,9 +106,9 @@
               <q-td>{{ props.row.schedule }}</q-td>
               <q-td>
                 <span
-                  style="cursor: pointer; color: blue; text-decoration: underline"
+                  style="cursor: pointer; text-decoration: underline"
                   @click="showStatus(props.row)"
-                  class="status-cell"
+                  class="status-cell text-primary"
                   >See Status</span
                 >
               </q-td>

src/components/automation/PolicyChecksTab.vue

@@ -69,6 +69,7 @@
       <template>
         <q-table
           dense
+          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
           class="tabs-tbl-sticky"
           style="max-height: 35vh"
           :data="checks"
@@ -109,23 +110,13 @@
               <!-- context menu -->
               <q-menu context-menu>
                 <q-list dense style="min-width: 200px">
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="showEditDialog(props.row)"
-                    id="context-edit"
-                  >
+                  <q-item clickable v-close-popup @click="showEditDialog(props.row)" id="context-edit">
                     <q-item-section side>
                       <q-icon name="edit" />
                     </q-item-section>
                     <q-item-section>Edit</q-item-section>
                   </q-item>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="deleteCheck(props.row)"
-                    id="context-delete"
-                  >
+                  <q-item clickable v-close-popup @click="deleteCheck(props.row)" id="context-delete">
                     <q-item-section side>
                       <q-icon name="delete" />
                     </q-item-section>
@@ -134,12 +125,7 @@
 
                   <q-separator></q-separator>
 
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="showPolicyCheckStatusModal(props.row)"
-                    id="context-status"
-                  >
+                  <q-item clickable v-close-popup @click="showPolicyCheckStatusModal(props.row)" id="context-status">
                     <q-item-section side>
                       <q-icon name="sync" />
                     </q-item-section>
@@ -171,14 +157,15 @@
               <q-td>{{ props.row.readable_desc }}</q-td>
               <q-td>
                 <span
-                  style="cursor:pointer;color:blue;text-decoration:underline"
+                  style="cursor: pointer; text-decoration: underline"
                   @click="showPolicyCheckStatusModal(props.row)"
-                  class="status-cell"
-                >See Status</span>
+                  class="status-cell text-primary"
+                  >See Status</span
+                >
               </q-td>
-              <q-td
-                v-if="props.row.assignedtask !== null && props.row.assignedtask.length === 1"
-              >{{ props.row.assignedtask[0].name }}</q-td>
+              <q-td v-if="props.row.assignedtask !== null && props.row.assignedtask.length === 1">{{
+                props.row.assignedtask[0].name
+              }}</q-td>
               <q-td v-else-if="props.row.assignedtask">{{ props.row.assignedtask.length }} Tasks</q-td>
               <q-td v-else></q-td>
             </q-tr>

src/components/automation/modals/PolicyStatus.vue

@@ -35,10 +35,10 @@
             <!-- status icon -->
             <q-td v-if="props.row.status === 'pending'"></q-td>
             <q-td v-else-if="props.row.status === 'passing'">
-              <q-icon style="font-size: 1.3rem;" color="positive" name="check_circle" />
+              <q-icon style="font-size: 1.3rem" color="positive" name="check_circle" />
             </q-td>
             <q-td v-else-if="props.row.status === 'failing'">
-              <q-icon style="font-size: 1.3rem;" color="negative" name="error" />
+              <q-icon style="font-size: 1.3rem" color="negative" name="error" />
             </q-td>
             <q-td v-else></q-td>
             <!-- status text -->
@@ -55,30 +55,33 @@
             <!-- more info -->
             <q-td v-if="props.row.check_type === 'ping'">
               <span
-                style="cursor:pointer;color:blue;text-decoration:underline"
+                style="cursor: pointer; text-decoration: underline"
                 @click="pingInfo(props.row)"
-                class="ping-cell"
-              >output</span>
+                class="ping-cell text-primary"
+                >output</span
+              >
             </q-td>
             <q-td
               v-else-if="props.row.check_type === 'script' || props.row.retcode || props.row.stdout || props.row.stderr"
             >
               <span
-                style="cursor:pointer;color:blue;text-decoration:underline"
+                style="cursor: pointer; text-decoration: underline"
                 @click="scriptMoreInfo(props.row)"
-                class="script-cell"
-              >output</span>
+                class="script-cell text-primary"
+                >output</span
+              >
             </q-td>
             <q-td v-else-if="props.row.check_type === 'eventlog'">
               <span
-                style="cursor:pointer;color:blue;text-decoration:underline"
+                style="cursor: pointer; text-decoration: underline"
                 @click="eventLogMoreInfo(props.row)"
-                class="eventlog-cell"
-              >output</span>
+                class="eventlog-cell text-primary"
+                >output</span
+              >
             </q-td>
-            <q-td
-              v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'"
-            >{{ props.row.history_info }}</q-td>
+            <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">{{
+              props.row.history_info
+            }}</q-td>
             <q-td v-else-if="props.row.more_info">{{ props.row.more_info }}</q-td>
             <q-td v-else>Awaiting Output</q-td>
             <!-- last run -->

src/components/modals/agents/AgentDownload.vue

@@ -46,7 +46,9 @@
           </q-badge>
           <span>
             To skip downloading the Mesh Agent during the install. Download it
-            <span style="cursor: pointer; color: blue; text-decoration: underline" @click="downloadMesh">here</span>
+            <span style="cursor: pointer; text-decoration: underline" class="text-primary" @click="downloadMesh"
+              >here</span
+            >
           </span>
         </div>
         <div class="q-pa-xs q-gutter-xs">

src/components/modals/logs/PendingActions.vue

@@ -37,6 +37,7 @@
 
       <q-table
         dense
+        :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
         class="remote-bg-tbl-sticky"
         :data="filter"
         :columns="columns"
@@ -168,7 +169,7 @@ export default {
     },
     rowClass(id, status) {
       if (this.selectedRow === id && status !== "completed") {
-        return "highlight";
+        return this.$q.dark.isActive ? "highligh-dark" : "highlight";
       } else if (status === "completed") {
         return "action-completed";
       }

src/components/modals/software/InstallSoftware.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card style="width: 50vw; max-width: 80vw;">
+  <q-card style="width: 50vw; max-width: 80vw">
     <q-card-section>
       <q-table
         class="remote-bg-tbl-sticky"
@@ -36,7 +36,7 @@
               />
             </q-td>
             <q-td @click="showDescription(props.row.name)">
-              <span style="cursor:pointer;color:blue;text-decoration:underline">{{ props.row.name }}</span>
+              <span style="cursor: pointer; text-decoration: underline" class="text-primary">{{ props.row.name }}</span>
             </q-td>
             <q-td>{{ props.row.version }}</q-td>
           </q-tr>

src/store/index.js

@@ -234,33 +234,33 @@ export default function () {
             let childSites = [];
             for (let site of client.sites) {
 
-              let site_color = "black"
-              if (site.maintenance_mode) { site_color = "warning" }
-              else if (site.failing_checks) { site_color = "negative" }
-
-              childSites.push({
+              let siteNode = {
                 label: site.name,
                 id: site.id,
                 raw: `Site|${site.id}`,
                 header: "generic",
                 icon: "apartment",
-                color: site_color
-              });
+              }
+
+              if (site.maintenance_mode) { siteNode["color"] = "warning" }
+              else if (site.failing_checks) { siteNode["color"] = "negative" }
+
+              childSites.push(siteNode);
             }
 
-            let client_color = "black"
-            if (client.maintenance_mode) { client_color = "warning" }
-            else if (client.failing_checks) { client_color = "negative" }
-
-            output.push({
+            let clientNode = {
               label: client.name,
               id: client.id,
               raw: `Client|${client.id}`,
               header: "root",
               icon: "business",
-              color: client_color,
               children: childSites
-            });
+            }
+
+            if (client.maintenance_mode) clientNode["color"] = "warning"
+            else if (client.failing_checks) clientNode["color"] = "negative"
+
+            output.push(clientNode);
           }
 
           // move failing clients to the top

src/views/Dashboard.vue

@@ -7,13 +7,16 @@
       </q-banner>
       <q-toolbar>
         <q-btn dense flat push @click="refreshEntireSite" icon="refresh" />
-        <q-toolbar-title
-          >Tactical RMM<span class="text-overline">&nbsp;&nbsp;&nbsp;v{{ currentTRMMVersion }}</span></q-toolbar-title
-        >
+        <q-toolbar-title>
+          Tactical RMM<span class="text-overline">&nbsp;&nbsp;&nbsp;v{{ currentTRMMVersion }}</span>
+        </q-toolbar-title>
+
+        <!-- temp dark mode toggle -->
+        <q-toggle label="Toggle Dark Mode" @input="$q.dark.toggle()" />
 
         <!-- Devices Chip -->
-        <q-chip color="white" class="cursor-pointer">
-          <q-avatar size="md" icon="devices" color="primary" text-color="white" />
+        <q-chip class="cursor-pointer">
+          <q-avatar size="md" icon="devices" color="primary" />
           <q-tooltip :delay="600" anchor="top middle" self="top middle">Agent Count</q-tooltip>
           {{ totalAgents }}
           <q-menu>
@@ -21,7 +24,7 @@
               <q-item-label header>Servers</q-item-label>
               <q-item>
                 <q-item-section avatar>
-                  <q-icon name="fa fa-server" size="sm" color="primary" text-color="white" />
+                  <q-icon name="fa fa-server" size="sm" color="primary" />
                 </q-item-section>
 
                 <q-item-section no-wrap>
@@ -30,7 +33,7 @@
               </q-item>
               <q-item>
                 <q-item-section avatar>
-                  <q-icon name="power_off" size="sm" color="negative" text-color="white" />
+                  <q-icon name="power_off" size="sm" color="negative" />
                 </q-item-section>
 
                 <q-item-section no-wrap>
@@ -40,7 +43,7 @@
               <q-item-label header>Workstations</q-item-label>
               <q-item>
                 <q-item-section avatar>
-                  <q-icon name="computer" size="sm" color="primary" text-color="white" />
+                  <q-icon name="computer" size="sm" color="primary" />
                 </q-item-section>
 
                 <q-item-section no-wrap>
@@ -49,7 +52,7 @@
               </q-item>
               <q-item>
                 <q-item-section avatar>
-                  <q-icon name="power_off" size="sm" color="negative" text-color="white" />
+                  <q-icon name="power_off" size="sm" color="negative" />
                 </q-item-section>
 
                 <q-item-section no-wrap>
@@ -183,7 +186,7 @@
                     <q-icon name="search" color="primary" />
                   </template>
                   <template v-slot:after>
-                    <q-btn round dense flat icon="filter_alt" :color="isFilteringTable ? 'green' : 'black'">
+                    <q-btn round dense flat icon="filter_alt" :color="isFilteringTable ? 'green' : ''">
                       <q-menu>
                         <q-list dense>
                           <q-item-label header>Filter Agent Table</q-item-label>