select dark theme based on os preferences

Author: mingue

.github/workflows/build.yaml

@@ -1,6 +1,6 @@
 name: build
 
-on: [push, pull_request]
+on: [pull_request]
 
 jobs:
   build:

TODO.md

@@ -13,6 +13,7 @@
 
 - [x] Priority
 - [x] Message text
+- [ ] Unit
 - [ ] Time range
 
 ## Quick filter bar
@@ -21,8 +22,8 @@
 
 ## Dark theme
 
-- [ ] Add dark theme
-- [ ] Add auto-detection to select dark theme
+- [x] Add dark theme
+- [x] Add auto-detection to select dark theme
 
 ## Break down components
 
@@ -36,12 +37,12 @@
 
 - [x] Published in <https://aur.archlinux.org/packages/journal-viewer-bin>
 
-## Automate reelase process
+## Automate relase process
 
 - [x] Document build & publish process
 - [ ] Automate process
 
-## Invesitgate possibility of flatpak
+## Investigate possibility of flatpak
 
 ## Bugs
 

src/App.vue

@@ -13,6 +13,7 @@ let vm = reactive({
   isSidebarCollapsed: true,
   priority: "6",
   quickSearch: "",
+  theme: "",
 });
 
 let journalQuery = {
@@ -85,13 +86,20 @@ function filter(filter: Filter) {
 }
 
 onMounted(() => {
+  const match = window.matchMedia("(prefers-color-scheme: dark)");
+
+  if (match) {
+    vm.theme = "dark";
+    document.getElementsByTagName("html")[0].style = "background-color: #222;";
+  }
+
   getLogs();
 });
 </script>
 
 <template>
   <header></header>
-  <main>
+  <main :class="vm.theme">
     <SummaryBar />
     <SearchBar @quick-search="quickSearch" />
     <!-- Main Content -->
@@ -103,3 +111,9 @@ onMounted(() => {
     </div>
   </main>
 </template>
+
+<style scoped>
+main.dark {
+  background-color: #222;
+}
+</style>

src/components/FilterSidebar.vue

@@ -80,4 +80,17 @@ function filter(event: Event) {
   width: 600px;
   padding: 1rem;
 }
+
+main.dark .filter-content {
+  color: #ddd;
+}
+
+main.dark .filter-content .form-select {
+  background-color: #444;
+  color: #ddd;
+}
+
+main.dark .filter-content .btn {
+  color: #ddd;
+}
 </style>

src/components/LogTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
 import type { JournalEntries } from "@/model/JournalEntries";
 
 const props = defineProps<{
@@ -10,6 +10,10 @@ const emit = defineEmits<{
   (e: "load-more"): void;
 }>();
 
+let vm = reactive({
+  tableTheme: "",
+});
+
 const scrollComponent = ref<Element | null>(null);
 
 type ColumnViewOptions = {
@@ -81,6 +85,12 @@ columnViewOptions.forEach((c, i) => {
 });
 
 onMounted(() => {
+  const match = window.matchMedia("(prefers-color-scheme: dark)");
+
+  if (match) {
+    vm.tableTheme = "table-dark";
+  }
+
   window.addEventListener("scroll", handleScroll);
 });
 
@@ -100,7 +110,7 @@ const getRowClass = (row: Array<string>) => `priority-${row[0]}`;
 <template>
   <!-- Log table -->
   <div class="container-fluid" ref="scrollComponent">
-    <table class="table table-striped table-hover table-borderless table-sm">
+    <table class="table table-striped table-hover table-borderless table-sm" :class="vm.tableTheme">
       <thead>
         <th v-for="c in columnViewOptions.filter((x) => x.visible)" :style="c.style">
           {{ c.name }}
@@ -191,6 +201,13 @@ const getRowClass = (row: Array<string>) => `priority-${row[0]}`;
   color: #666;
 }
 
+main.dark .priority-6 {
+  color: #bbb;
+}
+main.dark .table-striped > tbody > tr.priority-6:nth-of-type(odd) > * {
+  color: #bbb;
+}
+
 .priority-6 td:first-child div {
   width: 4px;
   height: 24px;
@@ -200,6 +217,13 @@ const getRowClass = (row: Array<string>) => `priority-${row[0]}`;
   color: #aaa;
 }
 
+main.dark .priority-7 {
+  color: #666;
+}
+main.dark .table-striped > tbody > tr.priority-7:nth-of-type(odd) > * {
+  color: #666;
+}
+
 .priority-7 td:first-child div {
   width: 4px;
   height: 24px;

src/components/SearchBar.vue

@@ -42,4 +42,16 @@ function search(event?: Event) {
   background-color: #e3f2fd;
   border: 1px solid #70b1df;
 }
+
+main.dark .navbar {
+  background-color: #1d4663;
+  border: 1px solid #3078ac;
+}
+
+main.dark .navbar-brand {
+  color: #ddd;
+}
+main.dark .btn {
+  color: #ddd;
+}
 </style>

src/components/SummaryBar.vue

@@ -145,16 +145,24 @@ const getXLegendDate = (x: string, index: number) => {
   width: 98%;
 }
 
+main.dark .summary-bar {
+  background-color: #444;
+}
+
 .summary-y-legend {
   position: absolute;
   left: 0;
   height: 100%;
   width: 100%;
 }
 
+main.dark .summary-y-legend {
+  color: #ddd;
+}
+
 .summary-y-legend .y-legend {
   border-bottom: 1px solid #aaa;
-  font-size: 0.4rem;
+  font-size: 0.8rem;
 }
 
 .summary-cell {
@@ -167,6 +175,10 @@ const getXLegendDate = (x: string, index: number) => {
   opacity: 0.6;
 }
 
+main.dark .summary-cell:hover {
+  background-color: #666;
+}
+
 .summary-value {
   background-color: rgb(238, 133, 133);
   border: 1px solid rgb(228, 96, 96);
@@ -178,6 +190,11 @@ const getXLegendDate = (x: string, index: number) => {
   margin: 0 auto;
 }
 
+main.dark .summary-value {
+  background-color: rgb(192, 78, 78);
+  border: 1px solid rgb(224, 14, 14);
+}
+
 .summary-cell:hover .summary-value {
   background-color: rgb(255, 0, 0);
   opacity: 1;
@@ -187,8 +204,12 @@ const getXLegendDate = (x: string, index: number) => {
   position: absolute;
   bottom: -50px;
   rotate: 30deg;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   text-align: left;
   width: 100px;
 }
+
+main.dark .summary-x-legend {
+  color: #ddd;
+}
 </style>