bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-31 07:33:23 +00:00
Code Issues Releases Wiki Activity

Revert "Theme Support with a Dark Mode (#974)" (#1011)

Browse Source 
This reverts commit cf24113924.
This commit is contained in:
Chad Scharf
2021-06-03 15:49:14 -04:00
committed by GitHub
parent 2f8a721033
commit a554c0e660
15 changed files with 114 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/accounts/login.component.html
View File

@@ -1,7 +1,7 @@
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
<div class="row justify-content-md-center mt-5">
<div class="col-5">
<div id="loginLogo" class="logo mb-2" alt="Bitwarden"></div>
<img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
<p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
<div class="card d-block">
<div class="card-body">

13
src/app/services/services.module.ts
View File

@@ -167,18 +167,11 @@ export function initFactory(): Function {
authService.init();
const htmlEl = window.document.documentElement;
htmlEl.classList.add('locale_' + i18nService.translationLocale);
const theme = await storageService.get<string>(ConstantsService.themeKey);
let theme = await storageService.get<string>(ConstantsService.themeKey);
if (theme == null) {
htmlEl.classList.add('themeDefaultSet');
} else {
htmlEl.classList.add(theme);
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches && htmlEl.classList.contains('themeDefaultSet')) {
htmlEl.classList.add('themeDark');
}
if (window.matchMedia('(prefers-color-scheme: light)').matches && htmlEl.classList.contains('themeDefaultSet')) {
htmlEl.classList.add('themeLight');
theme = 'light';
}
htmlEl.classList.add('theme_' + theme);
stateService.save(ConstantsService.disableFaviconKey,
await storageService.get<boolean>(ConstantsService.disableFaviconKey));
stateService.save('enableGravatars', await storageService.get<boolean>('enableGravatars'));

11
src/app/settings/options.component.html
View File

@@ -87,17 +87,6 @@
</div>
<small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="theme">{{'theme' | i18n}}</label>
<select id="theme" name="theme" [(ngModel)]="theme" class="form-control" (ngModelChange)="themeChanged($event)">
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
<small class="form-text text-muted">{{'themeDesc' | i18n}}</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">
{{'save' | i18n}}
</button>

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

@@ -26,11 +26,9 @@ export class OptionsComponent implements OnInit {
disableIcons: boolean;
enableGravatars: boolean;
enableFullWidth: boolean;
theme: string;
locale: string;
vaultTimeouts: any[];
localeOptions: any[];
themeOptions: any[];
private startingLocale: string;
@@ -62,11 +60,6 @@ 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() {
@@ -76,7 +69,6 @@ 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() {
@@ -88,7 +80,6 @@ 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();
@@ -110,22 +101,4 @@ 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);
}
}
}

2
src/app/vault/add-edit.component.html
View File

@@ -103,7 +103,7 @@
</div>
<div class="col-6 form-group totp d-flex align-items-end" [ngClass]="{'low': totpLow}">
<div *ngIf="!cipher.login.totp || !totpCode">
<img src="../../images/totp-countdown.png" id="totpImage" title="{{'verificationCodeTotp' | i18n}}"
<img src="../../images/totp-countdown.png" title="{{'verificationCodeTotp' | i18n}}"
class="ml-2">
<a href="#" appStopClick class="badge badge-primary ml-3" (click)="premiumRequired()"
*ngIf="!organization && !cipher.organizationId && !canAccessPremium">