Where can I change the color of menu hover?

[heihahehe]

I like this theme very much, I am working on customization, I want to change the color of the menu.

[bora-7]

@h-enk bump

[h-enk]

In assets/scss/common/_variables-custom.scss — for example:

// Put your custom SCSS variables here

// Light mode
$primary: blue;

// Dark mode
$link-color-dark: aquamarine;
$button-color-dark: aquamarine;

:root,
::backdrop {
  --sl-color-accent-high: aquamarine;
}

Reference:

• node_modules/@hyas/doks-core/assets/scss/common/_variables-overrides.scss
• node_modules/@hyas/doks-core/assets/scss/common/_colors.scss
• node_modules/bootstrap/scss/_variables.scss
• node_modules/bootstrap/scss/_variables-dark.scss

[bora-7]

Thanks for your response, similarly how can I change the font of the theme?

[h-enk]

If you'd like to use system default fonts, add to assets/scss/common/_variables-custom.scss:

// $font-family-sans-serif:      "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

If you'd like to use a Google font, the preferred way to do this (for performance reasons) is to localize the font with the help of a tool like for example google-webfonts-helper

For example:

• Select Monserrat, charset latin, style regular and 500

• Copy CSS for modern browsers (use folder prefix /fonts/montserrat/) and paste in assets/scss/common/custom.scss:

  // Put your custom SCSS code here
  
  /* montserrat-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/montserrat/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/montserrat/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

• Download files, extract, and paste fonts in /static/fonts/montserrat/

• Add to assets/scss/common/_variables-custom.scss:

// $font-family-sans-serif:      "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-sans-serif:      "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

And, voilà:

Reference:

• node_modules/@hyas/doks-core/assets/scss/common/_variables-overrides.scss

[h-enk]

Avoid layout shift by preloading the fonts:

• copy node_modules/@hyas/doks-core/layouts/partials/head/resource-hints.html to layouts/partials/head/resource-hints.html and add — for example:

<link rel="preload" href="{{ "fonts/montserrat/montserrat-v26-latin-regular.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ "fonts/montserrat/montserrat-v26-latin-500.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>