bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

Theme Support with a Dark Mode (#974)

Browse Source 
* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

Missed the swal2 styling and improved the table theming

* Icon styling

* Fix theme not saving

* Update English

Remove colour to make it more translatable between English and American

* Update messages.json

* Login logo

* dropdown and login logo

* btn-link and totp fix

Added a border for extra readability on the btn-link

* Organisation Styling

* Update messages.json

* Update webauthn-fallback.ts

Add missing semicolon and enable console.error bypass for tslint

* Fix contrast issues

Update the blue to match the browser extension and lighten the grey for text-muted variable

* Add Paypal Container and Loading svg file

* Update jslib

* Password Generator contrast fix
This commit is contained in:
Danny Murphy
2021-06-02 19:38:04 +01:00
committed by GitHub
parent 1bacc8b774
commit cf24113924
15 changed files with 510 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/settings/options.component.ts
View File

@@ -26,9 +26,11 @@ export class OptionsComponent implements OnInit {
disableIcons: boolean;
enableGravatars: boolean;
enableFullWidth: boolean;
theme: string;
locale: string;
vaultTimeouts: any[];
localeOptions: any[];
themeOptions: any[];
private startingLocale: string;
@@ -60,6 +62,11 @@ export class OptionsComponent implements OnInit {
localeOptions.sort(Utils.getSortFunction(i18nService, 'name'));
localeOptions.splice(0, 0, { name: i18nService.t('default'), value: null });
this.localeOptions = localeOptions;
this.themeOptions = [
{ name: i18nService.t('themeDefault'), value: 'themeDefaultSet' },
{ name: i18nService.t('themeLight'), value: 'themeLight' },
{ name: i18nService.t('themeDark'), value: 'themeDark' },
];
}
async ngOnInit() {
@@ -69,6 +76,7 @@ export class OptionsComponent implements OnInit {
this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
this.theme = await this.storageService.get<string>(ConstantsService.themeKey);
}
async submit() {
@@ -80,6 +88,7 @@ export class OptionsComponent implements OnInit {
await this.stateService.save('enableGravatars', this.enableGravatars);
await this.storageService.save('enableFullWidth', this.enableFullWidth);
this.messagingService.send('setFullWidth');
await this.storageService.save('theme', this.theme);
await this.storageService.save(ConstantsService.localeKey, this.locale);
if (this.locale !== this.startingLocale) {
window.location.reload();
@@ -101,4 +110,22 @@ export class OptionsComponent implements OnInit {
}
this.vaultTimeoutAction = newValue;
}
async themeChanged(themeUpdate: string) {
const theme = ['themeDefaultSet', 'themeDark', 'themeLight'];
const htmlEl = window.document.documentElement;
theme.forEach(element => {
htmlEl.classList.remove(element);
});
if (themeUpdate === 'themeDefaultSet') {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
htmlEl.classList.add('themeDark', themeUpdate);
}
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
htmlEl.classList.add('themeLight', themeUpdate);
}
} else {
htmlEl.classList.add(themeUpdate);
}
}
}