Partially solves #143

assets/css/tailwind.css

@@ -6,10 +6,11 @@
 	color: var(--color-info);
 	background-color: rgb(27, 42, 56);
 } */
-:root {
+:root, .defaultTheme {
   --color-primary: #0b192e;
   --color-secondary: #182b45;
   --color-tertiary: #0b3341;
+  --color-quaternary: #1c3250;
   --color-accent: #0cc9ab;
 
   --color-black: #202121;
@@ -28,6 +29,52 @@
   --color-info: #177edc;
 }
 
+@layer base {
+  html[data-theme="accessibility"],  .accessibilityTheme{
+    --color-primary: #fff;
+    --color-secondary: #f1f5f9;
+    --color-tertiary: #e2e8f0;
+    --color-quaternary: #cbd5e1;
+    --color-accent: #055E4F; /* 7.04:1 contrast to #f1f5f9 */
+
+    --color-black: #fff;
+    --color-dark: #000;
+    /*--color-transparent: #fff;*/
+    --color-light: lime;
+    --color-white: #000;
+    /* text*/
+    --color-heading: #777;
+    --color-subheading: #333;
+    --color-body: #555;
+    /*
+    --color-error: #ff0000;
+    --color-success: ;
+    --color-info: ;
+    --color-warning: ;
+    */
+
+
+    * {
+      font-family: "Lexend" !important;
+      /* font-size: clamp(20px, 1em, 100px) !important; */
+      line-height: 1.6 !important;
+      letter-spacing: 2.5px !important;
+    }
+    p,a,label,h1,h2,h3,h4,h5,h6 {
+      color: #000;
+    }
+    /*
+    .text-heading-4, .text-body-1, .text-body-2, .text-subheading, .text-subheading-1, p, a, button  {
+      font-size: 20px !important;
+    }
+    */
+    :focus {
+      outline: none;
+      box-shadow: 0 0 0 5px #FFD700;
+    }
+  }
+}
+
 /* ======================================================= Fonts */
 @font-face {
   font-family: "Ubuntu Mono";
@@ -51,6 +98,14 @@
     U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: "Lexend";
+  src: url(~/public/fonts/Lexend/Lexend-Regular.ttf) format("truetype");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
 /* ======================================================= Transitions */
 .slide-up-enter-active,
 .slide-up-leave-active {
@@ -493,4 +548,4 @@
   [data-tooltip=""]::after {
     display: none !important;
   }
-}
+}

components/Dialog.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
 
-    <div class="card flex flex-wrap gap-card justify-end bg-[#1c3250]">
+    <div class="card flex flex-wrap gap-card justify-end bg-[var(--color-quaternary)]">
       <Btn
         v-if="!!secondaryBtn.label"
         :bgColor="theme.bg"

components/Footer.vue

@@ -3,7 +3,7 @@
 		class="container-fluid bg-tertiary flex flex-col items-center gap-7 pt-8 relative z-0"
 	>
 		<img
-			src="/images/logo-text.png"
+			:src="logoSrc"
 			:alt="t('AltAttributes.BootstrapAcademyLogo')"
 			class="w-40 mb-5 md:mt-2 block lg:hidden object-contain"
 		/>
@@ -59,6 +59,13 @@ import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
+  computed: {
+    logoSrc() {
+      return document.documentElement.getAttribute('data-theme') === 'accessibility'
+        ? '/images/logo-black-text.png'
+        : '/images/logo-text.png';
+    }
+  },
   setup() {
     const { t } = useI18n();
 
@@ -103,6 +110,6 @@ export default defineComponent({
 
 <style scoped>
 footer a {
-	@apply transition-basic font-body text-base text-body;
+  @apply transition-basic font-body text-base text-body;
 }
 </style>

components/Navbar.vue

@@ -3,7 +3,7 @@
     <!-- START -->
     <NuxtLink to="/" class="hidden lg:flex gap-card-sm items-center">
       <img
-        src="/images/logo-text.png"
+        :src="logoSrc"
         :alt="t('AltAttributes.BootstrapAcademyLogo')"
         class="object-contain lg:w-28 xl:w-36 cursor-pointer"
       />
@@ -41,6 +41,13 @@ export default {
     links: { default: [] },
     authorized: { type: Boolean, default: false },
   },
+  computed: {
+    logoSrc() {
+      return document.documentElement.getAttribute('data-theme') === 'accessibility' 
+        ? '/images/logo-black-text.png' 
+        : '/images/logo-text.png';
+    }
+  },
   setup() {
     const { t } = useI18n();
 

components/NavbarBack.vue

@@ -3,6 +3,7 @@
     class="container-fluid bg-secondary flex gap-4 items-center justify-between"
   >
     <Btn tertiary :icon="ArrowLeftIcon" @click="onclickNavigate">
+      <!-- TODO change image to logo_black.png in accessibility theme -->
       <img src="/images/logo.png" class="w-6 h-auto object-contain" :alt="t('AltAttributes.BootstrapAcademyLogo')" />
 
       {{ t(backRoute.label) }}

components/ThemeSelector.vue

@@ -0,0 +1,27 @@
+<template>
+  <section class="inline-block mr-4">
+    <button>
+      <svg xmlns="http://www.w3.org/2000/svg" height="80" viewBox="40 40 220 120">
+        <circle cx="100" cy="100" r="60" fill="var(--color-accent)" />
+        <circle cx="150" cy="100" r="60" fill="var(--color-secondary)" />
+        <circle cx="200" cy="100" r="60" fill="var(--color-primary)" />
+      </svg>
+
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+
+  setup() {
+    const { t } = useI18n();
+    return { t };
+  },
+});
+</script>
+
+<style scoped></style>

components/account/ChangeThemes.vue

@@ -0,0 +1,45 @@
+<template>
+  <article class="bg-secondary card style-card flex flex-col items-center justify-center">
+    <PaintBrushIcon class="h-10 w-10 text-accent mb-4 max-w-xl" />
+
+    <h2 class="text-heading-2">
+      {{ t("Headings.Themes") }}
+    </h2>
+
+    <div class="flex items-center space-x-4 mt-2 mb-8">
+      <CheckCircleIcon class="h-8 w-8 text-accent max-w-xl" />
+
+      <div class="flex flex-col items-center">
+        <p class="text-center">
+          {{ t("Body.AdjustTheDesign") }}
+        </p>
+      </div>
+    </div>
+
+    <NuxtLink to="/account/themes">
+      <Btn>{{ t('Buttons.OpenThemeSettings') }}</Btn>
+    </NuxtLink>
+  </article>
+</template>
+
+<script lang="ts">
+import { CheckCircleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/outline';
+import { PaintBrushIcon } from '@heroicons/vue/24/solid';
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  components: {
+    CheckCircleIcon,
+    ShieldExclamationIcon,
+    PaintBrushIcon
+  },
+  setup() {
+    const { t } = useI18n();
+
+    return { t };
+  },
+});
+</script>
+
+<style scoped></style>

components/input/Color.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="width">
+		<article class="flex justify-between items-center gap-card">
+			<label for="" class="text-heading-4 text-body font-heading">
+				{{ label }}
+			</label>
+
+			<div class="text-heading-4 text-heading font-heading">
+				{{ prefix }}{{ abbreviateNumber(value) }}
+			</div>
+		</article>
+		<input
+			ref="DOM_INPUT"
+			type="color"
+			v-model="value"
+			@change=""
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+
+export default defineComponent({
+  props: {
+    label: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'valid'],
+  setup(props, { emit }) {
+    const DOM_INPUT = ref<HTMLInputElement | null>(null);
+
+    const value = ref(0);
+
+    onMounted(() => {
+      value.value = props.modelValue;
+      setRange(props.modelValue);
+    });
+
+    watch(
+      () => props.modelValue,
+      (newValue, oldValue) => {
+        value.value = newValue;
+      }
+    );
+
+    function setRange(val: string | number) {
+      let value = val;
+
+      if (typeof value == 'string') {
+        value = parseInt(value);
+      }
+
+      let total = props.max - props.min;
+      let filled = value / total;
+      let percent = filled * 100;
+      percent = percent - props.reduce;
+
+      if (!DOM_INPUT.value) return;
+      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, white ${percent}%,  white 100%)`;
+    }
+
+    function emitRange() {
+      emit('update:modelValue', value.value);
+    }
+
+    watch(
+      () => value.value,
+      (newValue, oldValue) => {
+        setRange(newValue);
+      }
+    );
+
+    return { DOM_INPUT, setRange, emitRange, value };
+  },
+});
+</script>
+
+<style scoped>
+/*
+.width {
+	--margin-left: 1.5rem;
+	width: calc(100% - var(--margin-left));
+}
+input[type='color'] {
+	border-radius: 8px;
+	height: 7px;
+	outline: none;
+	transition: background 450ms ease-in;
+	-webkit-appearance: none;
+	border: none;
+}
+input[type='color']::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	background-color: var(--color-accent);
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+}
+input[type='color']::-moz-range-thumb {
+	-webkit-appearance: none;
+	background-color: var(--color-accent);
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+}
+*/
+</style>

components/input/Range.vue

@@ -64,7 +64,7 @@ export default defineComponent({
       percent = percent - props.reduce;
 
       if (!DOM_INPUT.value) return;
-      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, white ${percent}%,  white 100%)`;
+      DOM_INPUT.value.style.background = `linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) ${percent}%, var(--color-white) ${percent}%,  var(--color-white) 100%)`;
     }
 
     function emitRange() {
@@ -95,6 +95,7 @@ input[type='range'] {
 	transition: background 450ms ease-in;
 	-webkit-appearance: none;
 	border: none;
+	background: var(--color-white);
 }
 input[type='range']::-webkit-slider-thumb {
 	-webkit-appearance: none;
@@ -107,7 +108,7 @@ input[type='range']::-webkit-slider-thumb {
 	cursor: pointer;
 }
 input[type='range']::-moz-range-thumb {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 	background-color: var(--color-accent);
 	width: 20px;
 	height: 20px;