> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# dynamic:styling
export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
return
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.dynamicStyling
[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.dynamicStyling
[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1184
## Description
Works the same as the styling directive but watches for updates. This
should only be used if it is required that the styling classes are
updated after their initial value to improve performance.
## Usage
as attribute
```xml wrap theme={"dark"}
...
```
#### Parameters
| Param | Type | Details |
| -------------- | ---------- | -------------------------------------------------- |
| dynamicStyling | **string** | separated string of styles to apply to the element |
## Example
#### Source
```xml wrap theme={"dark"}
```
```js wrap theme={"dark"}
angular.module('lightning')
roller('ExampleController', ['$scope', function($scope) {
$scope.styles = 'bg-raspberry text-raspberry-dark';
$scope.toggleStyles = function () {
if ($scope.styles == 'bg-raspberry text-raspberry-dark') {
$scope.styles = 'bg-sunflower text-sunflower-dark';
} else {
$scope.styles = 'bg-raspberry text-raspberry-dark';
}
};
}]);
```
#### Result
