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
Related
I am working on Tables using antD. By default, whenever you hover a Table Row in antD it gets a slight gray color transition as a highlight. I wish to change the color. I did this using less:
.ant-table-row {
&:hover {
background-color: blue;
}
}
(NOTE: the actual color doesn't matter. it's just an example)
Whenever hovering the Row, it becomes Blue, as set, for a slight second and then becomes light gray again...
Checking the element CSS, via chrome tools, there is NO other :hover CSS for that object other than the blue color I added. Yet for some reason, this doesn't work...
In addition, tried using rowClassName to give a custom class and using it with the &:hover with the same results.
Here's a gif that shows the issue in action
Also a working example (online): https://codesandbox.io/s/bold-cache-w22lg?file=/src/App.js
replace with the following:
.ant-table-row:hover td{
background-color: blue!important;
}
Here two think
put your custom style file below all style file
add !important link below
.ant-table-row { &:hover { background-color: blue !important ; } }
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'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.)?
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");