Skip to content

Commit f175f47

Browse files
martinRenoumartinRenou
authored
Merge pull request #383 from martinRenou/add_themes_support
Add jlab themes support
2 parents fda2836 + 87e969f commit f175f47

File tree

5 files changed

+618
-29
lines changed

5 files changed

+618
-29
lines changed

‎js/src/index.js

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
// Load css
2-
require('leaflet/dist/leaflet.css');
3-
require('leaflet-draw/dist/leaflet.draw.css');
4-
require('leaflet.markercluster/dist/MarkerCluster.css');
5-
require('leaflet.markercluster/dist/MarkerCluster.Default.css');
6-
require('leaflet-measure/dist/leaflet-measure.css');
7-
require('leaflet-fullscreen/dist/leaflet.fullscreen.css');
8-
require('./jupyter-leaflet.css');
9-
10-
// Forcibly load the marker icon images to be in the bundle.
11-
require('leaflet/dist/images/marker-shadow.png');
12-
require('leaflet/dist/images/marker-icon.png');
13-
require('leaflet/dist/images/marker-icon-2x.png');
14-
151
// Export everything from jupyter-leaflet and the npm package version number.
162
var _oldL = window.L;
173
module.exports = require('./jupyter-leaflet.js');
@@ -22,4 +8,3 @@ if (_oldL !== undefined && _oldL !== window.L) {
228
console.log("Existing `L` detected, running ipyleaflet's Leaflet in no-conflict mode as `ipyL`");
239
ipyL = L.noConflict();
2410
}
25-

‎js/src/jupyter-leaflet.css

Lines changed: 96 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,6 @@
1414
height: 100%;
1515
}
1616

17-
.leaflet-widgetcontrol {
18-
background: var(--jp-layout-color1);
19-
border-radius: 4.5px;
20-
box-shadow: 4px 5px 8px 0px #9e9e9e
21-
}
22-
23-
.leaflet-control-velocity.leaflet-control {
24-
background: rgba(255, 255, 255, 0.7);
25-
margin: 0;
26-
padding: 0 5px;
27-
color: #333;
28-
font-size: 11px;
29-
}
30-
3117
/* Leaflet crispness override */
3218
.crisp-image {
3319
/* Preserve crisp pixels with scaled up images */
@@ -40,3 +26,99 @@
4026
image-rendering: pixelated; /* CSS4 Proposed */
4127
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
4228
}
29+
30+
/* JupyterLab themes support */
31+
/* Popup */
32+
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
33+
background-color: var(--jp-layout-color1);
34+
color: var(--jp-ui-font-color1);
35+
border-width: var(--jp-border-width);
36+
border-color: var(--jp-border-color1);
37+
}
38+
39+
/* Basic controls */
40+
.leaflet-bar a, .leaflet-bar a:hover {
41+
background-color: var(--jp-layout-color1);
42+
color: var(--jp-ui-font-color1);
43+
border-width: var(--jp-border-width);
44+
border-color: var(--jp-border-color1);
45+
}
46+
47+
.leaflet-bar a:hover {
48+
background-color: var(--jp-layout-color2);
49+
color: var(--jp-ui-font-color2);
50+
}
51+
52+
.leaflet-bar a.leaflet-disabled {
53+
background-color: var(--jp-layout-color3);
54+
color: var(--jp-ui-font-color3);
55+
}
56+
57+
/* Widget control */
58+
.leaflet-widgetcontrol {
59+
background: var(--jp-layout-color1);
60+
border-radius: 4.5px;
61+
box-shadow: 4px 5px 8px 0px #9e9e9e
62+
}
63+
64+
/* SplitMap control */
65+
.leaflet-sbs-divider {
66+
background-color: var(--jp-layout-color1);
67+
}
68+
69+
.leaflet-sbs-range::-webkit-slider-thumb {
70+
background-color: var(--jp-layout-color1);
71+
border-width: var(--jp-border-width);
72+
border-color: var(--jp-border-color1);
73+
}
74+
75+
.leaflet-sbs-range::-ms-thumb {
76+
background-color: var(--jp-layout-color1);
77+
border-width: var(--jp-border-width);
78+
border-color: var(--jp-border-color1);
79+
}
80+
81+
.leaflet-sbs-range::-moz-range-thumb {
82+
background-color: var(--jp-layout-color1);
83+
border-width: var(--jp-border-width);
84+
border-color: var(--jp-border-color1);
85+
}
86+
87+
/* Measure control */
88+
.leaflet-control-measure {
89+
background-color: var(--jp-layout-color1);
90+
border-width: var(--jp-border-width);
91+
border-color: var(--jp-border-color1);
92+
color: var(--jp-ui-font-color1);
93+
}
94+
95+
/* Layers control */
96+
.leaflet-control-layers {
97+
background-color: var(--jp-layout-color1);
98+
border-width: var(--jp-border-width);
99+
border-color: var(--jp-border-color1);
100+
color: var(--jp-ui-font-color1);
101+
}
102+
103+
.leaflet-control-layers-expanded {
104+
background-color: var(--jp-layout-color1);
105+
border-width: var(--jp-border-width);
106+
border-color: var(--jp-border-color1);
107+
color: var(--jp-ui-font-color1);
108+
}
109+
110+
/* Attribution control */
111+
.leaflet-container .leaflet-control-attribution {
112+
background-color: var(--jp-layout-color1);
113+
border-width: var(--jp-border-width);
114+
border-color: var(--jp-border-color1);
115+
color: var(--jp-ui-font-color1);
116+
}
117+
118+
.leaflet-control-velocity.leaflet-control {
119+
background: var(--jp-layout-color1);
120+
margin: 0;
121+
padding: 0 5px;
122+
color: var(--jp-ui-font-color1);
123+
font-size: 11px;
124+
}

