apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added custom theme

Browse Source
This commit is contained in:
MaxOvs19
2023-02-14 20:19:57 +03:00
parent 4a2e8c9b17
commit fd8fc093d0
8 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/theme/theme.ts
View File

@ -1,4 +1,6 @@
export function changeTheme(element: Element, theme: string) {
import { CustomTheme } from './theme.interface';
export function changeTheme(element: Element, theme: string | CustomTheme) {
const select = element!.querySelector('.cg-select');
const caret = element!.querySelector('.caret');
const list = element!.querySelector('ul.list');
@ -13,32 +15,37 @@ export function changeTheme(element: Element, theme: string) {
elem.classList.remove('pathWhite');
});
switch (theme.toLowerCase()) {
case 'dark':
select!.classList.add('selectDark');
list!.classList.add('listDark');
nativeSelect?.classList.add('listDark');
path.forEach((elem) => {
elem.classList.add('pathWhite');
});
break;
case 'white':
select!.classList.add('selectWhite');
caret!.classList.add('caretWhite');
list!.classList.add('listWhite');
nativeSelect?.classList.add('listWhite');
path.forEach((elem) => {
elem.classList.add('pathBlack');
});
if (typeof theme === 'string') {
switch (theme) {
case 'dark':
select!.classList.add('selectDark');
list!.classList.add('listDark');
nativeSelect?.classList.add('listDark');
path.forEach((elem) => {
elem.classList.add('pathWhite');
});
break;
case 'white':
select!.classList.add('selectWhite');
caret!.classList.add('caretWhite');
list!.classList.add('listWhite');
nativeSelect?.classList.add('listWhite');
path.forEach((elem) => {
elem.classList.add('pathBlack');
});
if (search!) {
search!.classList.add('inputWhite');
}
break;
if (search!) {
search!.classList.add('inputWhite');
}
break;
default:
select!.classList.add('classicSelect');
list!.classList.add('classicList');
break;
default:
select!.classList.add('classicSelect');
list!.classList.add('classicList');
break;
}
} else {
select!.classList.add(`${theme.styles.head}`);
list!.classList.add(`${theme.styles.list}`);
}
}