mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 08:20:13 +01:00
feat: add dark js theme
This commit is contained in:
Sergey Andrievskiy
parent
83d54e3d1f
commit
82f0022ace
3 changed files with 355 additions and 2 deletions
350
src/app/@theme/styles/theme.dark.ts
Normal file
350
src/app/@theme/styles/theme.dark.ts
Normal file
|
|
@ -0,0 +1,350 @@
|
||||||
|
import { NbJSThemeOptions } from '@nebular/theme';
|
||||||
|
|
||||||
|
const palette = {
|
||||||
|
primary: '#3366ff',
|
||||||
|
success: '#00d68f',
|
||||||
|
info: '#0095ff',
|
||||||
|
warning: '#ffaa00',
|
||||||
|
danger: '#ff3d71',
|
||||||
|
};
|
||||||
|
|
||||||
|
const theme = {
|
||||||
|
fontMain: 'Open Sans, sans-serif',
|
||||||
|
fontSecondary: 'Raleway, sans-serif',
|
||||||
|
|
||||||
|
bg: '#222b45',
|
||||||
|
bg2: '#1a2138',
|
||||||
|
bg3: '#151a30',
|
||||||
|
bg4: '#101426',
|
||||||
|
|
||||||
|
border: '#222b45',
|
||||||
|
border2: '#1a2138',
|
||||||
|
border3: '#151a30',
|
||||||
|
border4: '#101426',
|
||||||
|
border5: '#101426',
|
||||||
|
|
||||||
|
fg: '#8f9bb3',
|
||||||
|
fgHeading: '#ffffff',
|
||||||
|
fgText: '#ffffff',
|
||||||
|
fgHighlight: palette.primary,
|
||||||
|
layoutBg: '#1b1b38',
|
||||||
|
separator: '#1b1b38',
|
||||||
|
|
||||||
|
primary: palette.primary,
|
||||||
|
success: palette.success,
|
||||||
|
info: palette.info,
|
||||||
|
warning: palette.warning,
|
||||||
|
danger: palette.danger,
|
||||||
|
|
||||||
|
primaryLight: '#598bff',
|
||||||
|
successLight: '#2ce69b',
|
||||||
|
infoLight: '#42aaff',
|
||||||
|
warningLight: '#ffc94d',
|
||||||
|
dangerLight: '#ff708d',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DARK_THEME = {
|
||||||
|
name: 'dark',
|
||||||
|
variables: {
|
||||||
|
...theme,
|
||||||
|
|
||||||
|
temperature: {
|
||||||
|
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||||
|
arcEmpty: theme.bg2,
|
||||||
|
thumbBg: theme.bg2,
|
||||||
|
thumbBorder: theme.primary,
|
||||||
|
},
|
||||||
|
|
||||||
|
solar: {
|
||||||
|
gradientLeft: theme.primary,
|
||||||
|
gradientRight: theme.primary,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
secondSeriesFill: theme.bg2,
|
||||||
|
radius: ['80%', '90%'],
|
||||||
|
},
|
||||||
|
|
||||||
|
traffic: {
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
lineBg: theme.border4,
|
||||||
|
lineShadowBlur: '1',
|
||||||
|
itemColor: theme.border4,
|
||||||
|
itemBorderColor: theme.border4,
|
||||||
|
itemEmphasisBorderColor: theme.primary,
|
||||||
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
gradFrom: theme.bg2,
|
||||||
|
gradTo: theme.bg2,
|
||||||
|
},
|
||||||
|
|
||||||
|
electricity: {
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipLineColor: theme.fgText,
|
||||||
|
tooltipLineWidth: '0',
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
|
axisLineColor: theme.border3,
|
||||||
|
xAxisTextColor: theme.fg,
|
||||||
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
itemBorderColor: theme.primary,
|
||||||
|
lineStyle: 'solid',
|
||||||
|
lineWidth: '4',
|
||||||
|
lineGradFrom: theme.primary,
|
||||||
|
lineGradTo: theme.primary,
|
||||||
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
areaGradFrom: theme.bg2,
|
||||||
|
areaGradTo: theme.bg2,
|
||||||
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
},
|
||||||
|
|
||||||
|
bubbleMap: {
|
||||||
|
titleColor: theme.fgText,
|
||||||
|
areaColor: theme.bg4,
|
||||||
|
areaHoverColor: theme.fgHighlight,
|
||||||
|
areaBorderColor: theme.border5,
|
||||||
|
},
|
||||||
|
|
||||||
|
profitBarAnimationEchart: {
|
||||||
|
textColor: theme.fgText,
|
||||||
|
|
||||||
|
firstAnimationBarColor: theme.primary,
|
||||||
|
secondAnimationBarColor: theme.success,
|
||||||
|
|
||||||
|
splitLineStyleOpacity: '1',
|
||||||
|
splitLineStyleWidth: '1',
|
||||||
|
splitLineStyleColor: theme.separator,
|
||||||
|
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
tooltipFontSize: '16',
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipBorderWidth: '1',
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
|
},
|
||||||
|
|
||||||
|
trafficBarEchart: {
|
||||||
|
gradientFrom: theme.warningLight,
|
||||||
|
gradientTo: theme.warning,
|
||||||
|
shadow: theme.warningLight,
|
||||||
|
shadowBlur: '0',
|
||||||
|
|
||||||
|
axisTextColor: theme.fgText,
|
||||||
|
axisFontSize: '12',
|
||||||
|
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
},
|
||||||
|
|
||||||
|
countryOrders: {
|
||||||
|
countryBorderColor: theme.border4,
|
||||||
|
countryFillColor: theme.bg3,
|
||||||
|
countryBorderWidth: '1',
|
||||||
|
hoveredCountryBorderColor: theme.primary,
|
||||||
|
hoveredCountryFillColor: theme.primaryLight,
|
||||||
|
hoveredCountryBorderWidth: '1',
|
||||||
|
|
||||||
|
chartAxisLineColor: theme.border4,
|
||||||
|
chartAxisTextColor: theme.fg,
|
||||||
|
chartAxisFontSize: '16',
|
||||||
|
chartGradientTo: theme.primary,
|
||||||
|
chartGradientFrom: theme.primaryLight,
|
||||||
|
chartAxisSplitLine: theme.separator,
|
||||||
|
chartShadowLineColor: theme.primaryLight,
|
||||||
|
|
||||||
|
chartLineBottomShadowColor: theme.primary,
|
||||||
|
|
||||||
|
chartInnerLineColor: theme.bg2,
|
||||||
|
},
|
||||||
|
|
||||||
|
echarts: {
|
||||||
|
bg: theme.bg,
|
||||||
|
textColor: theme.fgText,
|
||||||
|
axisLineColor: theme.fgText,
|
||||||
|
splitLineColor: theme.separator,
|
||||||
|
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
tooltipBackgroundColor: theme.primary,
|
||||||
|
areaOpacity: '0.7',
|
||||||
|
},
|
||||||
|
|
||||||
|
chartjs: {
|
||||||
|
axisLineColor: theme.separator,
|
||||||
|
textColor: theme.fgText,
|
||||||
|
},
|
||||||
|
|
||||||
|
orders: {
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
tooltipLineWidth: '0',
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
|
axisLineColor: theme.border4,
|
||||||
|
axisFontSize: '16',
|
||||||
|
axisTextColor: theme.fg,
|
||||||
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
itemBorderColor: theme.primary,
|
||||||
|
lineStyle: 'solid',
|
||||||
|
lineWidth: '4',
|
||||||
|
|
||||||
|
// first line
|
||||||
|
firstAreaGradFrom: theme.bg3,
|
||||||
|
firstAreaGradTo: theme.bg3,
|
||||||
|
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
// second line
|
||||||
|
secondLineGradFrom: theme.primary,
|
||||||
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
|
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||||
|
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||||
|
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
// third line
|
||||||
|
thirdLineGradFrom: theme.success,
|
||||||
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
|
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||||
|
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||||
|
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
},
|
||||||
|
|
||||||
|
profit: {
|
||||||
|
bg: theme.bg,
|
||||||
|
textColor: theme.fgText,
|
||||||
|
axisLineColor: theme.border4,
|
||||||
|
splitLineColor: theme.separator,
|
||||||
|
areaOpacity: '1',
|
||||||
|
|
||||||
|
axisFontSize: '16',
|
||||||
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
|
// first bar
|
||||||
|
firstLineGradFrom: theme.bg3,
|
||||||
|
firstLineGradTo: theme.bg3,
|
||||||
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
// second bar
|
||||||
|
secondLineGradFrom: theme.primary,
|
||||||
|
secondLineGradTo: theme.primary,
|
||||||
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
// third bar
|
||||||
|
thirdLineGradFrom: theme.success,
|
||||||
|
thirdLineGradTo: theme.successLight,
|
||||||
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
},
|
||||||
|
|
||||||
|
orderProfitLegend: {
|
||||||
|
firstItem: theme.success,
|
||||||
|
secondItem: theme.primary,
|
||||||
|
thirdItem: theme.bg3,
|
||||||
|
},
|
||||||
|
|
||||||
|
visitors: {
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
tooltipLineWidth: '0',
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
|
axisLineColor: theme.border4,
|
||||||
|
axisFontSize: '16',
|
||||||
|
axisTextColor: theme.fg,
|
||||||
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
itemBorderColor: theme.primary,
|
||||||
|
lineStyle: 'dotted',
|
||||||
|
lineWidth: '6',
|
||||||
|
lineGradFrom: '#ffffff',
|
||||||
|
lineGradTo: '#ffffff',
|
||||||
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
areaGradFrom: theme.primary,
|
||||||
|
areaGradTo: theme.primaryLight,
|
||||||
|
|
||||||
|
innerLineStyle: 'solid',
|
||||||
|
innerLineWidth: '1',
|
||||||
|
|
||||||
|
innerAreaGradFrom: theme.success,
|
||||||
|
innerAreaGradTo: theme.success,
|
||||||
|
},
|
||||||
|
|
||||||
|
visitorsLegend: {
|
||||||
|
firstIcon: theme.success,
|
||||||
|
secondIcon: theme.primary,
|
||||||
|
},
|
||||||
|
|
||||||
|
visitorsPie: {
|
||||||
|
firstPieGradientLeft: theme.success,
|
||||||
|
firstPieGradientRight: theme.success,
|
||||||
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
firstPieRadius: ['70%', '90%'],
|
||||||
|
|
||||||
|
secondPieGradientLeft: theme.warning,
|
||||||
|
secondPieGradientRight: theme.warningLight,
|
||||||
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
secondPieRadius: ['60%', '97%'],
|
||||||
|
shadowOffsetX: '0',
|
||||||
|
shadowOffsetY: '0',
|
||||||
|
},
|
||||||
|
|
||||||
|
visitorsPieLegend: {
|
||||||
|
firstSection: theme.warning,
|
||||||
|
secondSection: theme.success,
|
||||||
|
},
|
||||||
|
|
||||||
|
earningPie: {
|
||||||
|
radius: ['65%', '100%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
|
||||||
|
fontSize: '22',
|
||||||
|
|
||||||
|
firstPieGradientLeft: theme.success,
|
||||||
|
firstPieGradientRight: theme.success,
|
||||||
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
secondPieGradientLeft: theme.primary,
|
||||||
|
secondPieGradientRight: theme.primary,
|
||||||
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
thirdPieGradientLeft: theme.warning,
|
||||||
|
thirdPieGradientRight: theme.warning,
|
||||||
|
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
},
|
||||||
|
|
||||||
|
earningLine: {
|
||||||
|
gradFrom: theme.primary,
|
||||||
|
gradTo: theme.primary,
|
||||||
|
|
||||||
|
tooltipTextColor: theme.fgText,
|
||||||
|
tooltipFontWeight: 'normal',
|
||||||
|
tooltipFontSize: '16',
|
||||||
|
tooltipBg: theme.bg,
|
||||||
|
tooltipBorderColor: theme.border2,
|
||||||
|
tooltipBorderWidth: '1',
|
||||||
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} as NbJSThemeOptions;
|
||||||
|
|
@ -37,6 +37,7 @@ import {
|
||||||
import { DEFAULT_THEME } from './styles/theme.default';
|
import { DEFAULT_THEME } from './styles/theme.default';
|
||||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||||
|
import { DARK_THEME } from './styles/theme.dark';
|
||||||
|
|
||||||
const NB_MODULES = [
|
const NB_MODULES = [
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
|
|
@ -83,7 +84,7 @@ export class ThemeModule {
|
||||||
{
|
{
|
||||||
name: 'default',
|
name: 'default',
|
||||||
},
|
},
|
||||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
|
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
|
||||||
).providers,
|
).providers,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,7 @@ export class DashboardComponent implements OnDestroy {
|
||||||
default: CardSettings[];
|
default: CardSettings[];
|
||||||
cosmic: CardSettings[];
|
cosmic: CardSettings[];
|
||||||
corporate: CardSettings[];
|
corporate: CardSettings[];
|
||||||
|
dark: CardSettings[];
|
||||||
} = {
|
} = {
|
||||||
default: this.commonStatusCardsSet,
|
default: this.commonStatusCardsSet,
|
||||||
cosmic: this.commonStatusCardsSet,
|
cosmic: this.commonStatusCardsSet,
|
||||||
|
|
@ -71,9 +72,10 @@ export class DashboardComponent implements OnDestroy {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...this.coffeeMakerCard,
|
...this.coffeeMakerCard,
|
||||||
type: 'secondary',
|
type: 'info',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
dark: this.commonStatusCardsSet,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(private themeService: NbThemeService,
|
constructor(private themeService: NbThemeService,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue