diff --git a/README.md b/README.md index 979249b3f..e5794fc16 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,12 @@ Visit [SukiUI on Nuget.org](https://www.nuget.org/packages/SukiUI) Download `SukiUI-dev` in artifacts +## 📄 Documentation + +[SukiUI Documentation](https://kikipoulet.github.io/SukiUI/) *WIP* + +[Wiki](https://github.com/kikipoulet/SukiUI/wiki) + ## 📱 UI Theme ##### SukiUI contains a theme for AvaloniaUI's base controls with support for Light/Dark themes. diff --git a/docs/docs/.vitepress/config.mts b/docs/docs/.vitepress/config.mts deleted file mode 100644 index b31d45477..000000000 --- a/docs/docs/.vitepress/config.mts +++ /dev/null @@ -1,29 +0,0 @@ -import { defineConfig } from 'vitepress' - -// https://vitepress.dev/reference/site-config -export default defineConfig({ - base: '/SukiUI/', - title: "SukiUI", - description: "A VitePress Site", - themeConfig: { - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: 'Home', link: '/' }, - { text: 'Examples', link: '/markdown-examples' } - ], - - sidebar: [ - { - text: 'Examples', - items: [ - { text: 'Markdown Examples', link: '/markdown-examples' }, - { text: 'Runtime API Examples', link: '/api-examples' } - ] - } - ], - - socialLinks: [ - { icon: 'github', link: 'https://github.com/vuejs/vitepress' } - ] - } -}) diff --git a/docs/docs/.vitepress/config/en.mts b/docs/docs/.vitepress/config/en.mts new file mode 100644 index 000000000..022c00e2d --- /dev/null +++ b/docs/docs/.vitepress/config/en.mts @@ -0,0 +1,124 @@ +import { defineConfig } from 'vitepress' + +export const en = defineConfig({ + description: "A Desktop UI Library for Avalonia", + themeConfig: { + nav: [ + { text: 'Home', link: '/' }, + { text: 'Documentation', link: '/documentation' } + ], + + sidebar: [ + { + text: 'Get Started', + items: [ + { text: 'Introduction', link: '/documentation/getting-started/introduction' }, + { text: 'Installation', link: '/documentation/getting-started/installation' }, + { text: 'Launch', link: '/documentation/getting-started/launch' }, + ] + }, + { + text: 'Theming', + items: [ + { text: 'Basic', link: '/documentation/theming/basic' }, + { text: 'Light & Dark', link: '/documentation/theming/theme' }, + { text: 'Color', link: '/documentation/theming/theme-color' }, + ] + }, + { + text: 'Controls', + items: [ + { + text: 'Navigation', + items: [ + { text: 'SideMenu', link: '/documentation/controls/navigation/sidemenu' }, + ] + }, + { + text: 'Layout', + items: [ + { text: 'GlassCard', link: '/documentation/controls/layout/glasscard' }, + { text: 'TabControl', link: '/documentation/controls/layout/tabcontrol' }, + { text: 'StackPage', link: '/documentation/controls/layout/stackpage' }, + { text: 'SettingsLayout', link: '/documentation/controls/layout/settingslayout' }, + { text: 'SukiWindow', link: '/documentation/controls/layout/sukiwindow' }, + ] + }, + { + text: 'Inputs', + items: [ + { text: 'Button', link: '/documentation/controls/inputs/button' }, + { text: 'DropDownButton', link: '/documentation/controls/inputs/dropdownbutton' }, + { text: 'ToggleSwitch', link: '/documentation/controls/inputs/toggleswitch' }, + { text: 'ToggleButton', link: '/documentation/controls/inputs/togglebutton' }, + { text: 'Slider', link: '/documentation/controls/inputs/slider' }, + { text: 'ComboBox', link: '/documentation/controls/inputs/combobox' }, + { text: 'NumericUpDown', link: '/documentation/controls/inputs/numericupdown' }, + { text: 'TextBox', link: '/documentation/controls/inputs/textbox' }, + { text: 'CheckBox', link: '/documentation/controls/inputs/checkbox' }, + { text: 'RadioButton', link: '/documentation/controls/inputs/radiobutton' }, + { text: 'ContextMenu', link: '/documentation/controls/inputs/contextmenu' }, + ] + }, + { + text: 'Text', + items: [ + { text: 'AutoCompleteBox', link: '/documentation/controls/text/autocompletebox' }, + { text: 'TextBox', link: '/documentation/controls/text/textbox' }, + ] + }, + { + text: 'Date & Time', + items: [ + { text: 'Calendar', link: '/documentation/controls/datetime/calendar' }, + { text: 'DatePicker', link: '/documentation/controls/datetime/datepicker' }, + ] + }, + { + text: 'Progress', + items: [ + { text: 'WaveProgress', link: '/documentation/controls/progress/waveprogress' }, + { text: 'Stepper', link: '/documentation/controls/progress/stepper' }, + { text: 'CircleProgressBar', link: '/documentation/controls/progress/circleprogressbar' }, + { text: 'Loading', link: '/documentation/controls/progress/loading' }, + { text: 'ProgressBar', link: '/documentation/controls/progress/progressbar' }, + ] + }, + { + text: 'Data Presentation', + items: [ + { text: 'DataGrid', link: '/documentation/controls/data/datagrid' }, + { text: 'ListBox', link: '/documentation/controls/data/listbox' }, + { text: 'TreeView', link: '/documentation/controls/data/treeview' }, + { text: 'GroupBox', link: '/documentation/controls/data/groupbox' }, + { text: 'BusyArea', link: '/documentation/controls/data/busyarea' }, + { text: 'Expander', link: '/documentation/controls/data/expander' }, + ] + }, + { + text: 'System', + items: [ + { text: 'FilePicker', link: '/documentation/controls/system/filepicker' }, + ] + } + ] + }, + { + text: 'Notification', + items: [ + { text: 'Dialog', link: '/documentation/notification/dialog' }, + { text: 'Toast', link: '/documentation/notification/toast' }, + { text: 'MessageBox', link: '/documentation/notification/messagebox' }, + ] + }, + { + text: 'Style', + items: [ + { text: 'Text', link: '/documentation/style/text' }, + { text: 'Color', link: '/documentation/style/color' }, + { text: 'Icon', link: '/documentation/style/icon' }, + ] + } + ] + } +}) diff --git a/docs/docs/.vitepress/config/index.mts b/docs/docs/.vitepress/config/index.mts new file mode 100644 index 000000000..fe9f507bc --- /dev/null +++ b/docs/docs/.vitepress/config/index.mts @@ -0,0 +1,12 @@ +import { defineConfig } from 'vitepress' +import { shared } from './shared.mts' +import { en } from './en.mts' +import { zh } from './zh.mts' + +export default defineConfig({ + ...shared, + locales: { + root: { label: 'English', ...en }, + zh: { label: '简体中文', ...zh } + } +}) \ No newline at end of file diff --git a/docs/docs/.vitepress/config/shared.mts b/docs/docs/.vitepress/config/shared.mts new file mode 100644 index 000000000..5e41d9c79 --- /dev/null +++ b/docs/docs/.vitepress/config/shared.mts @@ -0,0 +1,13 @@ +import { defineConfig } from 'vitepress' + +export const shared = defineConfig({ + base: '/SukiUI/', + title: "SukiUI", + + themeConfig: { + logo: { src: '/suki.webp', width: 24, height: 24 }, + socialLinks: [ + { icon: 'github', link: 'https://github.com/kikipoulet/SukiUI' } + ] + } +}) diff --git a/docs/docs/.vitepress/config/zh.mts b/docs/docs/.vitepress/config/zh.mts new file mode 100644 index 000000000..cc2cbb120 --- /dev/null +++ b/docs/docs/.vitepress/config/zh.mts @@ -0,0 +1,124 @@ +import { defineConfig } from 'vitepress' + +export const zh = defineConfig({ + description: "一个 Avalonia 控件库", + themeConfig: { + nav: [ + { text: '主页', link: '/zh' }, + { text: '文档', link: '/zh/documentation' } + ], + + sidebar: [ + { + text: '开始', + items: [ + { text: '介绍', link: '/zh/documentation/getting-started/introduction' }, + { text: '安装', link: '/zh/documentation/getting-started/installation' }, + { text: '启动应用', link: '/zh/documentation/getting-started/launch' }, + ] + }, + { + text: '主题', + items: [ + { text: '主题实例', link: '/zh/documentation/theming/basic' }, + { text: '明暗主题切换', link: '/zh/documentation/theming/theme' }, + { text: '主题色', link: '/zh/documentation/theming/theme-color' }, + ] + }, + { + text: '控件', + items: [ + { + text: 'Navigation', + items: [ + { text: 'SideMenu', link: '/zh/documentation/controls/navigation/sidemenu' }, + ] + }, + { + text: 'Layout', + items: [ + { text: 'GlassCard', link: '/zh/documentation/controls/layout/glasscard' }, + { text: 'TabControl', link: '/zh/documentation/controls/layout/tabcontrol' }, + { text: 'StackPage', link: '/zh/documentation/controls/layout/stackpage' }, + { text: 'SettingsLayout', link: '/zh/documentation/controls/layout/settingslayout' }, + { text: 'SukiWindow', link: '/zh/documentation/controls/layout/sukiwindow' }, + ] + }, + { + text: 'Inputs', + items: [ + { text: 'Button', link: '/zh/documentation/controls/inputs/button' }, + { text: 'DropDownButton', link: '/zh/documentation/controls/inputs/dropdownbutton' }, + { text: 'ToggleSwitch', link: '/zh/documentation/controls/inputs/toggleswitch' }, + { text: 'ToggleButton', link: '/zh/documentation/controls/inputs/togglebutton' }, + { text: 'Slider', link: '/zh/documentation/controls/inputs/slider' }, + { text: 'ComboBox', link: '/zh/documentation/controls/inputs/combobox' }, + { text: 'NumericUpDown', link: '/zh/documentation/controls/inputs/numericupdown' }, + { text: 'TextBox', link: '/zh/documentation/controls/inputs/textbox' }, + { text: 'CheckBox', link: '/zh/documentation/controls/inputs/checkbox' }, + { text: 'RadioButton', link: '/zh/documentation/controls/inputs/radiobutton' }, + { text: 'ContextMenu', link: '/zh/documentation/controls/inputs/contextmenu' }, + ] + }, + { + text: 'Text', + items: [ + { text: 'AutoCompleteBox', link: '/zh/documentation/controls/text/autocompletebox' }, + { text: 'TextBox', link: '/zh/documentation/controls/text/textbox' }, + ] + }, + { + text: 'Date & Time', + items: [ + { text: 'Calendar', link: '/zh/documentation/controls/datetime/calendar' }, + { text: 'DatePicker', link: '/zh/documentation/controls/datetime/datepicker' }, + ] + }, + { + text: 'Progress', + items: [ + { text: 'WaveProgress', link: '/zh/documentation/controls/progress/waveprogress' }, + { text: 'Stepper', link: '/zh/documentation/controls/progress/stepper' }, + { text: 'CircleProgressBar', link: '/zh/documentation/controls/progress/circleprogressbar' }, + { text: 'Loading', link: '/zh/documentation/controls/progress/loading' }, + { text: 'ProgressBar', link: '/zh/documentation/controls/progress/progressbar' }, + ] + }, + { + text: 'Data Presentation', + items: [ + { text: 'DataGrid', link: '/zh/documentation/controls/data/datagrid' }, + { text: 'ListBox', link: '/zh/documentation/controls/data/listbox' }, + { text: 'TreeView', link: '/zh/documentation/controls/data/treeview' }, + { text: 'GroupBox', link: '/zh/documentation/controls/data/groupbox' }, + { text: 'BusyArea', link: '/zh/documentation/controls/data/busyarea' }, + { text: 'Expander', link: '/zh/documentation/controls/data/expander' }, + ] + }, + { + text: 'System', + items: [ + { text: 'FilePicker', link: '/zh/documentation/controls/system/filepicker' }, + ] + } + ] + }, + { + text: '通知', + items: [ + { text: 'Dialog', link: '/zh/documentation/notification/dialog' }, + { text: 'Toast', link: '/zh/documentation/notification/toast' }, + { text: 'MessageBox', link: '/zh/documentation/notification/messagebox' }, + ] + }, + { + text: '样式', + items: [ + { text: 'Text', link: '/zh/documentation/style/text' }, + { text: 'Color', link: '/zh/documentation/style/color' }, + { text: 'Icon', link: '/zh/documentation/style/icon' }, + ] + } + ] + } +}) diff --git a/docs/docs/documentation/controls/data/busyarea.md b/docs/docs/documentation/controls/data/busyarea.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/data/datagrid.md b/docs/docs/documentation/controls/data/datagrid.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/data/expander.md b/docs/docs/documentation/controls/data/expander.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/data/groupbox.md b/docs/docs/documentation/controls/data/groupbox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/data/listbox.md b/docs/docs/documentation/controls/data/listbox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/data/treeview.md b/docs/docs/documentation/controls/data/treeview.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/datetime/calendar.md b/docs/docs/documentation/controls/datetime/calendar.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/datetime/datepicker.md b/docs/docs/documentation/controls/datetime/datepicker.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/button.md b/docs/docs/documentation/controls/inputs/button.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/checkbox.md b/docs/docs/documentation/controls/inputs/checkbox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/combobox.md b/docs/docs/documentation/controls/inputs/combobox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/contextmenu.md b/docs/docs/documentation/controls/inputs/contextmenu.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/dropdownbutton.md b/docs/docs/documentation/controls/inputs/dropdownbutton.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/numericupdown.md b/docs/docs/documentation/controls/inputs/numericupdown.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/radiobutton.md b/docs/docs/documentation/controls/inputs/radiobutton.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/slider.md b/docs/docs/documentation/controls/inputs/slider.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/textbox.md b/docs/docs/documentation/controls/inputs/textbox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/togglebutton.md b/docs/docs/documentation/controls/inputs/togglebutton.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/inputs/toggleswitch.md b/docs/docs/documentation/controls/inputs/toggleswitch.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/layout/settingslayout.md b/docs/docs/documentation/controls/layout/settingslayout.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/layout/stackpage.md b/docs/docs/documentation/controls/layout/stackpage.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/layout/sukiwindow.md b/docs/docs/documentation/controls/layout/sukiwindow.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/layout/tabcontrol.md b/docs/docs/documentation/controls/layout/tabcontrol.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/navigation/sidemenu.md b/docs/docs/documentation/controls/navigation/sidemenu.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/progress/circleprogressbar.md b/docs/docs/documentation/controls/progress/circleprogressbar.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/progress/loading.md b/docs/docs/documentation/controls/progress/loading.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/progress/progressbar.md b/docs/docs/documentation/controls/progress/progressbar.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/progress/stepper.md b/docs/docs/documentation/controls/progress/stepper.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/progress/waveprogress.md b/docs/docs/documentation/controls/progress/waveprogress.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/system/filepicker.md b/docs/docs/documentation/controls/system/filepicker.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/text/autocompletebox.md b/docs/docs/documentation/controls/text/autocompletebox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/controls/text/textbox.md b/docs/docs/documentation/controls/text/textbox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/getting-started/installation.md b/docs/docs/documentation/getting-started/installation.md new file mode 100644 index 000000000..857e1aae2 --- /dev/null +++ b/docs/docs/documentation/getting-started/installation.md @@ -0,0 +1,55 @@ +# Installation + +::: info +When this page was written, the latest Avalonia version was `11.1.0-beta2` with SukiUI version `6.0.0-beta6` +::: + +SukiUI can be installed in two ways: +- [Nuget](https://www.nuget.org/packages/SukiUI) **Recommended** +- CI Artifacts from [Github Action](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml) + +## Prepare your application + +The following picture shows packages already installed with the default `Avalonia Template`: + +![](/getting-started/introduction-default-package-list.webp "default package list") + +In these packages, `Avalonia.Themes.Fluent` will no longer be necessary and can be removed. + +::: tip +About `Avalonia Template`: [Set up an editor](https://docs.avaloniaui.net/docs/get-started/set-up-an-editor) +::: + +## Install latest SukiUI package + +The Nuget installation is suitable for most users, but if you want to use the latest build, you can download the dll from Github Action after the automatic build. + +### Via Nuget + +``` +dotnet add package SukiUI --version 6.0.0 +``` + +::: tip +Visit [SukiUI on Nuget](https://www.nuget.org/packages/SukiUI) for more information +::: + +### Via Github Action + +1. Visit [SukiUI CI](https://github.com/kikipoulet/SukiUI/actions/workflows/build.yml) +2. Select the latest workflow +![](/getting-started/introduction-workflow.webp "workflow") + +3. Download the artifact +![](/getting-started/introduction-artifact.webp "artifact") + +4. Add reference +![](/getting-started/introduction-reference.webp "reference") + +5. Select `SukiUI.dll` you downloaded + +::: tip +The package list should be: + +![](/getting-started/introduction-final-package-list.webp "package list") +::: \ No newline at end of file diff --git a/docs/docs/documentation/getting-started/introduction.md b/docs/docs/documentation/getting-started/introduction.md new file mode 100644 index 000000000..b1d8ec842 --- /dev/null +++ b/docs/docs/documentation/getting-started/introduction.md @@ -0,0 +1,21 @@ +# Introduction + +**SukiUI** makes your Avalonia applications more modern. The library offers a large number of animated controls and theme switches. + +
+ + + +Nuget Pre +
+ +![dashboard](/getting-started/introduction-dashboard.webp) + +## Gallery + +Go to Microsoft Store to get the Gallary app + + + Download SukiUI Controls Gallery + \ No newline at end of file diff --git a/docs/docs/documentation/getting-started/launch.md b/docs/docs/documentation/getting-started/launch.md new file mode 100644 index 000000000..f74229ca7 --- /dev/null +++ b/docs/docs/documentation/getting-started/launch.md @@ -0,0 +1,82 @@ +# Launch + +## Modify your App.axaml + +Include SukiUI styles in your `App.axaml` + +```xml + + + // [!code highlight] + + +``` + +## Use SukiWindow as MainWindow + +Change MainWindow from Window class to SukiWindow class. + +Original `MainWindow.axaml`: + +```xml + + +``` + +Modified `MainWindow.axaml`: + +```xml + + // [!code highlight] +``` + +Original `MainWindow.axaml.cs`: + +```csharp +using Avalonia.Controls; + +namespace SukiTest; + +public partial class MainWindow : Window +{ + public MainWindow() + { + InitializeComponent(); + } +} +``` + +Modified `MainWindow.axaml.cs`: + + +```csharp +using SukiUI.Controls; // [!code highlight] + +namespace SukiTest; + +public partial class MainWindow : SukiWindow // [!code highlight] +{ + public MainWindow() + { + InitializeComponent(); + } +} +``` + +## Done + +You're now ready to use SukiUI ! \ No newline at end of file diff --git a/docs/docs/documentation/index.md b/docs/docs/documentation/index.md new file mode 100644 index 000000000..00bcb6e37 --- /dev/null +++ b/docs/docs/documentation/index.md @@ -0,0 +1 @@ +# test \ No newline at end of file diff --git a/docs/docs/documentation/notification/dialog.md b/docs/docs/documentation/notification/dialog.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/notification/messagebox.md b/docs/docs/documentation/notification/messagebox.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/notification/toast.md b/docs/docs/documentation/notification/toast.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/style/color.md b/docs/docs/documentation/style/color.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/style/icon.md b/docs/docs/documentation/style/icon.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/style/text.md b/docs/docs/documentation/style/text.md new file mode 100644 index 000000000..e69de29bb diff --git a/docs/docs/documentation/theming/basic.md b/docs/docs/documentation/theming/basic.md new file mode 100644 index 000000000..fd956ccd4 --- /dev/null +++ b/docs/docs/documentation/theming/basic.md @@ -0,0 +1,9 @@ +# Basic + +SukiUI provide a `SukiTheme` class that permits to easily manipulate the theming of your app easily. + +Get the SukiTheme Instance: + +```csharp +SukiTheme theme = SukiTheme.GetInstance(); +``` \ No newline at end of file diff --git a/docs/docs/documentation/theming/theme-color.md b/docs/docs/documentation/theming/theme-color.md new file mode 100644 index 000000000..e5be9a79d --- /dev/null +++ b/docs/docs/documentation/theming/theme-color.md @@ -0,0 +1,34 @@ +# Color + +`SukiTheme` allows app to switch color themes easily + +theming-color + +## Switch between available Color Theme + +```csharp +SukiTheme.GetInstance().SwitchColorTheme(); +``` + +## Switch to a specific Color Theme + +```csharp +SukiTheme.GetInstance().ChangeColorTheme(SukiColor.Red); +``` + +## Create a Custom Color Theme, register it and switch to it + +```csharp +var PurpleTheme = new SukiColorTheme("Purple", Colors.Purple, Colors.DarkBlue); +SukiTheme.GetInstance().AddColorTheme(PurpleTheme); +SukiTheme.GetInstance().ChangeColorTheme(PurpleTheme); +``` + +## ColorChanged Event + +```csharp +SukiTheme.GetInstance().OnColorThemeChanged += theme => +{ + Console.WriteLine("Color theme change triggered !"); +}; +``` \ No newline at end of file diff --git a/docs/docs/documentation/theming/theme.md b/docs/docs/documentation/theming/theme.md new file mode 100644 index 000000000..23e670670 --- /dev/null +++ b/docs/docs/documentation/theming/theme.md @@ -0,0 +1,34 @@ +# Light & Dark + +SukiUI use the [Theme Variant](https://docs.avaloniaui.net/docs/guides/styles-and-resources/how-to-use-theme-variants) system provided by `AvaloniaUI`. + +However, the SukiTheme class provide an easiest wrapper to change Light/Dark theme. + +theming-theme + +## Switch to Dark Theme + +```csharp +SukiTheme.GetInstance().ChangeBaseTheme(ThemeVariant.Dark); +``` + +## Switch to Light Theme + +```csharp +SukiTheme.GetInstance().ChangeBaseTheme(ThemeVariant.Light); +``` + +## Switch between Light/Dark Theme + +```csharp +SukiTheme.GetInstance().SwitchBaseTheme(); +``` + +## ThemeChanged Event + +```csharp +SukiTheme.GetInstance().OnBaseThemeChanged += variant => +{ + Console.WriteLine("Theme changed triggered !"); +}; +``` \ No newline at end of file diff --git a/docs/docs/index.md b/docs/docs/index.md index 2c56e574c..3101edd9f 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -1,5 +1,4 @@ --- -# https://vitepress.dev/reference/default-theme-home-page layout: home hero: @@ -8,28 +7,28 @@ hero: tagline: Modern, Simple, Animated actions: - theme: brand - text: Get Started - link: /markdown-examples + text: 🚀 Get Started + link: /documentation/getting-started/introduction - theme: alt - text: Documentation - link: /api-examples + text: 📄 Documentation + link: /documentation image: - src: https://raw.githubusercontent.com/kikipoulet/SukiUI/main/Images/OIG.N5o-removebg-preview.png + src: ./suki.webp alt: SukiUILogo features: - - title: Feature A - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature B - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature C - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + - title: 🔧 Flexible Theme Customization + details: Support seamless switching themes and colors to align with your app's identity. + - title: 🎞️ Rich Animation + details: Captivate users with dynamic, fluid animations that make interactions delightful. + - title: 🖥️ Desktop Cross-platform + details: Based on AvaloniaUI, achieve broad compatibility with consistent performance on Windows, macOS, and Linux. --- \ No newline at end of file