71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { Injectable } from '@angular/core';
|
|
import { UserPreferenceService } from '@users/user-preference.service';
|
|
import { editor } from 'monaco-editor';
|
|
import IStandaloneThemeData = editor.IStandaloneThemeData;
|
|
|
|
@Injectable({
|
|
providedIn: 'root',
|
|
})
|
|
export class EditorThemeService {
|
|
readonly themes = ['redaction', 'redaction-disabled', 'redaction-dark', 'redaction-disabled-dark'];
|
|
readonly configurations: Record<string, IStandaloneThemeData> = {
|
|
redaction: {
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
'editor.lineHighlightBackground': '#f4f5f7',
|
|
'editorWarning.foreground': '#fdbd00',
|
|
'editorError.foreground': '#dd4d50',
|
|
},
|
|
},
|
|
'redaction-disabled': {
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
'editor.background': '#f4f5f7',
|
|
'editor.foreground': '#9398a0',
|
|
'editor.lineHighlightBackground': '#f4f5f7',
|
|
'editorLineNumber.foreground': '#9398a0',
|
|
'editorActiveLineNumber.foreground': '#9398a0',
|
|
'editorWarning.foreground': '#fdbd00',
|
|
'editorError.foreground': '#dd4d50',
|
|
},
|
|
},
|
|
'redaction-dark': {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
'editor.background': '#151a21',
|
|
'editor.lineHighlightBackground': '#283241',
|
|
'editorWarning.foreground': '#fdbd00',
|
|
'editorError.foreground': '#dd4d50',
|
|
},
|
|
},
|
|
'redaction-disabled-dark': {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [],
|
|
colors: {
|
|
'editor.background': '#151a21',
|
|
'editor.foreground': '#9398a0',
|
|
'editor.lineHighlightBackground': '#283241',
|
|
'editorLineNumber.foreground': '#9398a0',
|
|
'editorActiveLineNumber.foreground': '#9398a0',
|
|
'editorWarning.foreground': '#fdbd00',
|
|
'editorError.foreground': '#dd4d50',
|
|
},
|
|
},
|
|
};
|
|
|
|
constructor(private readonly _userPreferenceService: UserPreferenceService) {}
|
|
|
|
getTheme(canEdit: boolean): string {
|
|
const isDarkTheme = this._userPreferenceService.getTheme() === 'dark';
|
|
const editorTheme = canEdit ? 'redaction' : 'redaction-disabled';
|
|
return `${editorTheme}${isDarkTheme ? '-dark' : ''}`;
|
|
}
|
|
}
|