Comments (4)
Currently, it is not possible to force this (without code modifications). It chooses light or dark mode based on device preferences.
from send.
I tried to modify the main.css file, but it's not working.
from send.
The light or dark mode is chosen dynamically based on user preference.
The relevant code lies in tailwind.config.js. Here, the following line declares dark mode:
dark: { raw: '(prefers-color-scheme: dark)' }
However, dark mode is only chosen, when a user explicitely uses the dark scheme preference. This is either an OS choice and the web browser adopts it; or the choice is solely defined in the user's web browser settings. If the user uses the scheme preference light or does not have a preference at all, the light theme will be used.
Since its tailwind, the CSS modifications will be fininshed as soon as the server is started. A modification during runtime is pain. Therefore, the tailwind config must be changed before the Docker image is started as a container. This requires said code modifications @timvisee explained.
If you want to force dark mode only, you would replace the displayed code line above with the following:
dark: { raw: '(prefers-color-scheme: dark), (prefers-color-scheme: no-preference), (prefers-color-scheme: light)' } // Always active dark mode
I've forked this repository to test this. A GitHub action is building the Docker image for my forked repo and pushes it onto Dockerhub. I've also adjusted the docker-compose.yml in the fork to make use of the dark-mode-only Docker image as well as list some important environment variables.
Feel free to use it, if you want dark mode only. I'll try to keep the forked repo in sync to this one.
from send.
@timvisee you may provide two different tailwind configs. One default as of now for light/dark mode based on user preference and one for dark mode only with my changes.
Then conditionally load one of them depending on a new environment variable such as DARK_MODE_ONLY
set to true.
You would implement this in the postcss.config.js file like follows:
const TailwindExtractor = content => {
return content.match(/[A-Za-z0-9-_:/]+/g) || [];
};
let tailwindConfigFile = process.env.DARK_MODE_ONLY === 'true' ? './tailwind-dark.config.js' : './tailwind.config.js';
const options = {
plugins: [
require('postcss-preset-env'),
require('tailwindcss')(tailwindConfigFile)
]
};
if (process.env.NODE_ENV === 'development') {
options.map = { inline: true };
} else {
options.plugins.push(
require('@fullhuman/postcss-purgecss')({
content: [
'./app/*.js',
'./app/ui/*.js',
'./android/*.js',
'./android/pages/*.js'
],
extractors: [
{
extractor: TailwindExtractor,
extensions: ['js']
}
]
})
);
}
module.exports = options;
Just an idea.
Edit: Okay, does not make sense as the npm run build
command is done during Docker image build and not later, when the image is run as container. Therefore, introducing new env variables won't work. Ignore this idea.
from send.
Related Issues (20)
- Total max file size of an instance HOT 2
- Transfer speed drops considerably as soon as the tab is not active HOT 3
- SSO or LDAP auth
- Fix permission on upload folder in docker HOT 2
- Any way to make the upload accessible only for internal users and download for external? HOT 2
- If you click the logo then you're redirected to the homepage. How can I turn this off? HOT 2
- Logo reverse back after npm run build
- Error with redirection because of the # in the last part of the link url
- Add `unlimited` as an option for max downloads when sharing a file
- Uploading a folder not working HOT 2
- CUSTOM_DESCRIPTION does not seem to work
- Using send with password behind apache reverse proxy failed HOT 2
- Uploads fail after Send has been running for a extended period fo time HOT 1
- Can`t install Send
- Is it possible to recover an expired link data? HOT 1
- customizing the text under Simple, private file sharing HOT 2
- Is there a possibility to keep the unexpired send-archive always visible? HOT 1
- [FEATURE REQUEST] Add folder picker option like WeTransfer HOT 3
- [Request] ARM64 Support 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 send.