Skip to content

Latest commit

 

History

History
90 lines (69 loc) · 2.74 KB

theming.md

File metadata and controls

90 lines (69 loc) · 2.74 KB
Raw

Theming

Change theme

The default theme can be changed using the yaml configuration file

theme: default # 'default', 'walkxcode', or 'neon' see files in 'src/assets/themes'.

Colors and background customization

Default colors and background can be customized for each theme variant (light and dark), using either the yaml config file, or the css variables (see "Additional stylesheets" below).

Available options

yaml css description
highlight-primary --highlight-primary header background, group title icons
highlight-secondary --highlight-secondary navbar background, default tag color
highlight-hover --highlight-hover navbar links hover, search input background
background --background page background color
card-background --card-background service card background color
text --text main text color
text-header --text-header header text color
text-title --text-title service card title color
text-subtitle --text-subtitle service card subtitle color
card-shadow --card-shadow Service card box-shadow
link --link Links color (footer & message), service card icon color
link-hover --link-hover Links hover color (footer & message), service card icon hover color
background-image --background-image page background image url (when used in css, set url(<image-url>) instead of just the url. see example below)

YAML example

colors:
  light:
    highlight-primary: "#3367d6"
    background-image: "assets/your/light/bg.webp"
    ...
  dark:
    highlight-primary: "#3367d6"
    background-image: "assets/your/dark/bg.webp"
    ...

CSS example

.light {
    --highlight-primary: #3367d6;
    --background-image: url("assets/your/light/bg.webp");
    ...
}

.dark {
    --highlight-primary: #3367d6;
    --background-image: url("assets/your/dark/bg.webp");
    ...
}

Additional stylesheets

One or more additional stylesheets can be loaded to add or override style from the current theme. Use the 'stylesheet' option in the yaml configuration file to load your own CSS file.

stylesheet:
   - "assets/custom.css"

Customization example

Max width modification

body #main-section .container {
    max-width: 2000px; // adjust to your needs (eg: calc(100% - 100px), none, ...)
}

Background gradient

#app {
    height: 100%;
    background: linear-gradient(90deg, #5c2483, #0095db);
}