diff --git a/README.md b/README.md index 1c17958..4ffb463 100755 --- a/README.md +++ b/README.md @@ -40,28 +40,66 @@ ___ ## In Development The following features are planned: - - Notification System - - System Preference Respect [What's this?]() - - Progress indicators + - Crash Report - Deep Links - - Light Theme [Why?]() - - Skeleton State [What's this?]() + - Light Theme [Why?](#why-add-light-mode) + - Notification System + - Progress indicators + - Skeleton State [What's this?](#what-is-skeleton-state) - Splash + - System Respect [What's this?](#what-do-you-mean-by-system-respect) - Components for: - - Sidebar - - Notifications - Navigation + - Notifications - Overlays - Settings + - Sidebar -**What do you mean by System Preference Respect?** -_This is currently in writing, check back later..._ +### What do you mean by System Respect? -**Why Add Light Mode?** -_This is currently in writing, check back later..._ +A part of this function of Nexus Polestar will only be utilized on Windows and mostly macOS, as Electron's `systemPreferences` API doesn't support Linux. + +Basically, System Repect in Nexus Polestar will try it's best to integrate into the user's system. + +_Situration 1: Low Battery_ +If the system's battery becomes low, Nexus Polestar will enable it's "Power Saving" state by disabling certain features like blur composition, window transparency, notification sound, animations, and more as these functions aren't entirely nessesary for the software to serve it's purpose. + +_Situration 2: Color Scheme and Theme Mode_ (Windows and macOS) +on Windows and macOS, the user can set an accent color for their operating system, Nexus Polestar will try to use the accent color they've set. Along with using the theme mode, which is handy if they use a sunset feature to auto switch between light and dark mode. + +[`systemPreferences.getColor(color)`](https://www.electronjs.org/docs/latest/api/system-preferences#systempreferencesgetcolorcolor-windows-macos) (Windows and macOS) + +[`systemPreferences.getSystemColor(color)`](https://www.electronjs.org/docs/latest/api/system-preferences#systempreferencesgetsystemcolorcolor-macos) (macOS) + +_Situration 3: Motion and Transparency_ (macOS) +On macOS, there is an accessibility option called "Reduced Motion" and "Reduced Transparency". + +If "Reduced Motion" is enabled, Nexus Polestar will disable animations. + +If "Reduced Transparency" is enabled, all blur compositions and transparency of the window will be disabled. Transparency will also be disabled for other components, if used. + +Also recommended by Apple Human Interface Guidlelines for [Accessibility](https://developer.apple.com/design/human-interface-guidelines/foundations/accessibility). + +[`systemPreferences.getAnimationSettings()`](https://www.electronjs.org/docs/latest/api/system-preferences#systempreferencesgetanimationsettings) (macOS) + +### Why Add Light Mode? + +While dark mode is better it causes less eye-strain and great for those with low vision and light sensitivity, light mode does have it's own benefits and probably depends on the user. + +It is ideal for accessibility to allow your users to choose between light and dark modes. Consider people who have cataracts or other vision issues who would like to use your product but are unable to do so in light mode. + +So, long short, this is being added for mainly accessibility. + +Learn more: https://webuild.io/digital-product-guide-dark-light-modes + +### What is Skeleton State +"The concept behind skeleton screens is the use of empty pages that are progressively populated with content as it becomes available — immutable regions of a page are rendered instantly on load, appearing as neutral color blocks, and are gradually replaced with content such as images, headings, and interface labels." + +This makes using a splash screen optional. + +Example of a Skeleton State: +![](https://miro.medium.com/max/1400/1*18-4pGAP0Pa5040-cJ9aGg.webp) -**What is Skeleton State** -_This is currently in writing, check back later..._ ___ # Working in Nexus Polestar @@ -146,6 +184,7 @@ ___ ### Packages Used - Distrubting with: [Electron Builder](https://www.electron.build) - For Blur composition effect: [Glasstron Clarity](https://www.npmjs.com/package/glasstron-clarity) + - For Titlebar Integration: [Electron Titlebar Respect](https://www.npmjs.com/package/electron-titlebar-respect) ### Scripts - Navigation: [Tabbed Navigation using Vanilla Javascript](https://codepen.io/alpha1337/pen/mxWBpq)