Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: light mode ui #1580

Merged
merged 23 commits into from
Dec 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
627ae4d
light mode, theme mixin created
Oct 4, 2023
2e3affd
Load default theme from config.json, conditional dark attributes, lig…
Oct 15, 2023
db6b9cb
Merge branch 'develop' into lightMode
meteyou Dec 10, 2023
ff6f32f
fix: remove moonraker db check in init process
meteyou Dec 10, 2023
3e8f0eb
refactor: remove unused dark attribute in v-card and v-app elements
meteyou Dec 11, 2023
b725339
refactor: remove unused dark attribute in v-snackbar, v-tab
meteyou Dec 11, 2023
a11a94a
refactor: remove darkAttribute getter
meteyou Dec 11, 2023
f90d910
fix: change color of scrollbars in theme--light
meteyou Dec 11, 2023
08be219
fix: change border color of console entries in default size
meteyou Dec 11, 2023
b125f74
fix: fix issue in SettingsMacrosTabExpert
meteyou Dec 13, 2023
9855ca3
refactor: add some null checks
meteyou Dec 13, 2023
f059f39
refactor: change type of gui.uiSettings.theme from string to dark/light
meteyou Dec 13, 2023
6df40c1
refactor: remove unused ThemeMixin imports
meteyou Dec 13, 2023
1e4e9a3
fix: printer farm background image
meteyou Dec 13, 2023
6974817
fix: fix border color in BarsControl
meteyou Dec 13, 2023
7716aa1
fix: fix border-top in default console
meteyou Dec 13, 2023
f5dc948
fix: fix border in TheSettingsMenu
meteyou Dec 13, 2023
ed2b021
fix: fix border in ExtruderControlPanel
meteyou Dec 13, 2023
2bfbb5f
fix: fix border in ExtruderControlPanelTools
meteyou Dec 13, 2023
46417ae
fix: fix border in MiniconsolePanel
meteyou Dec 13, 2023
7b2790b
fix: fix border in ZoffsetControl
meteyou Dec 13, 2023
c60104f
refactor: refactor theme--light css block
meteyou Dec 13, 2023
001de44
fix: add light mode to circle control
meteyou Dec 16, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/config.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"defaultLocale": "en",
"defaultTheme": "dark",
"hostname": null,
"port": null,
"instancesDB": "moonraker",
Expand Down
206 changes: 206 additions & 0 deletions public/img/sidebar-background-light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions remote/config.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"defaultLocale": "en",
"defaultTheme": "dark",
"hostname": null,
"port": null,
"instancesDB": "browser",
Expand Down
18 changes: 16 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-app dark :style="cssVars">
<v-app :style="cssVars">
meteyou marked this conversation as resolved.
Show resolved Hide resolved
<template v-if="socketIsConnected && guiIsReady">
<the-sidebar />
<the-topbar />
Expand Down Expand Up @@ -28,6 +28,7 @@
import Component from 'vue-class-component'
import TheSidebar from '@/components/TheSidebar.vue'
import BaseMixin from '@/components/mixins/base'
import ThemeMixin from './components/mixins/theme'
import TheTopbar from '@/components/TheTopbar.vue'
import { Mixins, Watch } from 'vue-property-decorator'
import TheUpdateDialog from '@/components/TheUpdateDialog.vue'
Expand Down Expand Up @@ -63,7 +64,7 @@ Component.registerHooks(['metaInfo'])
TheScrewsTiltAdjustDialog,
},
})
export default class App extends Mixins(BaseMixin) {
export default class App extends Mixins(BaseMixin, ThemeMixin) {
public metaInfo(): any {
let title = this.$store.getters['getTitle']

Expand Down Expand Up @@ -123,6 +124,10 @@ export default class App extends Mixins(BaseMixin) {
return this.$store.state.printer.print_stats?.filename ?? ''
}

get theme(): string {
return this.$store.state.gui.uiSettings.theme
}

get logoColor(): string {
return this.$store.state.gui.uiSettings.logo
}
Expand Down Expand Up @@ -199,6 +204,15 @@ export default class App extends Mixins(BaseMixin) {
})
}

@Watch('theme')
themeChanged(newVal: string): void {
const dark = newVal !== 'light'
this.$vuetify.theme.dark = dark

const doc = document.documentElement
doc.className = dark ? 'theme--dark' : 'theme--light'
}

drawFavicon(val: number): void {
const favicon16: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='16x16']")
const favicon32: HTMLLinkElement | null = document.querySelector("link[rel*='icon'][sizes='32x32']")
Expand Down
26 changes: 26 additions & 0 deletions src/assets/styles/page.css
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,29 @@ body {
min-width: 100px;
min-height: 100px;
}

/* Light theme */
html.theme--light {
scrollbar-color: rgba(0, 0, 0, 0.55) #ffffff;
}

html.theme--light body {
background: #ffffff !important;
}

html.theme--light ::-webkit-scrollbar {
background-color: #ffffff;
}

html.theme--light ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-color: #ffffff;
}

html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background: rgba(0, 0, 0, 0.4) !important;
}

html.theme--light .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
background: rgba(0, 0, 0, 0.55) !important;
}
8 changes: 5 additions & 3 deletions src/components/TheConnectingDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<template>
<v-dialog v-model="showDialog" persistent :width="400">
<v-card dark>
<v-card>
<v-toolbar flat dense>
<v-toolbar-title>
<span class="subheading">
Expand All @@ -28,7 +28,7 @@
</div>
</v-card-text>
<v-card-text v-else class="pt-5">
<v-progress-linear color="white" indeterminate></v-progress-linear>
meteyou marked this conversation as resolved.
Show resolved Hide resolved
<v-progress-linear :color="progressBarColor" indeterminate></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
Expand All @@ -38,6 +38,8 @@
import Component from 'vue-class-component'
import { Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'

import ThemeMixin from '@/components/mixins/theme'
import ConnectionStatus from '@/components/ui/ConnectionStatus.vue'
import { mdiConnection } from '@mdi/js'

Expand All @@ -46,7 +48,7 @@ import { mdiConnection } from '@mdi/js'
ConnectionStatus,
},
})
export default class TheConnectingDialog extends Mixins(BaseMixin) {
export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
mdiConnection = mdiConnection

counter = 0
Expand Down
2 changes: 1 addition & 1 deletion src/components/TheEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
</v-card-text>
</panel>
</v-dialog>
<v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom dark>
<v-snackbar v-model="loaderBool" :timeout="-1" :value="true" fixed right bottom>
meteyou marked this conversation as resolved.
Show resolved Hide resolved
<div>
{{ snackbarHeadline }}
<br />
Expand Down
4 changes: 4 additions & 0 deletions src/components/TheSettingsMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,10 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
height: 100%;
}

html.theme--light .settings-tabs-bar {
border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.settings-tabs.height500 {
height: 500px;
max-height: calc(var(--app-height) - 111px);
Expand Down
Loading
Loading