colinespinas / darken Goto Github PK
View Code? Open in Web Editor NEW🌑 Dark mode made easy
Home Page: https://colinespinas.github.io/darken/
License: MIT License
darken's Issues
Update/Add tests using Jest
Is your feature request related to a problem? Please describe.
Tests are an important part of trusting that a bunch of code will work as intended and ensure not to break a project when updating it. It would be great to add/update tests for Darken.
Describe the solution you'd like
Update and add missing tests using Jest (already installed in deps).
Uncaught TypeError: Cannot read property 'addEventListener'
There is a return error Uncaught: TypeError
Uncaught TypeError: Cannot read property 'addEventListener' of null
at new e (darken.umd.js:1)
at event:26Screenshots
The error causes the toggle to not function.
Desktop
- OS: Deepin Linux
- Browser: Chrome
- Version: Version 78.0.3904.97 (Official Build) (64-bit)
Usage as render-blocking script
Is your feature request related to a problem? Please describe.
My issue is that every new page always loads in light mode initially. Meaning that there's a very short flicker when the browser renders the light mode before finding out the user wants dark mode. This makes the implementation look a little unprofessional and is actually annoying when using the site in total darkness.
Describe the solution you'd like
I've looked around and it seems that the solution would be to initialize the dark mode and do all the checks in a script tag placed in <head>. This way, the check is blocking the render for a few extra milliseconds until it figures out the right theme.
Describe alternatives you've considered
I tried to place my darkmode = new darken(options, callback) function in the <head> right after calling the CDN but the browser says Uncaught TypeError: Cannot read property classList of null which occurs 3 times (lines 31, 36, and 96 of the prettified Chrome console).
My options object doesn't set a toggle target nor a container as the DOM is not rendered yet. So I don't know what the issue is.
Additional context
Any other solution that could help me eliminate the flicker would also be appreciated! Cheers
Timestamps based mode switch
Is your feature request related to a problem? Please describe.
Yes, when a user come to an app/website to a fixed hour it will be cool to change the theme depending on the time.
Describe the solution you'd like
The option can take timestamps as an input to switch modes.
Exemple of implementation :
const darkmode = new darken({
class: "darkmode-active",
timestamps: {
dark: "20:00",
light: "6:00",
}
variables: {
"--primary-color" : ["#000000", "#fafafa"],
"--background-color" : ["#fafafa", "#000000"]
},
});Dynamic stylesheet change on mode switch
Is your feature request related to a problem? Please describe.
Yes, it could be good to have an option to change stylesheets by changing from light to dark mode.
Describe the solution you'd like
The option can take a stylesheet path for each mode.
Exemple of implementation :
const darkmode = new darken({
class: "darkmode-active",
stylesheets: {
dark: "dark.css",
light: "light.css",
}
variables: {
"--primary-color" : ["#000000", "#fafafa"],
"--background-color" : ["#fafafa", "#000000"]
},
});TypeScript type definition file (I can add if you wish)
Is your feature request related to a problem? Please describe.
Yes, when people use this package with TypeScript they will need to have type definitions in order to know which type of arguments / return value is expected.
Describe the solution you'd like
Developers using this package in their TypeScript projects being notified about the proper type of value passed in to this module.
Describe alternatives you've considered
N/A
Additional context
It helps keep developers' code type-safe.
Thank you.
Doesn't work with checkbox/switch element instead of button
Is your feature request related to a problem? Please describe.
I tried using this script with a modified checkbox element, styled to look like a toggle switch. This project's scripts only seem to work with a button element. Toggling the switch just has no effect.
Describe the solution you'd like
It'd be cool if this could also work with a toggle switch/modified checkbox and have it remember the checked/unchecked status of the checkbox.
Describe alternatives you've considered
I've seen buttons styled as switches using CSS, that's a possibility, but I already have checkbox/switches in my project that are styled how I want them to look. Additionally I could just use a button instead, it's just not my preference.
Additional context
My project is the Tint and Shade Generator.
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.