{{ mdiDragVertical }}
@@ -15,6 +15,7 @@
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import NavigationMixin, { NaviPoint } from '@/components/mixins/navigation'
+import ThemeMixin from '@/components/mixins/theme'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import draggable from 'vuedraggable'
import { mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js'
@@ -22,7 +23,7 @@ import { mdiDragVertical, mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@md
@Component({
components: { SettingsRow, draggable },
})
-export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin) {
+export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseMixin, ThemeMixin) {
mdiDragVertical = mdiDragVertical
@Prop({ type: Object, required: true }) naviPoint!: NaviPoint
@@ -54,9 +55,3 @@ export default class SettingsNavigationTab extends Mixins(NavigationMixin, BaseM
}
}
-
-
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index f8339aca3..bd4ba51e2 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -2,6 +2,12 @@
+
+
+
+
+ class="panel-toolbar"
+ :style="additionalStyle">
@@ -80,6 +81,10 @@ export default class Panel extends Mixins(BaseMixin) {
return output
}
+
+ get additionalStyle() {
+ return this.$vuetify.theme.dark ? '' : 'border-bottom: 1px solid #A8A8A8'
+ }
}
diff --git a/src/locales/en.json b/src/locales/en.json
index c0f99508f..c90fcb1de 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1156,6 +1156,10 @@
"ScrewsTiltAdjustDialogDescription": "Display helper dialog for SCREWS_TILT_CALCULATE.",
"TempchartHeight": "Height Temperature Chart",
"TempchartHeightDescription": "Modify the height of the temperature chart on the Dashboard.",
+ "Theme": "Theme",
+ "ThemeDark": "Dark",
+ "ThemeDescription": "Change the overall look and feel of the application",
+ "ThemeLight": "Light",
"UiSettings": "UI-Settings"
},
"Update": "update",
diff --git a/src/main.ts b/src/main.ts
index 1c4169c33..269588c33 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -35,6 +35,7 @@ import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } fr
import 'vue-resize/dist/vue-resize.css'
// @ts-ignore
import VueResize from 'vue-resize'
+import { defaultTheme } from './store/variables'
Vue.config.productionTip = false
@@ -75,6 +76,10 @@ const initLoad = async () => {
if ('defaultLocale' in file) {
await setAndLoadLocale(file.defaultLocale as string)
}
+
+ // Handle theme outside of store init and before vue mount for consistency in dialog
+ const theme = file.defaultTheme ?? defaultTheme
+ vuetify.framework.theme.dark = theme !== 'light'
} catch (e) {
window.console.error('Failed to load config.json')
window.console.error(e)
@@ -85,12 +90,12 @@ const initLoad = async () => {
if (store?.state?.instancesDB === 'moonraker') Vue.$socket.connect()
}
-initLoad()
-
-new Vue({
- vuetify,
- router,
- store,
- i18n,
- render: (h) => h(App),
-}).$mount('#app')
+initLoad().then(() =>
+ new Vue({
+ vuetify,
+ router,
+ store,
+ i18n,
+ render: (h) => h(App),
+ }).$mount('#app')
+)
diff --git a/src/pages/Heightmap.vue b/src/pages/Heightmap.vue
index f193982fa..1adae0844 100644
--- a/src/pages/Heightmap.vue
+++ b/src/pages/Heightmap.vue
@@ -400,6 +400,7 @@
import { Component, Mixins, Watch } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import ControlMixin from '@/components/mixins/control'
+import ThemeMixin from '@/components/mixins/theme'
import Panel from '@/components/ui/Panel.vue'
import {
@@ -449,7 +450,7 @@ interface HeightmapSerie {
Panel,
},
})
-export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
+export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin, ThemeMixin) {
declare $refs: {
// eslint-disable-next-line
heightmap: any
@@ -503,30 +504,21 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
private meshOpacity = 1
private flatOpacity = 0.5
- private colorAxisName = 'rgba(255,255,255,0.5)'
- private colorAxisLabel = 'rgba(255,255,255,0.5)'
- private colorAxisLine = 'rgba(255,255,255,0.2)'
- private colorAxisTick = 'rgba(255,255,255,0.2)'
- private colorSplitLine = 'rgba(255,255,255,0.2)'
-
- private colorAxisPointer = 'rgba(255,255,255,0.8)'
-
- private colorVisualMap = 'rgba(255,255,255,0.8)'
private fontSizeVisualMap = 14
get chartOptions() {
return {
tooltip: {
- backgroundColor: 'rgba(0,0,0,0.9)',
+ backgroundColor: this.bgColor(0.9),
borderWidth: 0,
textStyle: {
- color: '#fff',
+ color: this.fgColor(1),
fontSize: '14px',
},
padding: 15,
formatter: this.tooltipFormatter,
},
- darkMode: true,
+ darkMode: this.$vuetify.theme.dark,
animation: false,
legend: {
show: false,
@@ -549,14 +541,14 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
itemHeight: 350,
precision: 3,
textStyle: {
- color: this.colorVisualMap,
+ color: this.fgColorHi,
fontSize: this.fontSizeVisualMap,
},
},
xAxis3D: {
type: 'value',
nameTextStyle: {
- color: this.colorAxisName,
+ color: this.fgColorMid,
},
min: this.rangeX[0],
max: this.rangeX[1],
@@ -565,7 +557,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
yAxis3D: {
type: 'value',
nameTextStyle: {
- color: this.colorAxisName,
+ color: this.fgColorMid,
},
min: this.rangeY[0],
max: this.rangeY[1],
@@ -575,7 +567,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
min: this.scaleZMax * -1,
max: this.scaleZMax,
nameTextStyle: {
- color: this.colorAxisName,
+ color: this.fgColorMid,
},
axisPointer: {
label: {
@@ -589,31 +581,31 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
grid3D: {
axisLabel: {
textStyle: {
- color: this.colorAxisLabel,
+ color: this.fgColorMid,
},
},
axisLine: {
lineStyle: {
- color: this.colorAxisLine,
+ color: this.fgColorLow,
},
},
axisTick: {
lineStyle: {
- color: this.colorAxisTick,
+ color: this.fgColorLow,
},
},
splitLine: {
lineStyle: {
- color: this.colorSplitLine,
+ color: this.fgColorLow,
},
},
axisPointer: {
lineStyle: {
- color: this.colorAxisPointer,
+ color: this.fgColorHi,
},
label: {
textStyle: {
- color: this.colorAxisPointer,
+ color: this.fgColorHi,
},
},
},
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 1f6eb8f68..f6abac99e 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -9,12 +9,6 @@ Vue.use(Vuetify, {
export default new Vuetify({
theme: {
dark: true,
- themes: {
- dark: {
- panel: '#1e1e1e',
- toolbar: '#272727',
- },
- },
options: { customProperties: true },
},
icons: {
diff --git a/src/store/actions.ts b/src/store/actions.ts
index c43520e9b..07197c4d5 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -29,7 +29,7 @@ export const actions: ActionTree = {
/**
* This function will parse the config.json content and config mainsail
*/
- importConfigJson({ commit }, payload: ConfigJson) {
+ async importConfigJson({ commit }, payload: ConfigJson) {
type RootStateInstancesDbType = 'moonraker' | 'browser' | 'json'
let instancesDB: RootStateInstancesDbType = payload.instancesDB ?? 'moonraker'
if (import.meta.env.VUE_APP_INSTANCES_DB)
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index 2b135b1a6..2c425fc85 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -125,7 +125,7 @@ export const getters: GetterTree = {
getImage: (state) => {
if (state.current_file.filename && state.current_file.thumbnails?.length) {
const indexLastDir = state.current_file.filename.lastIndexOf('/')
- const dir = indexLastDir !== -1 ? state.current_file.filename.substr(0, indexLastDir) + '/' : ''
+ const dir = indexLastDir !== -1 ? state.current_file.filename.substring(0, indexLastDir) + '/' : ''
const thumbnail = state.current_file.thumbnails.find((thumb) => thumb.width >= thumbnailBigMin)
if (thumbnail && 'relative_path' in thumbnail)
@@ -140,7 +140,7 @@ export const getters: GetterTree = {
)
}
- return '/img/sidebar-background.svg'
+ return null
},
getThemeFileUrl: (state) => (acceptName: string, acceptExtensions: string[]) => {
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
index 829d01db1..e55b4deae 100644
--- a/src/store/files/getters.ts
+++ b/src/store/files/getters.ts
@@ -216,11 +216,11 @@ export const getters: GetterTree = {
return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? ''
},
- getSidebarBackground: (state, getters) => {
+ getCustomSidebarBackground: (state, getters) => {
const acceptName = 'sidebar-background'
const acceptExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg']
- return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? '/img/sidebar-background.svg'
+ return getters['getThemeFileUrl'](acceptName, acceptExtensions) ?? null
},
getMainBackground: (state, getters) => {
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 99376754c..1e192c60f 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -3,7 +3,7 @@ import { Module } from 'vuex'
import { actions } from '@/store/gui/actions'
import { mutations } from '@/store/gui/mutations'
import { getters } from '@/store/gui/getters'
-import { defaultLogoColor, defaultPrimaryColor, defaultBigThumbnailBackground } from '@/store/variables'
+import { defaultTheme, defaultLogoColor, defaultPrimaryColor, defaultBigThumbnailBackground } from '@/store/variables'
// load modules
import { console } from '@/store/gui/console'
@@ -149,6 +149,7 @@ export const getDefaultState = (): GuiState => {
entries: [],
},
uiSettings: {
+ theme: defaultTheme,
logo: defaultLogoColor,
primary: defaultPrimaryColor,
displayCancelPrint: false,
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 7bafd8b27..930961603 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -98,6 +98,7 @@ export interface GuiState {
presets?: GuiPresetsState
remoteprinters?: GuiRemoteprintersState
uiSettings: {
+ theme: 'dark' | 'light'
logo: string
primary: string
displayCancelPrint: boolean
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index ae86074d9..417e5157c 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -10,6 +10,7 @@ import {
PrinterStateMiscellaneous,
PrinterStateMcu,
PrinterStateMacro,
+ PrinterStateToolchangeMacro,
PrinterGetterObject,
PrinterStateLight,
} from '@/store/printer/types'
diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index 89f38fa70..593ab593e 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -105,9 +105,6 @@ export const getters: GetterTree = {
value: 1,
itemStyle,
showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
- label: {
- color: '#fff',
- },
})
}
})
@@ -144,9 +141,6 @@ export const getters: GetterTree = {
borderRadius: 3,
},
showInTable: true,
- label: {
- color: '#fff',
- },
})
}
@@ -191,9 +185,6 @@ export const getters: GetterTree = {
value: 1,
itemStyle: itemStyle,
showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
- label: {
- color: '#fff',
- },
})
}
})
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index ada84d13b..2c36f048c 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -37,7 +37,4 @@ export interface ServerHistoryStateAllPrintStatusEntry {
borderWidth: number
borderRadius: number
}
- label: {
- color: string
- }
}
diff --git a/src/store/types.ts b/src/store/types.ts
index 1c48ecfb7..b35b6f4a0 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -25,6 +25,7 @@ export interface RootStateDependency {
}
export interface ConfigJson {
+ defaultTheme?: 'dark' | 'light'
hostname?: string | null
port?: string | number | null
instancesDB?: 'moonraker' | 'browser' | 'json'
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 71c6ca2f2..9e4a57473 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -1,3 +1,4 @@
+export const defaultTheme = 'dark'
export const defaultLogoColor = '#D41216'
export const defaultPrimaryColor = '#2196f3'
export const defaultBigThumbnailBackground = '#1e1e1e'