> ## Documentation Index
> Fetch the complete documentation index at: https://docs.teamsbutactuallygood.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

<Tip>
  Be sure to have follow the [dev setup](/dev-setup) before starting to dev on TBAG
</Tip>

Here you'll have a full tutorial on how to make a theme for Teams but (actually) good.

<Info>
  If you want to make your own custom theme, it's better to use Teams but (actually) good custom theme system so you don't have to build the extension all the time to see the changes (or watch but it does the same thing).

  <Frame>
    <img src="https://mintcdn.com/leonimust/jTbc-uDQ1EIawkiY/images/tbag-themes-custom-themes.jpg?fit=max&auto=format&n=jTbc-uDQ1EIawkiY&q=85&s=6863caeebc8daf3dd55d2084d6f05ece" alt="Tbag Themes Custom Themes" width="1672" height="292" data-path="images/tbag-themes-custom-themes.jpg" />
  </Frame>
</Info>

Here is an example of a theme:

```css theme={null}
/**
 * @name Test Name
 * @author LeonimusT
 * @version 0.0.1
 * @description Test description.
 * @source https://github.com
 * @website https://leonimust.com
 */

.fui-FluentProvider,
[class*="fui-FluentProvider"] {
  --backgroundCanvas: #1cbf52 !important;
}

#ms-searchux-input {
  background-color: #ffffff !important;
}
```

In the comments you've different information.

<AccordionGroup>
  <Accordion title="@name">
    The name of the theme
  </Accordion>

  <Accordion title="@author (optional)">
    The author of the theme, you basically
  </Accordion>

  <Accordion title="@version">
    A simple version, e.g. 1.0.1
  </Accordion>

  <Accordion title="@description (optional)">
    Small description
  </Accordion>

  <Accordion title="@source (optional)">
    Your GitHub, GitLab or something else... Basically where the theme is hosted
  </Accordion>

  <Accordion title="@website (optional)">
    Your website, portfolio or something similar
  </Accordion>
</AccordionGroup>

<Info>
  Since themes are just CSS, all CSS elements are available to use, no restriction on them
</Info>

In here we won't speak on how CSS works, it's not the goal of this page, for that you've this [CSS Tutorial](https://www.w3schools.com/Css/) from W3School or other tutorials on Internet