add black_and_white

app/App.tsx

@@ -5,7 +5,7 @@ import maplibregl from "maplibre-gl";
 import { StyleSpecification } from "maplibre-gl";
 import { Theme, layersWithCustomTheme } from "protomaps-themes-base";
 
-const THEMES = ["contrast", "bright"];
+const THEMES = ["contrast", "bright", "calm", "black_and_white"];
 
 const themeToLayers = new Map<string, Theme>();
 
@@ -15,6 +15,12 @@ themeToLayers.set("contrast", contrast);
 import bright from "../themes/bright.ts";
 themeToLayers.set("bright", bright);
 
+import calm from "../themes/calm.ts";
+themeToLayers.set("calm", calm);
+
+import black_and_white from "../themes/black_and_white.ts";
+themeToLayers.set("black_and_white", black_and_white);
+
 const getStyle = (index: number):StyleSpecification => {
   let themeName = THEMES[index];
   let layers = layersWithCustomTheme(

themes/black_and_white.ts

@@ -0,0 +1,85 @@
+import { Theme } from "protomaps-themes-base";
+
+const WHITE = "rgba(255, 255, 255, 1)";
+const BLACK = "rgba(0, 0, 0, 1)";
+
+export default <Theme>{
+  background: WHITE,
+  earth: WHITE,
+  park_a: WHITE,
+  park_b: WHITE,
+  hospital: WHITE,
+  industrial: WHITE,
+  school: WHITE,
+  wood_a: WHITE,
+  wood_b: WHITE,
+  pedestrian: WHITE,
+  scrub_a: WHITE,
+  scrub_b: WHITE,
+  glacier: WHITE,
+  sand: WHITE,
+  beach: WHITE,
+  aerodrome: WHITE,
+  runway: BLACK,
+  water: BLACK,
+  zoo: WHITE,
+  military: WHITE,
+
+  tunnel_other_casing: WHITE,
+  tunnel_minor_casing: WHITE,
+  tunnel_link_casing: WHITE,
+  tunnel_major_casing: WHITE,
+  tunnel_highway_casing: WHITE,
+  tunnel_other: BLACK,
+  tunnel_minor: BLACK,
+  tunnel_link: BLACK,
+  tunnel_major: BLACK,
+  tunnel_highway: BLACK,
+
+  pier: WHITE,
+  buildings: "rgba(218, 222, 217, 1)",
+
+  minor_service_casing: WHITE,
+  minor_casing: WHITE,
+  link_casing: WHITE,
+  major_casing_late: WHITE,
+  highway_casing_late: WHITE,
+  other: BLACK,
+  minor_service: BLACK,
+  minor_a: BLACK,
+  minor_b: BLACK,
+  link: BLACK,
+  major_casing_early: WHITE,
+  major: BLACK,
+  highway_casing_early: WHITE,
+  highway: BLACK,
+
+  railway: BLACK,
+  boundaries: BLACK,
+  waterway_label: WHITE,
+
+  bridges_other_casing: WHITE,
+  bridges_minor_casing: WHITE,
+  bridges_link_casing: WHITE,
+  bridges_major_casing: WHITE,
+  bridges_highway_casing: WHITE,
+  bridges_other: BLACK,
+  bridges_minor: BLACK,
+  bridges_link: BLACK,
+  bridges_major: BLACK,
+  bridges_highway: BLACK,
+
+  roads_label_minor:   BLACK,
+  roads_label_minor_halo:  WHITE,
+  roads_label_major: BLACK,
+  roads_label_major_halo: WHITE,
+  ocean_label: WHITE,
+  peak_label: BLACK,
+  subplace_label: BLACK,
+  subplace_label_halo: WHITE,
+  city_label: BLACK,
+  city_label_halo: WHITE,
+  state_label: BLACK,
+  state_label_halo: WHITE,
+  country_label: BLACK
+};