# Theme ## How does it work? The approach of light/dark theme in Sentre is pretty forward. We employ CSS Selector to realize the theme switch with pure css (or sass, less). The current theme will be depicted by the body id. For example, the current theme is light, then ``. By contrast, ``. To use the body id as a trigger, you can follow the example below to switch the text color corresponding to the current theme. ```less // index.css #light .text-color { color: "black"; } #dark .text-color { color: "white"; } ``` ## Theme Detector For better development experience, the platform set up a [postcss](https://postcss.org/) process for auto-detection and prepending the correct selector (i.e. either #light or #dark). To activate this feature, you only need to define your styles by less file and rename it to either `[filename].light.less` or `[filename].dark.less`; We also accept `light.less` or `dark.less` for short. The process will detect its extension and prepend the prefix to all styling within the file. ```less // light.less // Before .text-color { color: "black"; } // After #light .text-color { color: "black"; } ``` ```less // dark.less // Before .text-color { color: "white"; } // After #dark .text-color { color: "white"; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.sentre.io/advanced-usage/theme.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.