Consume more tokens from arches theme, add dark mode toggle

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 -   Add login interface [#13](https://github.com/archesproject/arches-lingo/issues/13)
 -   Add front-end router [#11](https://github.com/archesproject/arches-lingo/issues/11)
+-   Add dark mode toggle [#91](https://github.com/archesproject/arches-lingo/issues/91)
 -   Add backend for search [#67](https://github.com/archesproject/arches-lingo/issues/67)
 
 ### Fixed

arches_lingo/src/arches_lingo/App.vue

@@ -69,7 +69,15 @@ router.beforeEach(async (to, _from, next) => {
             </div>
         </div>
     </main>
-    <Toast />
+    <Toast
+        :pt="{
+            summary: { fontSize: 'medium' },
+            detail: { fontSize: 'small' },
+            messageIcon: {
+                style: { marginTop: 'var(--p-toast-messageicon-margintop)' },
+            },
+        }"
+    />
 </template>
 
 <style scoped>

arches_lingo/src/arches_lingo/components/header/DarkModeToggle.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useGettext } from "vue3-gettext";
+
+import ToggleButton from "primevue/togglebutton";
+
+import { DEFAULT_THEME } from "@/arches/themes/default.ts";
+
+const { $gettext } = useGettext();
+
+const isDarkModeEnabled = ref(
+    window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches,
+);
+
+function toggleDarkMode() {
+    const element = document.querySelector("html");
+    // Remove the leading dot from the selector to get class name.
+    element!.classList.toggle(
+        DEFAULT_THEME.theme.options.darkModeSelector.substring(1),
+    );
+    isDarkModeEnabled.value = !isDarkModeEnabled.value;
+}
+</script>
+
+<template>
+    <ToggleButton
+        :model-value="isDarkModeEnabled"
+        :on-label="$gettext('Dark')"
+        :off-label="$gettext('Light')"
+        off-icon="pi pi-sun"
+        on-icon="pi pi-moon"
+        :pt="{
+            root: { ariaLabel: $gettext('Toggle dark mode') },
+            label: { style: { display: 'none' } },
+        }"
+        @click="toggleDarkMode"
+    />
+</template>

arches_lingo/src/arches_lingo/components/header/PageHeader.vue

@@ -5,6 +5,7 @@ import { useGettext } from "vue3-gettext";
 import Menubar from "primevue/menubar";
 
 import { routeNames } from "@/arches_lingo/routes.ts";
+import DarkModeToggle from "@/arches_lingo/components/header/DarkModeToggle.vue";
 import UserInteraction from "@/arches_lingo/components/user/UserInteraction.vue";
 import SearchDialog from "@/arches_lingo/components/header/SearchDialog.vue";
 
@@ -21,15 +22,15 @@ const items = ref([
 
 <template>
     <Menubar
-        class="page-header"
         :model="items"
+        style="border-radius: 0"
     >
         <template #start>
             <RouterLink
                 :to="{ name: routeNames.root }"
                 style="text-decoration: none; color: inherit"
             >
-                <h2>{{ $gettext("Arches Lingo") }}</h2>
+                <h1>{{ $gettext("Arches Lingo") }}</h1>
             </RouterLink>
             <SearchDialog />
         </template>
@@ -43,18 +44,23 @@ const items = ref([
                     :class="item.icon"
                     aria-hidden="true"
                 ></i>
-                <span>{{ item.label }}</span>
+                <span style="font-weight: var(--p-button-label-font-weight)">{{
+                    item.label
+                }}</span>
             </RouterLink>
         </template>
         <template #end>
-            <UserInteraction />
+            <div style="display: flex; align-items: center; gap: 1rem">
+                <DarkModeToggle />
+                <UserInteraction />
+            </div>
         </template>
     </Menubar>
 </template>
 
 <style scoped>
-.page-header {
-    border-radius: 0;
+:deep(.p-menubar-start) {
+    gap: var(--p-menubar-gap);
 }
 
 @media screen and (max-width: 960px) {

arches_lingo/src/arches_lingo/components/login/LoginLinks.vue

@@ -4,6 +4,8 @@ import { useGettext } from "vue3-gettext";
 
 import Button from "primevue/button";
 
+import { SECONDARY } from "@/arches_lingo/constants.ts";
+
 const { $gettext } = useGettext();
 </script>
 
@@ -13,11 +15,15 @@ const { $gettext } = useGettext();
             as="a"
             :label="$gettext('Register')"
             :href="arches.urls.signup"
+            :severity="SECONDARY"
+            :outlined="true"
         />
         <Button
             as="a"
             :label="$gettext('Multi-factor login')"
             :href="arches.urls.auth + '?next=/'"
+            :severity="SECONDARY"
+            :outlined="true"
         />
     </div>
 </template>

arches_lingo/src/arches_lingo/components/sidenav/SideNav.vue

@@ -41,13 +41,13 @@ const items = ref([
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-width: 3rem;
+    min-width: var(--p-button-icon-only-width);
     border-right: 1px solid var(--p-menubar-border-color);
 }
 
 .p-button {
-    min-height: 3rem;
-    min-width: 3rem;
+    min-height: var(--p-button-icon-only-width);
+    min-width: var(--p-button-icon-only-width);
     border-radius: 0;
     font-size: 1.5rem;
 }

arches_lingo/src/arches_lingo/components/user/UserInteraction.vue

@@ -52,13 +52,11 @@ const greeting = computed(() => {
 </script>
 
 <template>
-    <div style="display: flex; align-items: center">
+    <div style="display: flex; align-items: center; gap: 1rem">
         <span v-if="user">{{ greeting }}</span>
         <Button
-            style="margin-left: 1rem"
+            :label="$gettext('Sign out')"
             @click="issueLogout"
-        >
-            {{ $gettext("Sign out") }}
-        </Button>
+        ></Button>
     </div>
 </template>

arches_lingo/src/arches_lingo/constants.ts

@@ -4,6 +4,7 @@ import type { UserRefAndSetter } from "@/arches_lingo/types.ts";
 
 export const ANONYMOUS = "anonymous";
 export const ERROR = "error";
+export const SECONDARY = "secondary";
 
 export const DEFAULT_ERROR_TOAST_LIFE = 8000;
 export const SEARCH_RESULTS_PER_PAGE = 25;