‎js/src/jupyter-leaflet.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,22 @@ var widgetcontrol = require('./controls/WidgetControl.js')
3535
//Map
3636
var map = require('./Map.js');
3737

38+
// Load css
39+
require('leaflet/dist/leaflet.css');
40+
require('leaflet-draw/dist/leaflet.draw.css');
41+
require('leaflet.markercluster/dist/MarkerCluster.css');
42+
require('leaflet.markercluster/dist/MarkerCluster.Default.css');
43+
require('leaflet-measure/dist/leaflet-measure.css');
44+
require('leaflet-fullscreen/dist/leaflet.fullscreen.css');
45+
require('./jupyter-leaflet.css');
46+
require('./theme/materialcolors.css');
47+
require('./theme/labvariables.css');
48+
49+
// Forcibly load the marker icon images to be in the bundle.
50+
require('leaflet/dist/images/marker-shadow.png');
51+
require('leaflet/dist/images/marker-icon.png');
52+
require('leaflet/dist/images/marker-icon-2x.png');
53+
3854
//Exports
3955
module.exports = {
4056
// views

‎js/src/theme/labvariables.css

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
/*-----------------------------------------------------------------------------
2+
| Copyright (c) Jupyter Development Team.
3+
| Distributed under the terms of the Modified BSD License.
4+
|----------------------------------------------------------------------------*/
5+
6+
/*
7+
This file is copied from the JupyterLab project to define default styling for
8+
when the widget styling is compiled down to eliminate CSS variables. We make one
9+
change - we comment out the font import below.
10+
*/
11+
12+
@import "./materialcolors.css";
13+
14+
/*
15+
The following CSS variables define the main, public API for styling JupyterLab.
16+
These variables should be used by all plugins wherever possible. In other
17+
words, plugins should not define custom colors, sizes, etc unless absolutely
18+
necessary. This enables users to change the visual theme of JupyterLab
19+
by changing these variables.
20+
21+
Many variables appear in an ordered sequence (0,1,2,3). These sequences
22+
are designed to work well together, so for example, `--jp-border-color1` should
23+
be used with `--jp-layout-color1`. The numbers have the following meanings:
24+
25+
* 0: super-primary, reserved for special emphasis
26+
* 1: primary, most important under normal situations
27+
* 2: secondary, next most important under normal situations
28+
* 3: tertiary, next most important under normal situations
29+
30+
Throughout JupyterLab, we are mostly following principles from Google's
31+
Material Design when selecting colors. We are not, however, following
32+
all of MD as it is not optimized for dense, information rich UIs.
33+
*/
34+
35+
36+
/*
37+
* Optional monospace font for input/output prompt.
38+
*/
39+
/* Commented out in ipywidgets since we don't need it. */
40+
/* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); */
41+
42+
/*
43+
* Added for compabitility with output area
44+
*/
45+
:root {
46+
--jp-icon-search: none;
47+
--jp-ui-select-caret: none;
48+
}
49+
50+
51+
:root {
52+
53+
/* Borders
54+
55+
The following variables, specify the visual styling of borders in JupyterLab.
56+
*/
57+
58+
--jp-border-width: 1px;
59+
--jp-border-color0: var(--md-grey-700);
60+
--jp-border-color1: var(--md-grey-500);
61+
--jp-border-color2: var(--md-grey-300);
62+
--jp-border-color3: var(--md-grey-100);
63+
64+
/* UI Fonts
65+
66+
The UI font CSS variables are used for the typography all of the JupyterLab
67+
user interface elements that are not directly user generated content.
68+
*/
69+
70+
--jp-ui-font-scale-factor: 1.2;
71+
--jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
72+
--jp-ui-font-size1: 13px; /* Base font size */
73+
--jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
74+
--jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
75+
--jp-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
76+
--jp-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
77+
78+
/* Use these font colors against the corresponding main layout colors.
79+
In a light theme, these go from dark to light.
80+
*/
81+
82+
--jp-ui-font-color0: rgba(0,0,0,1.0);
83+
--jp-ui-font-color1: rgba(0,0,0,0.8);
84+
--jp-ui-font-color2: rgba(0,0,0,0.5);
85+
--jp-ui-font-color3: rgba(0,0,0,0.3);
86+
87+
/* Use these against the brand/accent/warn/error colors.
88+
These will typically go from light to darker, in both a dark and light theme
89+
*/
90+
91+
--jp-inverse-ui-font-color0: rgba(255,255,255,1);
92+
--jp-inverse-ui-font-color1: rgba(255,255,255,1.0);
93+
--jp-inverse-ui-font-color2: rgba(255,255,255,0.7);
94+
--jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
95+
96+
/* Content Fonts
97+
98+
Content font variables are used for typography of user generated content.
99+
*/
100+
101+
--jp-content-font-size: 13px;
102+
--jp-content-line-height: 1.5;
103+
--jp-content-font-color0: black;
104+
--jp-content-font-color1: black;
105+
--jp-content-font-color2: var(--md-grey-700);
106+
--jp-content-font-color3: var(--md-grey-500);
107+
108+
--jp-ui-font-scale-factor: 1.2;
109+
--jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor));
110+
--jp-ui-font-size1: 13px; /* Base font size */
111+
--jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor));
112+
--jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor));
113+
114+
--jp-code-font-size: 13px;
115+
--jp-code-line-height: 1.307;
116+
--jp-code-padding: 5px;
117+
--jp-code-font-family: monospace;
118+
119+
120+
/* Layout
121+
122+
The following are the main layout colors use in JupyterLab. In a light
123+
theme these would go from light to dark.
124+
*/
125+
126+
--jp-layout-color0: white;
127+
--jp-layout-color1: white;
128+
--jp-layout-color2: var(--md-grey-200);
129+
--jp-layout-color3: var(--md-grey-400);
130+
131+
/* Brand/accent */
132+
133+
--jp-brand-color0: var(--md-blue-700);
134+
--jp-brand-color1: var(--md-blue-500);
135+
--jp-brand-color2: var(--md-blue-300);
136+
--jp-brand-color3: var(--md-blue-100);
137+
138+
--jp-accent-color0: var(--md-green-700);
139+
--jp-accent-color1: var(--md-green-500);
140+
--jp-accent-color2: var(--md-green-300);
141+
--jp-accent-color3: var(--md-green-100);
142+
143+
/* State colors (warn, error, success, info) */
144+
145+
--jp-warn-color0: var(--md-orange-700);
146+
--jp-warn-color1: var(--md-orange-500);
147+
--jp-warn-color2: var(--md-orange-300);
148+
--jp-warn-color3: var(--md-orange-100);
149+
150+
--jp-error-color0: var(--md-red-700);
151+
--jp-error-color1: var(--md-red-500);
152+
--jp-error-color2: var(--md-red-300);
153+
--jp-error-color3: var(--md-red-100);
154+
155+
--jp-success-color0: var(--md-green-700);
156+
--jp-success-color1: var(--md-green-500);
157+
--jp-success-color2: var(--md-green-300);
158+
--jp-success-color3: var(--md-green-100);
159+
160+
--jp-info-color0: var(--md-cyan-700);
161+
--jp-info-color1: var(--md-cyan-500);
162+
--jp-info-color2: var(--md-cyan-300);
163+
--jp-info-color3: var(--md-cyan-100);
164+
165+
/* Cell specific styles */
166+
167+
--jp-cell-padding: 5px;
168+
--jp-cell-editor-background: #f7f7f7;
169+
--jp-cell-editor-border-color: #cfcfcf;
170+
--jp-cell-editor-background-edit: var(--jp-ui-layout-color1);
171+
--jp-cell-editor-border-color-edit: var(--jp-brand-color1);
172+
--jp-cell-prompt-width: 100px;
173+
--jp-cell-prompt-font-family: 'Roboto Mono', monospace;
174+
--jp-cell-prompt-letter-spacing: 0px;
175+
--jp-cell-prompt-opacity: 1.0;
176+
--jp-cell-prompt-opacity-not-active: 0.4;
177+
--jp-cell-prompt-font-color-not-active: var(--md-grey-700);
178+
/* A custom blend of MD grey and blue 600
179+
* See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
180+
--jp-cell-inprompt-font-color: #307FC1;
181+
/* A custom blend of MD grey and orange 600
182+
* https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
183+
--jp-cell-outprompt-font-color: #BF5B3D;
184+
185+
/* Notebook specific styles */
186+
187+
--jp-notebook-padding: 10px;
188+
--jp-notebook-scroll-padding: 100px;
189+
190+
/* Console specific styles */
191+
192+
--jp-console-background: var(--md-grey-100);
193+
194+
/* Toolbar specific styles */
195+
196+
--jp-toolbar-border-color: var(--md-grey-400);
197+
--jp-toolbar-micro-height: 8px;
198+
--jp-toolbar-background: var(--jp-layout-color0);
199+
--jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24);
200+
--jp-toolbar-header-margin: 4px 4px 0px 4px;
201+
--jp-toolbar-active-background: var(--md-grey-300);
202+
}

0 commit comments

Comments
 (0)