Skip to content

Starlight CSS & Styling

Check the Starlight Documentation for CSS and general Styling configurations.

Use the Color Theme Editor to generate colors

Manavees Garden Styling

Theme Colors

  1. Navigate to the following file
/src/styles/custom.css
  1. Add the following generated colors
/* Dark mode colors. */
:root {
    --sl-color-accent-low: #132731;
    --sl-color-accent: #1c7397;
    --sl-color-accent-high: #b5cdda;
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #d8f3ff;
    --sl-color-gray-2: #aad1e2;
    --sl-color-gray-3: #5baed0;
    --sl-color-gray-4: #00617e;
    --sl-color-gray-5: #003e52;
    --sl-color-gray-6: #002b3a;
    --sl-color-black: #001c26;
}
/* Light mode colors. */
:root[data-theme='light'] {
    --sl-color-accent-low: #c8dae4;
    --sl-color-accent: #005674;
    --sl-color-accent-high: #153746;
    --sl-color-white: #001c26;
    --sl-color-gray-1: #002b3a;
    --sl-color-gray-2: #003e52;
    --sl-color-gray-3: #00607c;
    --sl-color-gray-4: #4297b8;
    --sl-color-gray-5: #a2c9da;
    --sl-color-gray-6: #d8f3ff;
    --sl-color-gray-7: #ecf9ff;
    --sl-color-black: #ffffff;
}

iframe custom height and border-radius

using iframe has an issue and sets the height to auto. Added the folowing to /src/styles/custom.css

.sl-markdown-content :is(iframe):not(:where(.not-content *)) {
    display: block;
    max-width: 100%;
    height: 352px;
    border-radius: 12px
}

This sets the height for all the iframe embeds to 352px. It looks good since my Spotify lists and Youtube embeds look nice. I also added the border-radius to have a round border that I really like.

Make all images with round borders

Added the following code to /src/styles/custom.css to make all the elements with round corners.

.sl-markdown-content :is(img, picture, video, canvas, svg):not(:where(.not-content *)) {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

Change aside Border

Added the following cote to /src/styles/custom.css. This makes the border of the aside rounded

}
.starlight-aside {
border-radius: 12px;
}

Change PDF Embed iframe height

NOT WORKING!

}
.sl-markdown-content .sl-obs-embed-pdf {
border: none;
height: 300px;
width: 100%
}

Adjusting the video height

}
/* adjusting the height of the video */
.sl-markdown-content :is(video):not(:where(.not-content *)) {
display: block;
max-width: 100%;
height: 352px;
border-radius: 12px;
}

Adjusting Youtube video height and border radius

lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
border-radius: 12px;
height: 352px;
}