How do I change colors for accents ?

[pavanpodila]

Describe the bug

I love the theme and would like to change the accent color ? Is there an easy way to set the variable or update some config ? I could not find a direct way to do this.

To Reproduce

No easy way to change accent color

Expected behavior

There should be some config to change colors

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

[HiDeoo]

Thanks for the feedback 🙌

At the moment, customization can be done by using Starlight custom CSS and overriding some CSS variables or classes. In the case of the accent colors, the 3 main variables would be --sl-color-accent-low, --sl-color-accent, and --sl-color-accent-high (you can find a complete list here).

Altho, until Cascade Layers are supported by Starlight (currently WIP), you may need to trick the specificity of the CSS selectors to override the default values set by the theme. For example, you can use :root:is(:root) instead of :root to increase the specificity of the selector.

:root:is(:root),
::backdrop:is(::backdrop) {
  --sl-color-accent-low: red;
  --sl-color-accent: red;
  --sl-color-accent-high: red;
}

The above CSS will override the accent colors to red:

[pavanpodila]

Awesome ...thanks so much for the direction @HiDeoo ...been following your work and its inspiring! BTW, I am converting some of my websites and apps to adopt Astro as the core framework ... been going great so far.

[lmnzx]

with this config i could change the color for all the elements except the codebloacks,

:root:is(:root),
::backdrop:is(::backdrop) {
	--sl-color-accent-low: #251d3e;
	--sl-color-accent: #704dc7;
	--sl-color-accent-high: #c9c2ee;
	--sl-color-white: #ffffff;
	--sl-color-gray-1: #ececfb;
	--sl-color-gray-2: #c0c0d2;
	--sl-color-gray-3: #8888a9;
	--sl-color-gray-4: #555473;
	--sl-color-gray-5: #353451;
	--sl-color-gray-6: #24233e;
	--sl-color-black: #171723;
}

:root[data-theme='light']:is(:root[data-theme='light']),
[data-theme='light'] ::backdrop:is(::backdrop) {
    --sl-color-accent-low: #d7d2f3;
    --sl-color-accent: #714fca;
    --sl-color-accent-high: #34275c;
    --sl-color-white: #171723;
    --sl-color-gray-1: #24233e;
    --sl-color-gray-2: #353451;
    --sl-color-gray-3: #555473;
    --sl-color-gray-4: #8888a9;
    --sl-color-gray-5: #c0c0d2;
    --sl-color-gray-6: #ececfb;
    --sl-color-black: #ffffff;
}

How to change the colors of the codeblocks? what variables to modify?

[HiDeoo]

How to change the colors of the codeblocks? what variables to modify?

I guess two approaches are possible for code blocks. If you have a theme that you want to use, defining it in your Starlight expressiveCode configuration would be enough:

export default defineConfig({
  integrations: [
    starlight({
      expressiveCode: {
        // The themes you want to use.
        themes: ['catppuccin-macchiato', 'catppuccin-latte'],
      },
      title: 'My Docs',
    }),
  ],
})

Otherwise, you can use Expressive Code style overrides:

export default defineConfig({
  integrations: [
    starlight({
      expressiveCode: {
        styleOverrides: {
          // Some custom style overrides.
          codeBackground: 'var(--code-background)',
        },
      },
      title: 'My Docs',
    }),
  ],
})

The linked page contains a list of all the available style overrides.

Note that at the moment, settings custom styleOverrides will override all the ones applied by the theme. This should be fixed in a future version of Expressive Code.