Proof of concept : Custom UF Theme

app/assets/App.vue

@@ -8,11 +8,11 @@ UIkit.use(Icons);
 
 <template>
     <header>
-        <Navbar title="Website Title" />
+        <Navbar title="Userfrosting" />
     </header>
     <RouterView />
 </template>
 
 <style lang="less">
-@import "uikit/src/less/uikit.theme.less";
+@import "less/uf-theme.less";
 </style>

app/assets/components/Navbar.vue

@@ -10,12 +10,14 @@ defineProps({
 
 <template>
     <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
-        <div class="uk-navbar-container tm-navbar-container">
+        <div class="uk-navbar-container">
             <div class="uk-container uk-container-expand">
                 <nav class="uk-navbar" uk-navbar>
                     <div class="uk-navbar-left">
                         <a href="/" class="uk-navbar-item uk-logo">{{ title }}</a>
-                        <ul class="uk-navbar-nav">
+                    </div>
+                    <div class="uk-navbar-right">
+                       <ul class="uk-navbar-nav">
                             <li>
                                 <RouterLink to="/">Home</RouterLink>
                             </li>

app/assets/less/components/navbar.less

@@ -0,0 +1,15 @@
+// Variables
+// ========================================================================
+@navbar-background: #ee6e73;
+@navbar-nav-item-color: #ffffff;
+@navbar-nav-item-hover-color: #ffffff;
+@navbar-nav-item-height: 64px;
+@navbar-nav-gap: 0px;
+@navbar-nav-gap-m: 0px;
+@navbar-nav-item-padding-horizontal: 15px;
+
+// Custom hooks
+// ========================================================================
+.hook-navbar-nav-item-hover() {
+    background-color: rgb(239,139,140);
+}

app/assets/less/components/utility.less

@@ -0,0 +1,16 @@
+@import "~@fontsource/montserrat/700.css";
+
+// Variables
+// ========================================================================
+@logo-color: #ffffff;
+@logo-hover-color: #ffffff;
+
+// Custom hooks
+// ========================================================================
+.hook-logo() {
+    text-transform: uppercase;
+    letter-spacing: -0.45px;
+    font-size: 2.1rem;
+    font-weight: 700;
+    font-family: "Montserrat","Helvetica Neue","Helvetica","Arial",sans-serif;
+}

app/assets/less/uf-theme.less

@@ -0,0 +1,6 @@
+// Core
+@import "uikit/src/less/uikit.theme.less";
+
+// Custom components
+@import "components/navbar.less";
+@import "components/utility.less";

package.json

@@ -1,5 +1,6 @@
 {
     "dependencies": {
+        "@fontsource/montserrat": "^5.0.8",
         "axios": "^1.5.0",
         "uikit": "^3.16.26",
         "vue": "^3.3.4",