berryOS

Custom desktop and accent colors!

I added a modular color picker component in the Personalization settings panel. Clicking a preset or using the native eye-dropper custom color tool instantly updates buttons, icons, switches, and highlights across the entire OS. I also implemented a FileReader data-stream pipeline. Users can upload any .jpg, .png, or .webp file from their local machine, converting it to a base64 string to update the active desktop background immediately. Also, if a user doesn’t have a custom wallpaper, the default desktop gradient now intelligently samples the chosen accent color, blending a low-opacity hue directly into the dark/light background.

Alt tabbing (sort of).

A lot of this time was spent refactoring the window system to use a windows object.

To start off, I tried adding a navigator.connection API to try and identify cellular vs wifi vs ethernet structures, however as of reading the MDN docs it turns out its not a very common API, with Firefox dropping it as of Firefox 31, and Safari never having it in the first place, I ended up switching to the onLine/offLine property, which is supported by all mainstream browsers.

Also Alt + tab is currently slightly broken, as it does not yet show a window preview, as well as not properly focusing the chosen window, however this is something I will tackle later on, as I plan on adding custom wallpaper support now.

(flashbang warning)

Light mode!

Changes CSS values to respect the theme detection, also tries auto detect light/dark mode based on browser settings.

Oh yes also changed up the topbar to look better (looks alot more like macOS now which I may change in the future.)

Simple stuff this time around, just made the desktop look more like macOS, will probably edit though so it doesn’t look TOO similar. Will add the ability to change dark/light mode and background next!

So, A LOT of time was spent on this, a lot more than I anticipated. Firstly, I added a new settings app (which currently only has like one setting) that uses shadcn’s components for switches, buttons, sliders, etc. This was because I did NOT want to make my own components from scratch. Quick look at the docs, I added my necessary components, and CSS theming. I had a slight issue with setting raw CSS variables on .dark blocks weren’t syncing up properly with unedited shadcn svelte components due to Tailwind’s V4 theme compiler rules. Configuring custom colors directly in the @theme inline block in layout.css seemed to fix this. I also migrated the dock into its own components (Dock.svelte), allowing for better scalability.

Overall, pretty happy with this session, as now I can seamlessly add settings, add components, app, and all. The new task is to clean up the desktop, making it more visually appealing to the eyes.

Not much was doen apart from porting the gh pages to SvelteKit

Was done by making a deploy.yml workflow that builds the website and deploys it to GitHub Pages. Next plan of action is cleaning up desktop to make it more pleasing on the eyes

Sigh….. I got bored

I hate vanilla html and javascript, so…. I switched my webOS entirely to SvelteKit.

This change should help me add components easier, also can add better stuff, I have also switched from base CSS to TailwindCSS, which is what I’m more used to. What I plan on doing is making every app its own svelte page, making it really easy to add apps. Overall nothing changed for now, I just spent the time porting over to SvelteKit.

First devlog of berryOS!

This is part of the webOS mission, however I am already pretty experienced in web devving so I kinda improvised on some stuff. I got an app dock, windows, topbar, time and a background!