simplify vuetify themes and remove codeblock component

app.vue

@@ -37,8 +37,8 @@ html {
 }
 
 .v-application {
-  background: rgb(var(--v-theme-neutral));
-  color: rgb(var(--v-theme-on-neutral));
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
   font-family: Inter, sans-serif;
 }
 
@@ -60,18 +60,18 @@ html {
 
 .topbar-container {
   padding: 32px 0;
-  border-bottom: solid 1px rgba(var(--v-theme-on-neutral), 0.2);
+  border-bottom: solid 1px rgba(var(--v-theme-on-background), 0.2);
   margin-bottom: 3rem;
   position: sticky;
   top: 0;
-  background: rgb(var(--v-theme-neutral));
+  background: rgb(var(--v-theme-background));
   z-index: 1000;
 }
 
 :deep(h2) {
   margin: 48px 0 24px 0;
   padding-bottom: 9px;
-  border-bottom: solid 1px rgba(var(--v-theme-on-neutral), 0.2);
+  border-bottom: solid 1px rgba(var(--v-theme-on-background), 0.2);
 
   @media (max-width: 600px) {
     margin: 24px 0;
@@ -83,11 +83,11 @@ html {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  border-top: rgb(var(--v-theme-neutral-strong));
+  border-top: rgb(var(--v-theme-on-surface));
   font-size: 12px;
 
   a {
-    color: rgb(var(--v-theme-on-neutral));
+    color: rgb(var(--v-theme-on-background));
   }
 
   span {

components/BackToTheTop.vue

@@ -35,8 +35,8 @@ const onTopIntersect = (intersect: boolean) => {
   height: 48px !important;
   width: 48px;
   border-radius: 32px;
-  background: rgb(var(--v-theme-primary-alt));
-  color: rgb(var(--v-theme-on-primary-alt));
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
 
   @media (max-width: 1350px) {
     right: 5%;

components/Badge.vue

@@ -115,7 +115,7 @@ const onMoreClick = () => {
     .v-btn {
       width: 24px;
       font-size: 13px;
-      color: rgb(var(--v-theme-primary-alt));
+      color: rgb(var(--v-theme-primary));
     }
   }
 

components/CodeBlock.vue

@@ -1,101 +0,0 @@
-<template>
-  <div :class="['code-block', themeClass]">
-    <pre><code :class="[language, 'hljs']" v-html="highlightedCode" /></pre>
-    <v-btn
-        icon="fas fa-copy"
-        variant="tonal"
-        aria-label="Copy the content to the clipboard"
-        class="text-primary"
-        @click="copyCode"
-    />
-  </div>
-  <v-snackbar v-model="showConfirmation" color="success" :timeout="2000">
-    Content copied to clipboard
-  </v-snackbar>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import hljs from 'highlight.js'
-
-  const props = defineProps({
-    code: String,
-    language: {
-      type: String,
-      required: false,
-      default: 'php'
-    }
-  })
-
-  import {useTheme} from "vuetify";
-
-  const theme = useTheme()
-  const themeClass = computed(() => theme.name.value)
-
-  const highlightedCode = ref(props.code)
-
-  watch(() => props.code, (newVal) => {
-    if (newVal) {
-      highlightedCode.value = hljs.highlightAuto(newVal).value;
-    }
-  }, { immediate: true });
-
-  let copyCode = () => { console.error('clipboard is not available')}
-
-  const showConfirmation = ref(false)
-
-  onMounted(() => {
-    copyCode = async () => {
-      try {
-        await navigator.clipboard.writeText(props.code);
-        showConfirmation.value = true
-      } catch (err) {
-        console.error('Failed to copy text: ', err);
-      }
-    }
-  })
-</script>
-
-<style lang="scss">
-// /!\ Warning: `scoped` attribute break the highlight js style, do not add here (no harm though)
-@use "sass:meta";
-
-.code-block {
-  display: flex;
-  flex-direction: row;
-  margin: 24px;
-  background: rgba(var(--v-theme-code-background));
-  border-radius: 4px;
-
-  * {
-    background: transparent !important;
-  }
-
-  pre {
-    flex: 1;
-  }
-
-  code {
-    white-space: pre-wrap;
-  }
-
-  @media (max-width: 600px) {
-    margin: 24px 6px;
-  }
-}
-
-.light {
-  @include meta.load-css("highlight.js/styles/stackoverflow-light");
-}
-
-.dark {
-  @include meta.load-css("highlight.js/styles/stackoverflow-dark");
-}
-
-// no syntax coloration with shell language
-.shell {
-  * {
-    color: rgba(var(--v-theme-on-code-background)) !important;
-  }
-}
-</style>

components/Footer.vue

@@ -19,6 +19,6 @@ footer {
   bottom: 0;
   width: 100%;
   height: 50px;
-  background-color: rgb(var(--v-theme-primary-alt));
+  background-color: rgb(var(--v-theme-primary));
 }
 </style>

components/Topbar.vue

@@ -60,7 +60,7 @@
   }
 
   .v-btn {
-    color: rgb(var(--v-theme-on-neutral));
+    color: rgb(var(--v-theme-on-background));
   }
 
   .icon-links {
@@ -82,7 +82,7 @@
     }
 
     a {
-      color: rgb(var(--v-theme-on-neutral--clickable));
+      color: rgb(var(--v-theme-on-background--clickable));
     }
   }
 }

pages/index.vue

@@ -148,7 +148,7 @@ const showLongIntro: Ref<boolean> = ref(false)
   }
 
   :deep(a) {
-    color: rgb(var(--v-theme-on-primary-alt--clickable));
+    color: rgb(var(--v-theme-on-primary--clickable));
   }
 
   div {

plugins/vuetify.ts

@@ -8,82 +8,28 @@ import { defineNuxtPlugin } from '#app'
 interface Theme {
   dark: boolean,
   colors: {
-    /**
-     * @see Cf. doc/colors.md pour le rôle de chaque couleur
-     */
-    // Global
     'background': string,
     'on-background': string,
     'surface': string,
     'on-surface': string,
     'primary': string,
     'on-primary': string,
-    'primary-alt': string,
-    'on-primary-alt': string,
-    'secondary': string,
-    'on-secondary': string,
-    'neutral-strong': string,
-    'on-neutral-strong': string,
-    'neutral': string,
-    'on-neutral': string,
-    'on-neutral--clickable': string,
-    'neutral-soft': string,
-    'on-neutral-soft': string,
-    'danger': string,
-    'on-danger': string,
-    'success': string,
-    'on-success': string,
-    'warning': string,
-    'on-warning': string,
-    'info': string,
-    'on-info': string,
   }
 }
 
-
 export const lightTheme: Theme = {
   dark: false,
   colors: {
     'background': '#ffffff',
-    'on-background': '#1a1a1a',
-
-    'code-background': '#f6f8fa',
-    'on-code-background': '#000000',
+    'on-background': '#333333',
+    'on-background--clickable': '#404040',
 
     'surface': '#f9f9f9',
     'on-surface': '#4d4d4d',
 
-    'primary': '#334467',
-    'on-primary': '#ffffff',
-
-    'primary-alt': '#ffffff',
-    'on-primary-alt': '#1a1a1a',
-
-    'secondary': '#ced0e4',
-    'on-secondary': '#f5f5f5',
-
-    'neutral-strong': '#777777',
-    'on-neutral-strong': '#ecf0f5',
-
-    'neutral': '#ffffff',
-    'on-neutral': '#404040',
-    'on-neutral--clickable': '#404040',
-
-    'neutral-soft': '#ecf0f5',
-    'on-neutral-soft': '#464646',
-
-    // Content
-    'danger': '#f56954',
-    'on-danger': '#ffffff',
-
-    'success': '#00a65a',
-    'on-success': '#ffffff',
-
-    'warning': '#f39c12',
-    'on-warning': '#ffffff',
-
-    'info': '#3c8dbc',
-    'on-info': '#ffffff',
+    'primary': '#e6e6e6',
+    'on-primary': '#1a1a1a',
+    'on-primary--clickable': '#4d4d4d',
   }
 }
 
@@ -92,45 +38,14 @@ export const darkTheme: Theme = {
   colors: {
     'background': '#1a1a1a',
     'on-background': '#e6e6e6',
-
-    'code-background': '#161b22',
-    'on-code-background': '#ffffff',
+    'on-background--clickable': '#e6e6e6',
 
     'surface': '#262626',
     'on-surface': '#ffffff',
 
-    'primary': '#adb2d2',
-    'on-primary': '#404040',
-
-    'primary-alt': '#13263a',
-    'on-primary-alt': '#e6e6e6',
+    'primary': '#13263a',
+    'on-primary': '#e6e6e6',
     'on-primary-alt--clickable': '#ffffff',
-
-    'secondary': '#324150',
-    'on-secondary': '#f5f5f5',
-
-    'neutral-strong': '#595959',
-    'on-neutral-strong': '#ecf0f5',
-
-    'neutral': '#131a20',
-    'on-neutral': '#cccccc',
-    'on-neutral--clickable': '#e6e6e6',
-
-    'neutral-soft': '#090c11',
-    'on-neutral-soft': '#cccccc',
-
-    // Content
-    'danger': '#f56954',
-    'on-danger': '#ffffff',
-
-    'success': '#00a65a',
-    'on-success': '#ffffff',
-
-    'warning': '#f39c12',
-    'on-warning': '#ffffff',
-
-    'info': '#3c8dbc',
-    'on-info': '#ffffff',
   }
 }