Comments (4)
Great to see dark mode support coming soon. I am very much influenced by agnostic UI philosophy. I was searching for similar approach and landed here.
Looking forward to contribute once I get some time.
from agnosticui.
Adam Argyles excellent tutorials may prove helpful here:
Demo:
https://gui-challenges.web.app/theme-switch/dist/
Video
https://www.youtube.com/watch?v=kZiS1QStIWc
Article
https://web.dev/building-a-theme-switch-component/
Source code
https://github.com/argyleink/gui-challenges/tree/main/theme-switch
Also: https://www.bram.us/2020/04/26/the-quest-for-the-perfect-dark-mode-using-vanilla-javascript/
from agnosticui.
First part done: #228
Second part will be:
- First checks local storage. If not set uses OS settings. If not set defaults to light mode
- Add a toggle button (moon / sun) to toggle user's color preferences
- Update sites:
- Vue 3 Docs. Started already. Should add a new section on how to utilize dark mode.
- Astro Docs (hackathon). Implement and add a new section on how to utilize dark mode.
- Site Docs. Implement and add a new section on how to utilize dark mode.
from agnosticui.
@nikhilyeole1 thanks so much!!
I believe I already have dark mode support in master
but I'm not certain I've deployed updates to NPM yet. I got sort of swamped with things. Lmk if you are blocked by this.
from agnosticui.
Related Issues (20)
- [Feature request] Dynamic table content - Svelte HOT 3
- Lots of warnings of unused CSS selector HOT 1
- agnostic-svelte pagination component reactivity HOT 1
- [Svelte] <Input> on:input event is not being propagated HOT 1
- [svelte-kit] Cannot Load ES module from agnostic-helpers HOT 7
- [react] Are there any plans to add "forwardRefs" to your Input element? HOT 2
- [astro] Cannot find module or its corresponding type declarations HOT 2
- [Svelte] Icon.svelte.d.ts exports wrong type HOT 1
- Menu with Links as MenuItems HOT 2
- [Feature Request] Ability to click on header cell to sort by that column in Table component
- Tooltip Docs HOT 3
- Angular Tooltips
- Dark mode table hover makes text hard to read
- Legacy React dependency HOT 1
- [Svelte] Disabled attribute not applied to textarea
- Agnostic UI for Vue not working with Histoire HOT 2
- Upgrade to Storybook 7
- Unable to get agnostic-vue working with default settings
- Vue.js v-model binding does not work with Select
- Breadcrumbs example and Vue.js code broken on doc site, CodeSandbox, and Stackblitz HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from agnosticui.