Skip to content

Commit e340271

Browse files
jd-solankijd-solanki
committed
feat(theme): add new colors, useAnu composable, Theming improvements
1 parent f70d632 commit e340271

File tree

26 files changed

+450
-149
lines changed

26 files changed

+450
-149
lines changed

‎docs/.vitepress/config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export default defineConfig({
8888
items: [
8989
// { text: 'useSearch', link: '/guide/composables/useSearch' },
9090
// { text: 'useSort', link: '/guide/composables/useSort' },
91+
{ text: 'useAnu', link: '/guide/composables/useAnu' },
9192
{ text: 'useGroupModel', link: '/guide/composables/useGroupModel' },
9293
],
9394
},
@@ -119,6 +120,8 @@ export default defineConfig({
119120
},
120121
},
121122
markdown: {
123+
// ℹ️ We only enabled this in development so that we can highlight code lines by seeing line number without calculating it in our editor.
124+
lineNumbers: process.env.NODE_ENV === 'development',
122125
theme: 'dracula',
123126
config: md => {
124127
md.use(Container, 'card', {

‎docs/.vitepress/theme/index.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import './style.css'
1111
export default {
1212
...DefaultTheme,
1313
enhanceApp({ app }) {
14-
app.use(anu, {
15-
registerComponents: true,
16-
})
14+
app.use(anu)
1715

1816
// Register demos as components
1917
const demos = import.meta.globEager('../../components/demos/**/*.vue')

‎docs/components/demos/chip/DemoChipClosable.vue

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
11
<script setup lang="ts">
2+
import { defaultThemeColors } from 'anu-vue'
23
import { computed, ref } from 'vue'
34
4-
const chips = ref([
5-
{ title: 'Primary', color: 'primary', isOpen: true },
6-
{ title: 'Success', color: 'success', isOpen: true },
7-
{ title: 'Info', color: 'info', isOpen: true },
8-
{ title: 'Warning', color: 'warning', isOpen: true },
9-
{ title: 'Danger', color: 'danger', isOpen: true },
10-
])
5+
const chips = ref(defaultThemeColors.map(c => ({
6+
color: c,
7+
isClosed: false,
8+
})))
119
12-
const allChipsClosed = computed(() => chips.value.every(chip => !chip.isOpen))
13-
const reset = () => chips.value.forEach(chip => chip.isOpen = true)
10+
const allChipsClosed = computed(() => chips.value.every(chip => !chip.isClosed))
11+
const reset = () => chips.value.forEach(chip => chip.isClosed = true)
1412
</script>
1513

1614
<template>
1715
<div class="flex flex-wrap gap-2">
1816
<AChip
1917
v-for="chip in chips"
20-
:key="chip.title"
21-
v-model="chip.isOpen"
18+
:key="chip.color"
19+
v-model="chip.isClosed"
2220
:color="chip.color"
2321
closable
22+
class="capitalize"
2423
>
25-
{{ chip.title }}
24+
{{ chip.color }}
2625
</AChip>
2726

2827
<div class="w-full">

‎docs/components/demos/radio/DemoRadioColor.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script lang="ts" setup>
2+
import { defaultThemeColors } from 'anu-vue'
23
import { ref } from 'vue'
34
45
const favoriteFruit = ref()
5-
const colors = ['primary', 'success', 'info', 'warning', 'danger']
66
</script>
77

88
<template>
99
<div class="flex flex-col gap-y-3 mt-6">
1010
<ARadio
11-
v-for="color in colors"
11+
v-for="color in defaultThemeColors"
1212
:key="color"
1313
v-model="favoriteFruit"
1414
name="radio-color"

‎docs/guide/composables/useAnu.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# useAnu
2+
3+
`useAnu` composable provides API for interactive with Anu.
4+
5+
## Basic
6+
7+
`useAnu` provides following reactive variables:
8+
9+
- `themes: ConfigThemes` => Registered themes. You can modify colors & CSS variables at runtime 😍
10+
- `activeThemeName: string` => Name of the active theme in your app
11+
- `activeTheme: ({ name: string, theme: ThemeOptions })` => Convenient computed property to get details of active theme. Don't modify it 🙅🏻‍♂️
12+
13+
```ts
14+
import { useAnu } from 'anu-vue';
15+
16+
const { themes, activeThemeName, activeTheme } = useAnu()
17+
```
18+
19+
## Changing Active Theme
20+
21+
You can change the active theme at runtime by modifying the `activeThemeName` ref.
22+
23+
```ts{5}
24+
import { useAnu } from 'anu-vue';
25+
26+
const { activeThemeName } = useAnu()
27+
28+
activeThemeName.value = 'dark'
29+
```
30+
31+
## Active Theme Details
32+
33+
Use `activeTheme` computed property to get the details of active theme.
34+
35+
```ts{6-7}
36+
import { computed } from 'vue';
37+
import { useAnu } from 'anu-vue';
38+
39+
const { activeTheme } = useAnu()
40+
41+
const activeThemeName = computed(() => activeTheme.value.name)
42+
const primaryColor = computed(() => activeTheme.value.theme.colors.primary)
43+
```
44+
45+
:::warning
46+
Modifying `activeTheme` computed property won't do anything so never mutate this computed property.
47+
:::
48+
49+
## Modifying Themes
50+
51+
You can modify any theme at runtime via `theme` ref.
52+
53+
```ts{8,12}
54+
import { useAnu } from 'anu-vue';
55+
56+
const { themes } = useAnu()
57+
58+
// Change primary color for all themes
59+
for (const themeName in themes.value) {
60+
const theme = themes.value[themeName]
61+
theme.colors.primary = '235, 97.7%, 66.3%'
62+
}
63+
64+
// Or you can also change the primary color for single theme
65+
themes.value.light.colors.primary = '235, 97.7%, 66.3%'
66+
```
67+
68+
<br>
69+
70+
---
71+
72+
<br>
73+
74+
Related documentation:
75+
76+
- [Theme](/guide/features/theme.md)
77+
- [Colors](/guide/getting-started/customization.html#color)

‎docs/guide/features/theme.md

Lines changed: 99 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,125 @@
22

33
Anu officially supports light & dark theme. Anu also allows users to customize the appearance of their application by providing a custom theme or modifying the existing.
44

5-
This is achieved through the use of CSS variables, which can be defined and modified at runtime. This means that users can change the theme of their application on the fly. This allows for a more flexible and dynamic user experience, as users can tailor the appearance of their application to their personal preferences or to match the branding of their organization.
5+
This is achieved through the use of CSS variables, which can be defined and modified at runtime (via `useAnu` composable). This means that users can change the theme of their application on the fly. This allows for a more flexible and dynamic user experience, as users can tailor the appearance of their application to their personal preferences or to match the branding of their organization.
66

7-
Light theme is enabled by default. If you want to switch to dark mode just apply `.dark` class to root `html` element.
7+
Light theme is enabled by default. If you want to switch to dark mode use `initialTheme` option while registering anu.
88

9-
```html
10-
<html class="dark">
11-
<!-- ... -->
12-
</html>
13-
```
9+
```ts{9-11}
10+
import { createApp } from 'vue'
11+
import App from './App.vue'
12+
import { anu } from 'anu-vue'
1413
15-
You can check list of available CSS variables in [preset-theme-default](https://github.com/jd-solanki/anu/blob/main/packages/preset-theme-default/src/scss/index.scss).
14+
// other stuff
1615
17-
## How to customize the theme?
16+
const app = createApp(App)
17+
18+
app.use(anu, {
19+
initialTheme: 'dark',
20+
})
21+
```
1822

19-
To customize any of the existing theme, light or dark, you just have to override the CSS variable.
23+
## How to customize the theme?
2024

21-
Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) format and override the `--a-primary` root CSS variable in your stylesheet.
25+
To customize any of the existing theme, light or dark, you just have to override the theme option.
2226

23-
```vue{6}
24-
<!-- App.vue -->
25-
<template>
26-
<ABtn>Button</ABtn>
27-
</template>
27+
Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) format and override the `primary` color via anu options.
2828

29-
<style>
30-
:root {
31-
--a-primary: 235, 97.7%, 66.3%;
32-
}
33-
</style>
29+
```ts{5}
30+
app.use(anu, {
31+
themes: {
32+
light: {
33+
colors: {
34+
primary: '235, 98%, 66%',
35+
},
36+
},
37+
},
38+
})
3439
```
3540

3641
Done 🥳
3742

38-
If you want to change the CSS variant in the dark theme, just update the selector:
39-
40-
```diff
41-
- :root
42-
+ :root.dark
43-
```
43+
Do note that, this will only update the primary color for light theme.
4444

4545
## How to create custom theme?
4646

47-
Creating a custom theme is as easy as defining new values for the existing CSS variables.
47+
Creating a custom theme is as easy as defining new values for the existing theme colors.
4848

4949
Create a new CSS selector for `:root` with the theme name (assuming `coffee`) and write down the CSS variables with the desired values:
5050

51-
```css
52-
:root.coffee {
53-
---a-primary: 27, 39%, 77%,
54-
/* other CSS variables */
55-
}
51+
```ts{5}
52+
app.use(anu, {
53+
themes: {
54+
class: 'a-theme-coffee',
55+
coffee: {
56+
colors: {
57+
primary: '27, 39%, 77%',
58+
// other theme colors
59+
},
60+
},
61+
},
62+
})
5663
```
5764

5865
Now just add class `coffee` to the html element: `html.coffee`.
5966

6067
Don't forget to include the CSS file in your entrypoint 😜
68+
69+
## How to add new color?
70+
71+
Anu provides **primary**, **success**, **info**, **warning** & **danger** colors by default.
72+
73+
Additionally, you can also add new colors to the palette. Add new color to the palette via theme option:
74+
75+
```ts{5,10}
76+
app.use(anu, {
77+
themes: {
78+
light: {
79+
colors: {
80+
secondary: '0, 0%, 50%',
81+
},
82+
},
83+
dark: {
84+
colors: {
85+
secondary: '0, 0%, 25%',
86+
},
87+
},
88+
},
89+
})
90+
```
91+
92+
Passing options to anu config will merge them and will result in new color **secondary** added to existing theme palette.
93+
94+
Additionally, You also have to add this new color in Anu's UnoCSS preset.
95+
96+
> _Working on omitting this preset step. Guide WIP._
97+
98+
Finally let's use new color 😍
99+
100+
```vue
101+
<template>
102+
<ABtn color="secondary">Secondary</ABtn>
103+
</template>
104+
```
105+
106+
<br>
107+
108+
---
109+
110+
<br>
111+
112+
:::tip Default Colors
113+
You can get array of default colors provide by anu from `defaultThemeColors` export.
114+
115+
```ts
116+
import { defaultThemeColors } from 'anu-vue'
117+
```
118+
119+
:::
120+
121+
<br>
122+
123+
Related documentation:
124+
125+
- [`useAnu` composable](/guide/composables/useAnu.md)
126+
- [Colors](/guide/getting-started/customization.html#color)

‎docs/guide/getting-started/customization.md

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
<script setup lang="ts">
22
import { useCssVar } from '@vueuse/core';
3+
import { useAnu } from 'anu-vue';
34
import { computed } from 'vue';
45

5-
const primaryColor = useCssVar('--a-primary')
6+
const { activeTheme, themes } = useAnu()
67
const vpBrandHue = useCssVar('--vp-brand-hue')
7-
const isPrimaryChanged = computed(() => primaryColor.value.startsWith('235'))
8+
const isPrimaryChanged = computed(() => activeTheme.value.theme?.colors.primary?.startsWith('235'))
89

910
const updatePrimaryColor = () => {
10-
// To update the look & feel of whole template, update VitePress primary color as well
11-
vpBrandHue.value = isPrimaryChanged.value ? '265' : '235'
11+
const primaryColor = activeTheme.value.theme.colors.primary
12+
const primaryHue = isPrimaryChanged.value ? '265' : '235'
1213

13-
primaryColor.value = `${isPrimaryChanged.value ? '265' : '235'}, 97.7%, 66.3%`
14+
// To update the look & feel of whole template, update VitePress primary color as well
15+
vpBrandHue.value = primaryHue
16+
17+
// ℹ️ Change primary color for all themes. You can also just change the primary color of current/active theme 😇
18+
for (const themeName in themes.value) {
19+
const theme = themes.value[themeName]
20+
theme.colors.primary = `${primaryHue}, 97.7%, 66.3%`
21+
}
1422
}
1523
</script>
1624

1725
# Customization
1826

1927
## Color
2028

21-
Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define colors. You can configure theme colors via [CSS variables(custom properties)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
29+
Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define and use colors. You can update theme colors via [themes](/guide/features/theme.md) configurations.
2230

23-
To customize theme color, set a CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is the list of colors you can configure.
31+
Below is the list of default colors. You can also [add new colors](/guide/features/theme.html#how-to-add-new-color) to the palette.
2432

2533
<div class="flex gap-6 flex-wrap">
2634
<ACard variant="fill" color="primary" class="rounded-2xl shadow-2xl shadow-primary shadow-opacity-40 w-26 h-26 font-semibold grid place-items-center">Primary</ACard>
@@ -32,9 +40,16 @@ To customize theme color, set a CSS variable in your CSS with color name prefixe
3240

3341
<ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsl(265,97.7%,66.3%)]' : 'bg-[hsl(235,97.7%,66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>
3442

43+
<br />
44+
<br />
45+
46+
Also checkout related documentation:
47+
48+
- [`useAnu` composable](/guide/composables/useAnu.md)
49+
3550
## CSS variables
3651

37-
Besides colors, Anu uses CSS variables for other stuff for providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
52+
For the most part, Anu uses CSS variables for other stuff to providing maximum flexibility and customization on the fly. All anu's CSS variables are prefixed with `a-`.
3853
3954
:::details View all CSS vars
4055
Below is CSS vars defined for preset theme default's light theme:
@@ -69,7 +84,7 @@ Just change the colors to Bootstrap's color and see the magic 😍
6984
![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
7085
:::
7186

72-
You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/anu-vue/src/presets/theme-default/index.ts) file.
87+
You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/preset-theme-default/src/shortcuts.ts) file.
7388

7489
If you like this simple customization don't forget to give a **star on Github**. If you don't like it give a triple star 😉.
7590

0 commit comments

Comments
 (0)