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: improve theme auto-selection #296

Merged
merged 6 commits into from Feb 23, 2024

Conversation

iisakkirotko
Copy link
Collaborator

No description provided.

Copy link
Collaborator Author

iisakkirotko commented Feb 8, 2024

Current dependencies on/for this PR:

This stack of pull requests is managed by Graphite.

Copy link
Collaborator

@maartenbreddels maartenbreddels left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

js/src/Themes.js Outdated Show resolved Hide resolved
js/src/Themes.js Outdated
Comment on lines 62 to 70
} else if (document.body.dataset.vscodeThemeKind === "vscode-dark") {
// Special case for VS Code
vuetify.framework.theme.dark = true;
this.set("dark", true);
this.save_changes();
} else if (document.body.dataset.vscodeThemeKind === "vscode-light") {
vuetify.framework.theme.dark = false;
this.set("dark", false);
this.save_changes();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I think if dark==null signals 'auto', we should only set "dark_effective", and not "dark" right?

Also, should we listen to changes in the property?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Assuming we can listen to attribute changes)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, you're correct about it having to be dark_effective.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you say

should we listen to changes in the property?

You mean dark_effective?

js/src/Themes.js Outdated Show resolved Hide resolved
@iisakkirotko iisakkirotko force-pushed the 02-08-feat_improve_theme_auto-selection branch from c964eef to 3610418 Compare February 9, 2024 12:01
Copy link
Collaborator

@maartenbreddels maartenbreddels left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the code can be simpler with my suggestion and we still need to listen to changes in vuetify.framework.theme.dark.
In the template we did sth like:
watch { 'vuetify.framework.theme.dark': (value) { ..} }

I'm not sure how we can do it here, maybe @mariobuikhuizen knows?

@iisakkirotko iisakkirotko force-pushed the 02-08-feat_improve_theme_auto-selection branch from 3610418 to f803ab9 Compare February 13, 2024 14:50
Copy link
Collaborator

@maartenbreddels maartenbreddels left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice, clean code 👍

Comment on lines +75 to 83
vuetifyThemeChange() {
if (
this.get("dark") !== null &&
this.get("dark") !== vuetify.framework.theme.dark
) {
this.set("dark", vuetify.framework.theme.dark);
this.set("dark_effective", vuetify.framework.theme.dark);
this.save_changes();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
vuetifyThemeChange() {
if (
this.get("dark") !== null &&
this.get("dark") !== vuetify.framework.theme.dark
) {
this.set("dark", vuetify.framework.theme.dark);
this.set("dark_effective", vuetify.framework.theme.dark);
this.save_changes();
}
vuetifyThemeChange() {
if (
this.get("dark") !== null &&
this.get("dark") !== vuetify.framework.theme.dark
) {
this.set("dark", vuetify.framework.theme.dark);
}
this.set("dark_effective", vuetify.framework.theme.dark);
this.save_changes();

I think we always want to set dark_effective right?

@maartenbreddels
Copy link
Collaborator

I think we can also spend a sentence on this feature in https://ipyvuetify.readthedocs.io/en/latest/usage.html#themes

@maartenbreddels maartenbreddels merged commit 9ebbd14 into master Feb 23, 2024
22 checks passed
@maartenbreddels
Copy link
Collaborator

Original dark_jlab feature was added in #196 but was not yet released, so we don't have a breaking change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants