(design) show text colour pallete and be reactive to light/dark mode changes

assets/dark.scss

@@ -137,8 +137,10 @@ body[data-theme="dark"] {
 
     /* BACKGROUNDS */
 
-    .bg-light { background-color: #111 !important; }
-    .bg-dark { background-color: #f8f9fa !important; }
+    .bg-light, .text-bg-light { background-color: #111 !important; }
+    .bg-dark, .text-bg-dark { background-color: #f8f9fa !important; }
+    .text-bg-light { color: #fff !important; }
+    .text-bg-dark { color: #000 !important; } 
     .bg-white { background-color: #000 !important; }
     .bg-white.text-white,
     .bg-dark.text-white,

components/PropertyDisplay.vue

@@ -6,12 +6,20 @@ const props = defineProps<{
 
 const text = useTemplateRef<HTMLSpanElement>('text');
 
-onMounted(() => {
+const updateText = () => {
     if (!text.value) {
         return;
     }
     text.value.innerHTML = props.format(getComputedStyle(text.value.parentElement!).getPropertyValue(props.property));
+};
+
+
+onMounted(() => {
+    updateText();
 });
+
+const { isDark } = useDark();
+watch(isDark, updateText);
 </script>
 
 <template>

pages/design.vue

@@ -2,6 +2,7 @@
 import { useNuxtApp } from 'nuxt/app';
 import PropertyDisplay from '~/components/PropertyDisplay.vue';
 import useSimpleHead from '../composables/useSimpleHead.ts';
+import { colours } from '@/src/styling.ts';
 
 const fonts = [
     {
@@ -17,45 +18,21 @@ const fonts = [
 const formatFont = (value: string): string => value.split(',')[0].replaceAll('"', '');
 
 const graphColours = ['#c71585', '#8b0f7a', '#15c79c'];
-const accentColours = [
-    {
-        name: 'primary',
-        colour: '#c71585',
-    },
-    {
-        name: 'secondary',
-        colour: '#6c757d',
-        // darkText: true
-    },
-    {
-        name: 'success',
-        colour: '#198754',
-    },
-    {
-        name: 'info',
-        colour: '#0dcaf0',
-        darkText: true,
-    },
-    {
-        name: 'warning',
-        colour: '#ffc107',
-        darkText: true,
-    },
-    {
-        name: 'danger',
-        colour: '#dc3545',
-        // darkText: true
-    },
-    {
-        name: 'dark',
-        colour: '#212529',
-    },
-    {
-        name: 'light',
-        colour: '#f8f9fa',
-        darkText: true,
-    },
-];
+const accentColours = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];
+
+const formatHex = (value: string): string => {
+    return parseInt(value.trim()).toString(16)
+        .padStart(2, '0');
+};
+
+const rgbToHex = (rgb: string): string => {
+    if (!rgb.startsWith('rgb(')) {
+        return rgb;
+    }
+    const [r, g, b] = rgb.replace(/^rgb\(/, '').replace(/\)$/, '')
+        .split(',');
+    return `#${formatHex(r)}${formatHex(g)}${formatHex(b)}`;
+};
 
 interface Image {
     label: string;
@@ -105,7 +82,7 @@ const getPrimaryUri = (links: string | Record<string, string>) => {
 </script>
 
 <template>
-    <Page>
+    <Page ref="page">
         <h2>
             <Icon v="palette" />
             <T>contact.contribute.design.header</T>
@@ -156,19 +133,34 @@ const getPrimaryUri = (links: string | Record<string, string>) => {
                 {{ colour }}
             </div>
         </div>
+        <div ref="accentColoursElement" class="d-flex border rounded mb-3">
+            <div
+                v-for="name in accentColours"
+                :key="name"
+                :class="['text-center', 'p-2', 'flex-grow-1', `text-bg-${name}`]"
+            >
+                <strong>{{ name }}</strong>
+                <br>
+                <PropertyDisplay property="background-color" :format="rgbToHex" />
+            </div>
+        </div>
         <div class="d-flex border rounded mb-3">
             <div
-                v-for="colour in accentColours"
-                :key="colour.name"
-                class="text-center p-2 flex-grow-1"
-                :style="`background-color: ${colour.colour}; color: ${colour.darkText ? '#212529' : '#f8f9fa'}`"
+                v-for="name in colours"
+                :key="name"
+                :class="['text-center', 'p-2', 'flex-grow-1', `colour-${name}`]"
             >
-                <strong>{{ colour.name }}</strong>
+                <strong>{{ name || 'default' }}</strong>
                 <br>
-                <span class="colour">{{ colour.colour }}</span>
+                <PropertyDisplay property="color" :format="rgbToHex" />
             </div>
         </div>
 
+        Colours might differ between light and dark mode to ensure appropriate contrast.
+        <div class="text-center">
+            <ModeSwitch />
+        </div>
+
         <h3>Images</h3>
         <div class="row">
             <div v-for="{ label, links, warning } in images" :key="label" class="col-6 col-lg-4 mb-3">