mirror of https://github.com/abpframework/abp.git
Salih
3 years ago
245 changed files with 2408 additions and 4479 deletions
@ -0,0 +1,125 @@ |
|||||
|
# Adding Dark Mode Support to the Basic Theme |
||||
|
Basic Theme uses plain bootstrap and does not have any custom colors & styles. This article will show you how to add dark mode support to the [Basic Theme](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Basic-Theme). |
||||
|
|
||||
|
Bootstrap brings the [Color Modes](https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode) feature with version **5.3**. This feature allows you to add dark mode support to your website with a single line of code. Adding the `data-bs-theme="dark"` attribute changes the color mode of the element to dark mode. |
||||
|
|
||||
|
## Instructions |
||||
|
|
||||
|
1. Create a new project with the following command: |
||||
|
```bash |
||||
|
abp new BasicThemeDarkMode -t app --theme basic |
||||
|
``` |
||||
|
|
||||
|
2. Create a component that toggles the color mode. |
||||
|
|
||||
|
- Create a new file named `Components/ChangeTheme/Default.cshtml`: |
||||
|
```html |
||||
|
<div class="text-light mt-1"> |
||||
|
<button class="btn text-light" href="#" id="ToolbarChangeTheme"> |
||||
|
<i class="fas fa-sun"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
- Create a new file named `Components/ChangeTheme/ChangeThemeViewComponent.cs`: |
||||
|
```csharp |
||||
|
using Microsoft.AspNetCore.Mvc; |
||||
|
using Volo.Abp.AspNetCore.Mvc; |
||||
|
|
||||
|
namespace BasicThemeDarkMode.Web.Components.ChangeTheme; |
||||
|
|
||||
|
[Widget(ScriptFiles = new[]{"/Components/ChangeTheme/ChangeTheme.js"})] |
||||
|
public class ChangeThemeViewComponent : AbpViewComponent |
||||
|
{ |
||||
|
public IViewComponentResult Invoke() |
||||
|
{ |
||||
|
return View("~/Components/ChangeTheme/Default.cshtml"); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- Create a JavaScript that manages the last selected theme and toggles the color mode. It stores the last selected theme in the *local storage*. So, you don't need to store it in the database. |
||||
|
|
||||
|
- Create a new file named `Components/ChangeTheme/ChangeTheme.js`: |
||||
|
```js |
||||
|
$(function () { |
||||
|
function changeTheme(theme) { |
||||
|
window.localStorage.setItem('theme', theme); |
||||
|
document.getElementsByTagName('body')[0].setAttribute('data-bs-theme', theme); |
||||
|
} |
||||
|
|
||||
|
function toggleTheme(){ |
||||
|
getTheme() == 'light' ? changeTheme('dark') : changeTheme('light'); |
||||
|
} |
||||
|
|
||||
|
function getTheme(){ |
||||
|
return window.localStorage.getItem('theme') ?? 'dark'; |
||||
|
} |
||||
|
|
||||
|
function init(){ |
||||
|
let theme = getTheme(); |
||||
|
if(theme){ |
||||
|
changeTheme(theme); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
document.getElementById('ToolbarChangeTheme').addEventListener('click', () => { |
||||
|
toggleTheme(); |
||||
|
}); |
||||
|
|
||||
|
init(); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
3. Create a new [Toolbar Contributor](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Toolbars) and add a newly created view component to the application toolbar. |
||||
|
|
||||
|
- Create a new class named `BasicThemeDarkModeToolbarContributor.cs`: |
||||
|
```csharp |
||||
|
using BasicThemeDarkMode.Web.Components.ChangeTheme; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Toolbars; |
||||
|
|
||||
|
namespace BasicThemeDarkMode.Web; |
||||
|
|
||||
|
public class BasicThemeDarkModeToolbarContributor : IToolbarContributor |
||||
|
{ |
||||
|
public Task ConfigureToolbarAsync(IToolbarConfigurationContext context) |
||||
|
{ |
||||
|
if (context.Toolbar.Name == StandardToolbars.Main) |
||||
|
{ |
||||
|
context.Toolbar.Items |
||||
|
.Add(new ToolbarItem(typeof(ChangeThemeViewComponent))); |
||||
|
} |
||||
|
|
||||
|
return Task.CompletedTask; |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
- Configure [Toolbar Options](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Toolbars) and add a newly created contributor: |
||||
|
```csharp |
||||
|
Configure<AbpToolbarOptions>(options => |
||||
|
{ |
||||
|
options.Contributors.Add(new BasicThemeDarkModeToolbarContributor()); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
That's it! Now, you can toggle the color mode by clicking the sun icon in the toolbar: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
- Users Page in Dark Mode: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
- Settings Page in Dark Mode: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
- Login Page in Dark Mode: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## Conclusion |
||||
|
|
||||
|
The theme is stored in **local storage** and it's initialized on the client-side. You can use **Cookies** to render the page in the last selected theme on **server-side** to prevent the flash effect while navigating pages. This document shows the concept of adding dark mode support of bootstrap to the Basic Theme. |
||||
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 189 KiB |
@ -0,0 +1,80 @@ |
|||||
|
# Caps Lock Directive |
||||
|
|
||||
|
In password inputs, You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. |
||||
|
|
||||
|
|
||||
|
## Getting Started |
||||
|
|
||||
|
`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component: |
||||
|
|
||||
|
**Importing to NgModule** |
||||
|
```ts |
||||
|
import { TrackCapsLockDirective } from '@abp/ng.core'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
//... |
||||
|
declarations: [ |
||||
|
..., |
||||
|
TestComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
..., |
||||
|
TrackCapsLockDirective |
||||
|
], |
||||
|
}) |
||||
|
export class MyFeatureModule {} |
||||
|
``` |
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user. |
||||
|
|
||||
|
See an example usage: |
||||
|
|
||||
|
**NgModule Component usage** |
||||
|
```ts |
||||
|
@Component({ |
||||
|
selector: 'test-component', |
||||
|
template: ` |
||||
|
<div class="d-flex flex-column"> |
||||
|
<label>Password</label> |
||||
|
<input (abpCapsLock)="capsLock = $event"/> |
||||
|
<i *ngIf="capsLock">icon</i> |
||||
|
</div> |
||||
|
` |
||||
|
}) |
||||
|
export class TestComponent{ |
||||
|
capsLock = false; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Standalone Component usage** |
||||
|
```ts |
||||
|
import { TrackCapsLockDirective } from '@abp/ng.core' |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'standalone-component', |
||||
|
standalone: true, |
||||
|
template: ` |
||||
|
<div class="d-flex flex-column"> |
||||
|
<label>Password</label> |
||||
|
<input (abpCapsLock)="capsLock = $event"/> |
||||
|
<i *ngIf="capsLock">icon</i> |
||||
|
</div> |
||||
|
`, |
||||
|
imports: [TrackCapsLockDirective] |
||||
|
}) |
||||
|
export class StandaloneComponent{ |
||||
|
capsLock = false; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
The `abpCapsLock` event has been added to the `<input>` element. Press Caps Lock to activate the `TrackCapsLockDirective`. |
||||
|
|
||||
|
See the result: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
To see Caps Lock icon press Caps Lock. |
||||
|
|
||||
|
 |
||||
@ -0,0 +1,77 @@ |
|||||
|
# Show Password Directive |
||||
|
|
||||
|
In password input, text can be shown easily via changing input type attribute to `text`. To make this even easier, you can use the `ShowPasswordDirective` which has been exposed by the `@abp/ng.core` package. |
||||
|
|
||||
|
|
||||
|
## Getting Started |
||||
|
`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component: |
||||
|
|
||||
|
**Importing to NgModule** |
||||
|
```ts |
||||
|
import { ShowPasswordDirective } from '@abp/ng.core'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
//... |
||||
|
declarations: [ |
||||
|
..., |
||||
|
TestComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
..., |
||||
|
ShowPasswordDirective |
||||
|
], |
||||
|
}) |
||||
|
export class MyFeatureModule {} |
||||
|
``` |
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
The `ShowPasswordDirective` is very easy to use. The directive's selector is **`abpShowPassword`**. By adding the `abpShowPassword` attribute to an input element, you can activate the `ShowPasswordDirective` for the input element. |
||||
|
|
||||
|
See an example usage: |
||||
|
|
||||
|
**NgModule Component usage** |
||||
|
```ts |
||||
|
@Component({ |
||||
|
selector: 'test-component', |
||||
|
template: ` |
||||
|
<div class="d-flex flex-column"> |
||||
|
<label>Password</label> |
||||
|
<input [abpShowPassword]="showPassword"/> |
||||
|
<i (click)="showPassword = !showPassword">icon</i> |
||||
|
</div> |
||||
|
` |
||||
|
}) |
||||
|
export class TestComponent{ |
||||
|
showPassword = false; |
||||
|
} |
||||
|
``` |
||||
|
**Standalone Component usage** |
||||
|
```ts |
||||
|
import { ShowPasswordDirective } from '@abp/ng.core'; |
||||
|
@Component({ |
||||
|
selector: 'standalone-component', |
||||
|
standalone: true, |
||||
|
template: ` |
||||
|
<div class="d-flex flex-column"> |
||||
|
<label>Password</label> |
||||
|
<input [abpShowPassword]="showPassword"/> |
||||
|
<i (click)="showPassword = !showPassword">icon</i> |
||||
|
</div> |
||||
|
`, |
||||
|
imports: [ShowPasswordDirective] |
||||
|
}) |
||||
|
export class StandaloneComponent{ |
||||
|
showPassword = false; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
The `abpShowPassword` attribute has been added to the `<input>` element. Click icon to activate the `ShowPasswordDirective`. |
||||
|
|
||||
|
See the result: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
To see password input click icon. |
||||
|
|
||||
|
 |
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
File diff suppressed because it is too large
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue