const MobileDetect = require('mobile-detect')
const md = new MobileDetect(window.navigator.userAgent);
const isMobile = md.mobile() !== null || md.phone() !== null || md.tablet() !== null
p3xr.ng.provider('p3xrTheme', function p3xrThemeProvider($mdThemingProvider,) {
const selfProvider = this;
$mdThemingProvider.generateThemesOnDemand(true);
$mdThemingProvider.alwaysWatchTheme(true);
$mdThemingProvider.setNonce();
const themeCookieName = 'p3xr-theme'
const themeDefault = 'p3xrThemeLight';
this.start = () => {
// console.warn('ngivrTheme we are in the provider eg: config')(
Object.keys(p3xr.theme).forEach(theme => {
//console.warn('provider theme: ', theme)
p3xr.theme[theme]($mdThemingProvider)
})
$mdThemingProvider.setDefaultTheme(themeDefault);
}
const themeIsGenerated = {};
const themeType = {
dark: [
'p3xrThemeDarkNeu',
'p3xrThemeDark',
'p3xrThemeDarkoBluo',
'p3xrThemeMatrix',
],
light: [
'p3xrThemeLight',
'p3xrThemeEnterprise',
'p3xrThemeRedis',
]
}
// this is the service eg: ngivrTheme
this.$get = ['$mdTheming', '$rootScope', '$cookies', '$mdColors', function p3xThemeFactory($mdTheming, $rootScope, $cookies, $mdColors) {
// let's assume that the UnicornLauncher constructor was also changed to
// accept and use the useTinfoilShielding argument
return new function p3xrTheme() {
const self = this;
this.isDark = () => {
return themeType.dark.includes(this.getCurrentThemeName())
}
this.start = () => {
// console.log(selfProvider);
// console.log('ngivrTheme we are in the service eg: run or injector')
self.setTheme();
}
this.setTheme = (themeName) => {
if (themeName === undefined) {
themeName = $cookies.get(themeCookieName)
if (themeName === undefined) {
themeName = themeDefault
}
}
//console.warn(`theme will generate theme on the fly: ${theme}`);
if (!themeIsGenerated.hasOwnProperty(themeName)) {
//console.warn(`theme generating theme on the fly: ${theme}`);
$mdTheming.generateTheme(themeName);
$mdTheming.generateTheme(`${themeName}Layout`);
$mdTheming.generateTheme(`${themeName}Common`);
themeIsGenerated[themeName] = true;
}
//console.warn(themeIsGenerated)
//console.warn(`theme registered: ${$mdTheming.registered(theme)}`);
$mdThemingProvider.setDefaultTheme(themeName);
$rootScope.p3xr.state.theme = themeName;
$cookies.put(themeCookieName, themeName, {expires: p3xr.settings.cookieExpiry,});
$body.removeClass('p3xr-theme-light')
$body.removeClass('p3xr-theme-dark')
if (themeType.dark.includes(themeName)) {
$body.addClass('p3xr-theme-dark')
} else {
$body.addClass('p3xr-theme-light')
}
$('#p3xr-theme-styles').remove()
const darkColor = p3xr.state.themeCommon + '-background';
//console.warn(darkColor)
const borderColor = $mdColors.getThemeColor(p3xr.state.themeLayout + '-primary-hue-1');
const styles = `
body.p3xr-theme-dark[md-theme="p3xrThemeDarkNeuLayout"] md-toolbar.md-hue-1 .md-button-dark-hover-fix:hover,
body.p3xr-theme-dark[md-theme="p3xrThemeDarkLayout"] md-toolbar.md-hue-1 .md-button-dark-hover-fix:hover,
body[md-theme="p3xrThemeEnterpriseLayout"] md-toolbar.md-hue-1 .md-button-dark-hover-fix:hover {
background-color: rgba(0, 0, 0, 0.1) !important; /* Lighten on hover for example */
}
[data-p3xr-tree-key]:hover {
background-color: ${this.isDark() ? $mdColors.getThemeColor(p3xr.state.themeCommon + '-accent-300') : $mdColors.getThemeColor(p3xr.state.themeCommon + '-accent-800') } !important;
color: ${this.isDark() ? 'black' : 'white' } !important;
padding: 2px;
}
.p3xr-theme-dark .p3xr-content-border {
border-left: 1px solid ${borderColor};
border-right: 1px solid ${borderColor};
border-bottom: 1px solid ${borderColor};
}
.p3xr-theme-light .p3xr-content-border {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.p3xr-theme-light .p3xr-content-border-fixed {
border-left: 1px solid ${borderColor};
border-right: 1px solid ${borderColor};
border-bottom: 1px solid ${borderColor};
}
.p3xr-theme-dark .p3xr-content-border-fixed {
border-left: 1px solid ${borderColor};
border-right: 1px solid ${borderColor};
border-bottom: 1px solid ${borderColor};
}
.p3xr-theme-dark .p3xr-content-border-toolbar {
border-left: 1px solid ${borderColor};
border-right: 1px solid ${borderColor};
border-top: 1px solid ${borderColor};
}
.p3xr-theme-light .p3xr-content-border-toolbar {
border-left: 1px solid ${borderColor};
border-right: 1px solid ${borderColor};
border-top: 1px solid ${borderColor};
}
.p3xr-toast-default .md-toast-content {
background-color: ${this.isDark() ? $mdColors.getThemeColor(darkColor) : 'auto'} !important;
border: solid 1px ${this.isDark() ? 'rgba(255, 255, 255, 0.5)' : 'auto'} !important;
${this.isDark() ? 'box-shadow: 0 0 10px rgba(0,0,0,0.6);' : ''}
}
treecontrol i.tree-branch-head:before {
color: ${this.isDark() ? $mdColors.getThemeColor('amber-A100') : $mdColors.getThemeColor('amber-A400')};
${this.isDark() ? 'text-shadow: 1px 1px 1px rgba(55, 29, 27, 0.5);' : 'text-shadow: 1px 1px 0px rgba(55, 11, 0, 0.5);' }
}
body.p3xr-theme-dark[md-theme="p3xrThemeMatrixLayout"] treecontrol i.tree-branch-head:before {
color: ${$mdColors.getThemeColor('lime-A400')} !important;
}
.p3xr-list-key-odd-item {
background-color: ${$mdColors.getThemeColor(p3xr.state.themeLayout + '-background-500-0.1')};
}
.p3xr-list-key-item {
border-bottom: 1px solid ${this.isDark() ? $mdColors.getThemeColor(p3xr.state.themeLayout + '-background-300-0.1') : $mdColors.getThemeColor(p3xr.state.themeLayout + '-background-700-0.1') };
}
input:-webkit-autofill, input:-webkit-autofill:focus {
-webkit-box-shadow:0 0 0 50px ${this.isDark() ? 'rgb(66, 66, 66, 0.9)' : 'rgba(255, 255, 255, 0.5)'} inset !important;
-webkit-text-fill-color: ${this.isDark() ? 'white' : 'black'} !important;
}
`
$('head').append('<style id="p3xr-theme-styles">' + styles + '</style>')
const ngivrCoreThemeMetaName = 'p3xr-theme-meta'
const ngivrCoreThemeMetaElement = document.getElementById(ngivrCoreThemeMetaName)
if (ngivrCoreThemeMetaElement) {
ngivrCoreThemeMetaElement.remove()
}
const meta = document.createElement('meta');
meta.id = ngivrCoreThemeMetaName
// <meta name="theme-color" content="hsl(24.3, 97.4%, 54.3%)">
meta.name = 'theme-color'
meta.content = $mdColors.getThemeColor(p3xr.state.themeLayout + '-accent')
document.head.appendChild(meta)
// https://stackoverflow.com/questions/65940522/how-do-i-switch-to-chromes-dark-scrollbar-like-github-does
// but fixed by p3x-robot
document.documentElement.style.display = 'none';
document.documentElement.setAttribute(
"data-color-scheme",
this.isDark() ? "dark" : "light"
);
// remove scrollbars
// document.documentElement.style.overflow = "hidden";
// trigger reflow so that overflow style is applied
document.body.clientWidth;
// remove overflow style, which will bring back the scrollbar with the correct scheme
// document.documentElement.style.overflow = "";
document.documentElement.style.display = '';
$rootScope.$broadcast('p3xr-theme-switched')
}
this.getCurrentThemeName = () => {
return $cookies.get(themeCookieName);
}
this.generateThemeName = (themeNameRaw) => {
const generateThemeName = 'p3xrTheme' + themeNameRaw[0].toUpperCase() + themeNameRaw.substring(1)
return generateThemeName;
}
};
}];
});