# Config
---
### useTheme() <3
```ts
const theme = useTheme();
```
----
### Why do I love useTheme()?
```ts
const theme = useTheme();
```
----
### Because of what it does NOT do
```ts
const theme = useTheme();
const menu = theme === "light" ? "#fff" : "#000"
const butn = theme === "light" ? "#fff" : "#000"
```
----
### Why is this bad?
```ts
const theme = useTheme();
const menu = theme === "light" ? "#fff" : "#000"
const butn = theme === "light" ? "#fff" : "#000"
```
----
### Change color
```ts
const theme = useTheme();
const menu = theme === "light" ? "#afafaf" : "#000"
const butn = theme === "light" ? "#afafaf" : "#000"
```
----
### Add theme
```ts
const theme = useTheme();
const menu = theme === "light" ? "#afafaf" : theme === "mono" ? "#bbb" : "#000"
const butn = theme === "light" ? "#afafaf" : "#000"
```
----
### Remove theme
```ts
const theme = useTheme();
const menu = theme === "mono" ? "#bbb" : "#000"
const butn = "#000"
```
----
### Rename theme
```ts
const theme = useTheme();
const menu = theme === "monochrome" ? "#bbb" : "#000"
const butn = "#000"
```
----
### It keeps changing!
----
### Maintainance!
----
### Better way, like we do it
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground
const butn = theme.PrimaryBackground
```
----
### Change color
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground
const butn = theme.PrimaryBackground
```
----
### Add theme
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground
const butn = theme.PrimaryBackground
```
----
### Remove theme
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground
const butn = theme.PrimaryBackground
```
----
### Rename theme
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground
const butn = theme.PrimaryBackground
```
----
### Why does this pattern work so well?
----
### Why does this guy work so well?
----
### We do not mention the theme's name!
```ts
const theme = useTheme();
const menu = theme.PrimaryBackground;
const butn = theme.PrimaryBackground;
```
*light, dark...*
---
### We do not mention the plan's name!
```ts
const plan = usePlan();
if (plan.HasAuditLog)
return <AuditLogList />
```
*free, standard, premium...*
---
### We do not mention the environment's name!
```tsx
const environment = useEnvironment();
if (environment.HasVisibleVersion)
return <VersionTag />
```
*debug, develop, staging, production...*
---
### We do not mention the platform's name!
```tsx
const platform = usePlatform();
if (platform.SupportsAppleSSO)
await AppleSSOLogin();
else
await BoringSSOLogin();
```
*android, ios, web...*
---
### We do not mention the role's name!
```tsx
const role = useRole();
if (role.CanDeleteList(list))
return <DeleteButton />
```
*member, owner, author, admin...*
---
### We do not mention the language's name!
```tsx
const language = useLanguage();
return (<Button>{{ language.ClickMe }}</Button>);
```
*english, norwegian, chinese...*
{"metaMigratedAt":"2023-06-15T15:15:18.343Z","metaMigratedFrom":"Content","title":"Config","breaks":true,"contributors":"[{\"id\":\"af3f12bd-3c8b-41d4-9823-69e1acea4028\",\"add\":4161,\"del\":1073}]"}