This tutorial will demonstrate how to define a dark theme template using CSS rules.
To create a Seismic Widget, see the Seismic Widget tutorial.
The Seismic widget's default settings create a light theme template with a white background.
# Creating a Dark Theme Using CSS
Seismic Widget can be styled using CSS styles and the setCss method. Use CSS rules to modify background, title, axes, and scrollbars.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { AnnotationLocation } from "@int/geotoolkit/layout/AnnotationLocation.ts";
import { Alignment } from "@int/geotoolkit/layout/BoxLayout.ts";
import { ColorBarLocation } from "@int/geotoolkit/controls/shapes/ColorBarLocation.ts";
import { SeismicWidget } from "@int/geotoolkit/seismic/widgets/SeismicWidget.ts";
import { NormalizationType } from "@int/geotoolkit/seismic/pipeline/NormalizationType.ts";
import { SeismicColors } from "@int/geotoolkit/seismic/util/SeismicColors.ts";
import { SeismicPipeline } from "@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts";
import { FieldDesc } from "@int/geotoolkit/seismic/data/FieldDesc.ts";
import { MemoryReader } from "@int/geotoolkit/seismic/data/MemoryReader.ts";
function generateDarkCSSRules() {
return `
*[id="SEISMIC_VIEW_CORNER"]{
fillstyle: #212121;
linestyle: #212121;
}
*[id="SEISMIC_VIEW_CORNER_ICON"]{
fillstyle: #212121;
linestyle: #212121;
}
*[id="HEADER_VIEW_CORNER"]{
fillstyle: #212121;
linestyle: #212121;
}
*[id="HEADER_VIEW_CORNER_ICON"]{
fillstyle: #212121;
linestyle: #212121;
}
.VerticalScroll{
fillstyle: #303030;
caretlinestyle: black;
caretfillstyle: #666666;
arrowfillstyle: #444477;
arrowlinestyle: #7777AA;
}
.HorizontalScroll{
fillstyle: #303030;
caretlinestyle: black;
caretfillstyle: #666666;
arrowfillstyle: #444477;
arrowlinestyle: #7777AA;
}
*[cssclass~="seismic-status"]{
fillstyle: #303030;
}
.Text {
textstyle-color: rgba(255,255,255,.3);
}
.Text[cssclass="floating-colorbar-label"] {
textstyle-color: black;
}
.geotoolkit.axis.Axis {
tickgenerator-major-tickstyle-color: rgba(255,255,255,.3);
tickgenerator-major-labelstyle-color: rgba(255,255,255,.3);
tickgenerator-major-labelstyle-font: 11px Roboto;
tickgenerator-edge-labelstyle-color: rgba(255,255,255,.3);
tickgenerator-edge-tickstyle-color: rgba(255,255,255,.3);
tickgenerator-edge-labelstyle-font: 11px Roboto;
baselinestyle: 1 solid rgba(255,255,255,.3);
}
.geotoolkit.axis.Grid {
vtg-major-tickstyle-color: rgba(255,255,255,.3);
htg-major-tickstyle-color: rgba(255,255,255,.3);
htg-minor-tickvisible: false;
vtg-minor-tickvisible: false;
}
.SeismicWidget {
fillstyle: #212121;
tools-crosshair-linestyle: white;
}
.TraceHeaderChartWidget {
fillstyle: #212121;
}
.TraceHeaderViewWidget {
fillstyle: #212121;
}
.TableView {
fillstyle: #212121;
header-headerfillstyle: #212121;
header-gridstyle: rgba(255,255,255,.3);
content-evenfillstyle: null;
content-oddfillstyle: null;
content-gridstyle: rgba(255,255,255,.3);
index-evenfillstyle: null;
index-oddfillstyle: null;
index-gridstyle: rgba(255,255,255,.3);
highlightrowfillstyle: rgba(100,100,100, 0.5);
highlightcolumnfillstyle: rgba(100,100,100, 0.5);
}
`;
}
const createReader = function() {
const sampleRate = 1;
const sampleCount = 600;
const traceCount = 500;
const reader = new MemoryReader({
"numberoftraces": traceCount,
"numberofsamples": sampleCount,
"samplerate": sampleRate
}).setTraceProcessor({
"getTraceData": function(reader2, trace, traceId) {
for (let i = 0; i < sampleCount; i++) {
trace[i] = Math.sin((i / 10 + traceId / 4) * Math.PI);
}
},
"getDataStatistics": function() {
return {
"average": 0,
"min": -1,
"max": 1,
"rms": Math.sqrt(2) / 2
};
},
"getTraceHeaderFields": function() {
return [
new FieldDesc(0, "TSSN"),
new FieldDesc(1, "XLINE"),
new FieldDesc(2, "INLINE")
];
},
"getTraceHeader": function(reader2, header, headerData, traceId) {
const data = headerData;
data[0] = traceId + 80;
data[1] = traceId + 1085;
data[2] = 2085;
}
});
return reader;
};
const createPipeline = function(reader) {
const pipeline = new SeismicPipeline({
"name": "MemorySeismic",
"reader": reader,
"statistics": reader.getStatistics()
});
const colorProvider = SeismicColors.getDefault();
pipeline.setOptions({
"colors": {
"colormap": colorProvider.createNamedColorMap("RedWhiteBlack")
},
"normalization": {
"type": NormalizationType.Limits,
"limits": {
"min": -1,
"max": 1
}
},
"plot": {
"type": {
"wiggle": true,
"negativecolorfill": true,
"positivecolorfill": true
},
"decimationspacing": 5
}
});
return pipeline;
};
const createWidget = function(pipeline) {
const widget = new SeismicWidget({
"pipeline": pipeline,
"layouttype": "inside",
"statusbar": {
"visible": true
},
"table": {
"visible": true,
"size": 100,
"headers": [
"INLINE",
{
"name": "XLINE",
"title": "XLINE"
}
]
},
"colorbar": {
"axis": {
"size": 30,
"tickgenerator": {
"edge": {
"tickvisible": false,
"labelvisible": false
}
}
},
"title": {
"size": 20
},
"colorbox": {
"size": 10
},
"location": ColorBarLocation.West,
"maxheight": "90%",
"alignment": Alignment.Center
},
"title": {
"text": "Seismic Widget",
"location": AnnotationLocation.North,
"visible": true
},
"axes": {
"samples": {
"size": 50
}
}
}).setScaleOptions({
"tracescale": 3,
"samplescale": 30,
"deviceunit": "in",
"sampleunit": "ms"
});
widget.setCss(
generateDarkCSSRules()
);
return widget;
};
function createScene(canvas) {
const reader = createReader();
const pipeline = createPipeline(reader);
const widget = createWidget(pipeline);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));