Closed Kernald closed 1 year ago
lewisdoesstuff
commented
1 year ago Heya! Thanks for this,
Just pushed a commit to fix this, I wasn't calling the function to update the theme when the color scheme preference changes.
Should work fine now (Tested on Linux w/ Chrome), but let me know if you get any issues :)
Kernald
commented
1 year ago Sadly, this seems strictly worse on Firefox - even loading the page after having changed the theme seems to not do anything anymore, I'm always getting the light theme (using Nord, on Firefox/Linux). Interestingly enough, this seems to work as intended on Firefox on Android...
lewisdoesstuff
commented
1 year ago Ah, fantastic.
That's definitely a little strange, I'll try this out in Firefox after work tomorrow :) Reopened for now.
Kernald
commented
1 year ago Just to add: I've got a slightly different behaviour on Firefox + macOS: I always get the light theme, regardless of the OS/browser settings. Chrome and Safari on macOS both behave like Firefox on Linux: they load whatever the settings currently are, but don't react to changes dynamically.
lewisdoesstuff
commented
1 year ago That's bizarre behavior, i didn't think color preference varied between browsers/OS.
Shouldn't be an impossible fix though
lewisdoesstuff
commented
1 year ago Just done some further testing here:
I'm on KDE, and can't seem to find a global light/dark mode toggle, at least not one that the browser cares about, but,
I've had a few people test this on Windows with Firefox and Chrome, and this seems to work okay, respecting the OS theme toggle. I tested Chrome on Android as well, and that seems to work fine.
Can you let me know if your Firefox theme is set to Automatic, or Dark? It looks like this overrides the prefers-color-scheme setting that the OS provides.
If you're on automatic, can you open devtools and use the light/dark mode switch there? This should work. Even though there shouldn't be a difference, could you also try it on my install? https://dash.lew.ooo
Kernald
commented
1 year ago Oh well, this just keeps getting weirder :-)
Can you let me know if your Firefox theme is set to Automatic, or Dark? It looks like this overrides the prefers-color-scheme setting that the OS provides.
It's set on automatic. Other websites (e.g. GitHub) change fine.
If you're on automatic, can you open devtools and use the light/dark mode switch there? This should work.
It doesn't. :-/
Even though there shouldn't be a difference, could you also try it on my install? https://dash.lew.ooo/
It works fine there. I'm really not sure what's the difference. For what it's worth, I'm using the Docker image (I have e17ba885b833c52bf2af5eb982dbb2bbe263ff2d working so I assume 3b6a3f242cf71ea54f8dbb577b265f1ab79c5544 is also available in the image I'm using).
I also tried changing themes (I tried, nord, bento and solarized), just in case it was an issue specifically with one, no difference.
lewisdoesstuff
commented
1 year ago Hmm, thanks for trying!
It seems like it's not responding to browser preference changes at all, which is the issue I originally had before patching; as you've got the commit to disable components there's no reason this shouldn't work, though.
Could you send over your config.js (with OWM API key removed), and also the output of JSON.stringify(localStorage) run in the DevTools console on your Bento install?
In the meantime, if the pre-patch worked better, you could cherry-pick e17ba88 and build a docker image from that if you'd like.
Cheers!
Kernald
commented
1 year ago Hi, sorry for the delay.
JSON.stringify(localStorage) returns an empty object ("{}").
Here's my config file, with the following changes:
1.//
// Bento-Next
// Config file
//
//
// https://github.com/migueravila/Bento - upstream
//
const CONFIG = {
// ┌┐ ┌─┐┌─┐┬┌─┐┌─┐
// ├┴┐├─┤└─┐││ └─┐
// └─┘┴ ┴└─┘┴└─┘└─┘
// General
name: "Marc",
openInNewTab: true,
title: "Bento",
// Clock
twelveHourFormat: true,
flashSeparator: false,
// Theme
theme: "nord",
imageBackground: false,
imageUrl: "background.jpg", // place in ./src/assets/images/ and provide the file name. Alternatively, provide a URL to an image. If the page is served over https, you may have issues loading images from insecure origins.
themes: [ // List of installed themes, add your own themes in ./src/assets/css/themes and include it in the array below.
"arc",
"bento",
"catppuccin-frappe",
"catppuccin-macchiato",
"catppuccin-mocha",
"conceptdark", // dark mode only
"monokai",
"nord",
"sakura",
"solarized",
"summer"
],
// Search Bar
searchBar: true,
searchEngine: "google", // google, ddg
barStyle: "bento", // bento, minimal, boxy, rounded
barPlaceholder: "", // if blank, use search engine name. Set to ' ' for no placeholder.
autoFocusBar: false,
// Greetings
greetingMorning: "Good morning,",
greetingAfternoon: "Good afternoon,",
greetingEvening: "Good evening,",
greetingNight: "Sweet dreams,",
// Layout
bentoLayout: "bento", // 'bento', 'lists', 'buttons'
// Weather
weatherKey: "", // Write here your API Key
weatherIcons: "Nord", // 'Onedark', 'Nord', 'Dark', 'White'
weatherUnit: "C", // 'F', 'C'
language: "en", // More languages in https://openweathermap.org/current#multi
trackLocation: true, // Request location from the browser. If false, or location is denied, use the coordinates below.
defaultLatitude: "1",
defaultLongitude: "1",
// Autochange theme from OS preferece - The below options are all mutually exclusive. If you've got multiple set to true, the first one will be set and the rest ignored.
changeThemeByOS: true,
// Switch theme based on set hours. (24hr format, string must be in: hh:mm)
changeThemeByHour: false,
hourDarkThemeActive: "18:30",
hourDarkThemeInactive: "07:00",
// Switch dark theme automatically from sunrise to sunset. Pulls from the browsers location, or falls back to the defaults if not.
// Requires an OpenWeatherMap API key.
changeThemeByLocation: false,
// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
// ├┴┐│ │ │ │ │ ││││└─┐
// └─┘└─┘ ┴ ┴ └─┘┘└┘└─┘
firstButtonsContainer: [
{
id: "1", // entry ID, don't modify.
name: "Github", // set the name of the card
icon: "fab-github", // provide a FontAwesome icon name. Regular icons (fa-) don't require a prefix, while FA-Brands icons must be prefixed with "fab-"
link: "https://github.com/" // provide a link to the page.
},
{
id: "2",
name: "WhatsApp",
icon: "fab-whatsapp",
link: "https://web.whatsapp.com/"
},
{
id: "3",
name: "Foo",
icon: "fab-github",
link: "http://bar"
},
{
id: "4",
name: "Plex",
icon: "ticket",
link: "https://app.plex.tv"
},
{
id: "5",
name: "Reddit",
icon: "fab-reddit",
link: "https://reddit.com"
},
{
id: "6",
name: "YouTube",
icon: "fab-youtube",
link: "https://youtube.com/"
}
],
secondButtonsContainer: [
{
id: "1",
name: "Music",
icon: "fab-spotify",
link: "https://open.spotify.com"
},
{
id: "2",
name: "twitter",
icon: "fab-twitter",
link: "https://twitter.com/"
},
{
id: "3",
name: "bot",
icon: "fab-discord",
link: "https://discord.com/app"
},
{
id: "4",
name: "Amazon",
icon: "fab-amazon",
link: "https://amazon.com/"
},
{
id: "5",
name: "Hashnode",
icon: "fab-hashnode",
link: "https://hashnode.com/"
},
{
id: "6",
name: "Figma",
icon: "fab-figma",
link: "https://figma.com/"
}
],
// ┬ ┬┌─┐┌┬┐┌─┐
// │ │└─┐ │ └─┐
// ┴─┘┴└─┘ ┴ └─┘
// First Links Container
firstlistsContainer: [
{
icon: "code-branch",
id: "1",
links: [
{
name: "Foo",
link: "https://bar"
},
{
name: "Foo",
link: "https://bar"
},
{
name: "Foo",
link: "https://bar"
},
{
name: "Foo",
link: "https://bar"
},
{
name: "Foo",
link: "https://bar"
}
]
},
{
icon: "rotate",
id: "2",
links: [
{
name: "Foo",
link: "https://bar"
},
{
name: "Foo",
link: "http://bar"
},
{
name: "Foo",
link: "https://bar"
}
]
}
],
// Second Links Container
secondListsContainer: [
{
icon: "house-user",
id: "1",
links: [
{
name: "Spotify",
link: "https://www.spotify.com"
},
{
name: "Reddit",
link: "https://www.reddit.com"
},
{
name: "Hashnode",
link: "https://www.hashnode.com"
},
{
name: "Pocket",
link: "https://www.pocket.com"
}
]
},
{
icon: "fab-github",
id: "2",
links: [
{
name: "Front",
link: "https://www.reddit.com/r/Frontend/"
},
{
name: "Rust",
link: "https://www.reddit.com/r/rust/"
},
{
name: "Go",
link: "https://www.reddit.com/r/golang/"
},
{
name: "Repos",
link: "https://github.com/migueravila"
}
]
}
],
componentsEnabled: {
searchBar: false,
themeButton: false,
clock: true,
greeter: false,
date: true,
weather: true
}
};
export const config = CONFIG;Cheers,
Does this still happen with the themeButton component enabled?
Kernald
commented
1 year ago Ha, good guess! Enabling themeButton makes it work again indeed.
lewisdoesstuff
commented
1 year ago Ah, brilliant!
Looks like the script for updating the theme is part of the themeButton component, so i'd assume all of the other theme modes break with this disabled.
I'll patch this to render the component as hidden, instead of skipping it entirely when disabled.
I'll put a commit together when i'm home :)
lewisdoesstuff
commented
1 year ago Just pushed a commit that (hopefully) fixes this.
Let me know if you have any other issues :)
Describe the bug When
changeThemeByOSis set totrue, Bento is opened and the OS changes theme, Bento doesn't react like most websites usingprefers-color-schemedo. Refreshing the tab works.To Reproduce
changeThemeByOStotrueExpected behavior Bento should dynamically change theme to match the new OS settings.
Screenshots N/A
Device Details (please complete the following information):
Additional context N/A