Using native-base Modal and theming. See their theme/components/modal.ts for a reference as to what components make up a Modal and their theme.
So I'm trying to change the modal theme colors like so:
const theme = extendTheme({
...
components: {
ModalHeader: {
baseStyle: {
_dark: {
bg: "gray.700",
color: "warmGray.50",
},
},
},
ModalBody: {
baseStyle: {
_dark: {
bg: "gray.700",
color: "coolGray.300",
},
},
},
ModalFooter: {
baseStyle: {
_dark: {
bg: "gray.600",
color: "text.50",
},
},
},
ModalCloseButton: {
baseStyle: {
_dark: {
_icon: {
color: "coolGray.100",
},
},
},
},
},
});
I want to give the divider a color of gray.600 (the same as ModalFooter). However, I don't see ModalDivider as a component to color. Furthermore, the divider is no longer visible once I apply the above theme:
my modal with theme applied and missing divider. I tried also coloring ModalContent but that did not help either.
Ideally, I'd like the divider to be seen like in their docs but with my colors.
Here is their modal in dark mode:
native-base xl modal in dark mode where you can see the divider
The answer lies in borderColor for ModalHeader. Change it like so:
const theme = extendTheme({
...
components: {
ModalHeader: {
...
baseStyle: {
...
_dark: {
...
borderColor: "blue.500",
},
},
},
},
});
Related
Chart has Linear and Logarithmic buttons. How to get the one which is active to be highlighted? Code below changes colour on hover only.
https://jsfiddle.net/stgk1mrx/
navigation: {
buttonOptions: {
theme: {
states: {
hover: {
fill: '#00f'
},
select: {
fill: '#f00'
}
}
}
}
myButton: {
symbol: 'circle',
symbolStrokeWidth: 1,
symbolFill: '#bada55',
symbolStroke: '#330033',
onclick: function() {
// Something happens here
var self = this.exportSVGElements[2]; // 0-1 is first button, 2-3 is second button etc.
self.setState(2);
console.log('clicked!');
},
theme: {
states: {
hover: {
fill: '#FF0000'
},
select: {
fill: '#0000FF'
}
}
},
http://jsfiddle.net/yTRxZ/5/
By setting select state you will get color changed after click on button. You also need to call setState() for that button. Take a look at the example
Found a couple of posts that came close to solving this. I'm loading a chart into a widget and it's not filling it, instead it's centered and extended past the widget - about only 1/3 of the pie chart shows for example.
I found the resize options for gridster and it gets me almost there... the same problem exists when I load the page, but when I resize the widget the chart fills it in perfectly.
I've tried aligning the chart, removing width and height settings, addeing resize and stop elements to gridsters..
var gridster = null;
$(document).ready(function () {
gridster = $(".gridster ul").gridster({
widget_base_dimensions: ['auto', 140],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 6,
widget_margins: [5, 5],
resize: {
enabled: true,
resize: function (e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
},
stop: function(e, ui, $widget) {
Highcharts.charts[0].reflow(); // reflow the first chart...
}
}
}).data('gridster');
$('.gridster ul').css({'padding': '0'});
});
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'User data',
style: {"fontSize": "15px" , "color":"red"},
},
subtitle: {
text: 'Source: Click the slices to view categories.'
},
plotOptions: {
pie: {
showInLegend: false,
dataLabels: {
formatter: function(){
console.log(this);
if (this.percentage > 5)
return this.key + ': ' + this.y;
else
this.point.visible = false;
return '';
}
}
},
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
when page loads the pie chart is sized to fit into the gridster widget.
Add one div wrapper around widget and add class which having height and width of that widget. It will render your highchart graph in that wrapper only.
<div class="size-1x1">
Render your graph code here
</div>
CSS:
.size-1x1 {
height:100px;
width: 120px;
}
Consider the Highstocks async data loading example. I want to hide the preview and show just the scroll bar. So I set enabled to false in the chart configuration:
navigator: {
enabled: false,
adaptToUpdatedData: false,
...
This will cause the adaptToUpdatedData option not to work as described, i.e., when zooming the width of the scroll bar will be always 100%. Is it possible to keep the same behavior of the demo while hiding the preview?
You could visually hide all the elements of the navigator instead of disabling it.
For example (JSFiddle):
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
},
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});
You might notice that the cursor still changes where the handles would be. If you want to get rid of this you could prevent the drawing of the handles all together.
For example (JSFiddle):
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
});
}(Highcharts));
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});
Is it possible to format the exporting "contextButton" in Highcharts? (Specifically to look more like other buttons on a page.) I do not mean creating a new button with new functionality, I mean the exact functionality of the standard exporting contextButton, I just want to change basic css like colors. Thanks.
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
color: '#f00', // this does nothing
},
},
The documentation for the context button is at...
http://api.highcharts.com/highcharts#exporting.buttons.contextButton
If you want to change the color of the symbol on the button then use the symbol attributes. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
symbolFill: '#f88',
symbolStroke: '#f00'
}
}
}
If you want to change the color of the button then use the theme attribute. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
theme: {
fill: '#ddd',
stroke: '#888',
states: {
hover: {
fill: '#fcc',
stroke: '#f00'
},
select: {
fill: '#cfc',
stroke: '#0f0'
}
}
}
}
}
}
In Highcharts3 the export button uses states.hover or states.select to extend default behavior. This fiddle shows how to change the button background color and border color. I tried to use it to change the symbol color, but no luck:
theme: {
states : {
hover : {
symbolStroke: '#4572A5'
},
select : {
symbolStroke: '#4572A5'
}
}
Is there any way to change the color of the symbol?
Probably it is possibly bug, so I reported here: https://github.com/highslide-software/highcharts.com/issues/2218
This might help
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
From Highchart API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/navigation/buttonoptions-theme/