I'm building a webapp that has a dark and light theme. I want to serve either based on the OS/browser preference of the user. However, in my webapp their will be a setting to override that. So let's say a user has dark-mode preference according to his OS/browser, then he can still choose to use light-mode. My initial idea was to set a data-attribute on the body-tag with JS when a user chooses this mode.
I'm using CSS variables for my colour schemes. Now, the question is: can I combine this in one sort-of query, without writing duplicate code? My current implementation with duplicate code is, simplified, as follows:
:root {
--background: white;
--text: black;
}
body[data-theme='dark'] {
--background: black;
--text: white;
}
#media (prefers-color-scheme: dark) {
body:not[data-theme='light'] {
--background: black;
--text: white;
}
}
So:
Default I serve a light-theme
When your browser/OS says you prefer dark, you get dark
When you pick light or dark in the webapp, it will override your browser/OS preference
The problem here is of course that I have duplicate code to set the dark theme variables. Is there any CSS-approach to fix this (so no SCSS/Less etc.)?
Related
I`m working on a little game, basically like this: https://sweardle.com/ and i have a dark theme and a light theme, I have, too, some animations that triggers when the Api sends the response (the div flip while change the background color if you match a letter). The problem: if i change the theme to dark/light ALL application is remounted what makes all animations retrigger. What can i do to change the theme from dark to light or light to dark whitout trigger the animation again?
My application is using ReactJS and MUIV5
I'm not sure how you implement your dark / light theme.
I think the best way would be for you to use css variables to style your elements.
Then when you change the theme you can just toggle some kind of theme="light" on your html element (or save / read a value from local storage), which in turn will update your css.
Example:
html[data-theme='light'] {
--background-color: white;
--text-color: blue;
}
html[data-theme='dark'] {
--background-color: black;
--text-color: yellow;
}
.your-element {
background-color: var(--background-color);
color: var(--text-color);
}
Maybe this here can also help you
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I have a site which already is overall dark (https://spacetrace.org), but since the new dark mode in Firefox exists, if it is selected, some colours and image transparencies are then changed somehow, which breaks the overall style.
I couldn't find an official document that explains the automatic changes.
How do I find out what was changed and revert those unexpected changes?
Note: I would like to enhance the site so it does what the user wants, and serve a working dark version using media query:
#media (prefers-color-scheme: dark) {
/* css */
}
But I cannot find the CSS options that were changed, so I can adapt them
I guess you are talking about this.
http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes#Editing;
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-color-scheme;
All you need is to add userChrome.css file with some code like this:
:root:not(:-moz-lwtheme) {
background-color: #e3e4e6 !important;
color: #18191a !important;
}
I am trying to make a toggle between night mode and day mode only by changing colors. I have some base color variables inside my _colors.scss, and they are used all over my site. I use React to toggle a className between 'night-mode' and 'day-mode' at the first div of the project.
I have tried to wrap the variables in the mentioned class names, but the result is that no other files can access the variables. Therefore I was hoping for a solution where I can use a night-mode file and a day-time file and toggle between them.
As I see it now, the issue is that I can't wrap the $variables or the #import in a class name, which makes it difficult to know what mode is selected. I am looking for a solution that does not include jQuery (I have a variable globally stored that can be used for javascript reference if that ends up to be the best solution).
You can't toggle scss files at runtime, since they are already compiled to css.
I would go with CSS custom properties (sometimes called CSS variables) instead of pure Sass variables.
Example:
:root {
--background: lightblue;
}
.night-mode {
--background: darkblue;
}
.component {
background-color: var(--background);
}
Toggle the class .night-mode on with javascript depending on the time of day.
You may of course feed your CSS custom properties from Sass variables in your scss files:
$bg-day: lightblue;
$bg-night: darkblue;
:root {
--background: $bg-day;
}
.night-mode {
-- background: $bg-night;
}
.component {
background-color: var(--background);
}
Okay that title may not have been too clear, I am building a site for a client that will allow his clients to sell his merchandise. We will call his clients dealers. The dealers want to be able to change the logo and color scheme of the site to match their site. I do not want to go to every single div and table etc. and create a field in the database for it but at the same time I can't let them have full control over the CSS and potentially demolish what their site looks like.
What is the best way to handle this and why?
You can use SASS, http://sass-lang.com/, to achieve this.
custom.scss: - This is what you give to the clients to customize as they want to
/* COLORS */
$backgroundColor: #bada55;
$h1color: #red;
$navigationBackground: #yellow;
$navigationText: #black;
$navigationHover: #red;
$navigationFont: Tahoma;
...etc..
/* WIDGETS */
$arcticleBorderRadius: 5px;
...etc...
/* OTHER CATEGORIES */
In your app.scss import the custom.scss:
#import "custom.scss";
/* YOUR "PRIVATE" CSS RULES /*
body {
background-color: $backgroundColor;
}
aside#nav {
background-color: $navigationBackground;
color: navigationText;
> ul > li:hover {
background-color: $navigationHover;
}
}
/* etc, etc */
You can also use functions to lighten, darken, invert the base colors the customer can overide in custom.scss.
The "workflow" can be:
Customer overrides what they want, and what is available in custom.scss.
You get the custom.scss from the client, compiles a new css, e.g. acme-app.css.
The client calls the site with a request attribute "acme", or a path-variable http://www.myawesomesite.com/acme, in the url that identifies which generated css to load.
After reviewing the options given here and thinking hard about this I have decided that the truly best option for my situation is in fact limiting the items that people are able to change the color of and just store the options in the database. It is more work to begin with but saves on issues in the future