@difizen/libro-codemirror 0.0.2-alpha.0

package/src/style/variables.css

@@ -0,0 +1,405 @@
+/* stylelint-disable number-max-precision */
+
+/*
+The following CSS variables define the main, public API for styling JupyterLab.
+These variables should be used by all plugins wherever possible. In other
+words, plugins should not define custom colors, sizes, etc unless absolutely
+necessary. This enables users to change the visual theme of JupyterLab
+by changing these variables.
+
+Many variables appear in an ordered sequence (0,1,2,3). These sequences
+are designed to work well together, so for example, `--jp-border-color1` should
+be used with `--jp-layout-color1`. The numbers have the following meanings:
+
+* 0: super-primary, reserved for special emphasis
+* 1: primary, most important under normal situations
+* 2: secondary, next most important under normal situations
+* 3: tertiary, next most important under normal situations
+
+Throughout JupyterLab, we are mostly following principles from Google's
+Material Design when selecting colors. We are not, however, following
+all of MD as it is not optimized for dense, information rich UIs.
+*/
+
+:root {
+  /* Elevation
+   *
+   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
+   *
+   * https://github.com/material-components/material-components-web
+   * https://material-components-web.appspot.com/elevation.html
+   */
+
+  --jp-shadow-base-lightness: 0;
+  --jp-shadow-umbra-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    20%
+  );
+  --jp-shadow-penumbra-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    14%
+  );
+  --jp-shadow-ambient-color: rgba(
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    var(--jp-shadow-base-lightness),
+    12%
+  );
+  --jp-elevation-z0: none;
+  --jp-elevation-z1: 0 2px 1px -1px var(--jp-shadow-umbra-color),
+    0 1px 1px 0 var(--jp-shadow-penumbra-color),
+    0 1px 3px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z2: 0 3px 1px -2px var(--jp-shadow-umbra-color),
+    0 2px 2px 0 var(--jp-shadow-penumbra-color),
+    0 1px 5px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z4: 0 2px 4px -1px var(--jp-shadow-umbra-color),
+    0 4px 5px 0 var(--jp-shadow-penumbra-color),
+    0 1px 10px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z6: 0 3px 5px -1px var(--jp-shadow-umbra-color),
+    0 6px 10px 0 var(--jp-shadow-penumbra-color),
+    0 1px 18px 0 var(--jp-shadow-ambient-color);
+  --jp-elevation-z8: 0 5px 5px -3px var(--jp-shadow-umbra-color),
+    0 8px 10px 1px var(--jp-shadow-penumbra-color),
+    0 3px 14px 2px var(--jp-shadow-ambient-color);
+  --jp-elevation-z12: 0 7px 8px -4px var(--jp-shadow-umbra-color),
+    0 12px 17px 2px var(--jp-shadow-penumbra-color),
+    0 5px 22px 4px var(--jp-shadow-ambient-color);
+  --jp-elevation-z16: 0 8px 10px -5px var(--jp-shadow-umbra-color),
+    0 16px 24px 2px var(--jp-shadow-penumbra-color),
+    0 6px 30px 5px var(--jp-shadow-ambient-color);
+  --jp-elevation-z20: 0 10px 13px -6px var(--jp-shadow-umbra-color),
+    0 20px 31px 3px var(--jp-shadow-penumbra-color),
+    0 8px 38px 7px var(--jp-shadow-ambient-color);
+  --jp-elevation-z24: 0 11px 15px -7px var(--jp-shadow-umbra-color),
+    0 24px 38px 3px var(--jp-shadow-penumbra-color),
+    0 9px 46px 8px var(--jp-shadow-ambient-color);
+
+  /* Borders
+   *
+   * The following variables, specify the visual styling of borders in JupyterLab.
+   */
+
+  --jp-border-width: 1px;
+  --jp-border-color0: var(--md-grey-400);
+  --jp-border-color1: var(--md-grey-400);
+  --jp-border-color2: var(--md-grey-300);
+  --jp-border-color3: var(--md-grey-200);
+  --jp-inverse-border-color: var(--md-grey-600);
+  --jp-border-radius: 2px;
+
+  /* UI Fonts
+   *
+   * The UI font CSS variables are used for the typography all of the JupyterLab
+   * user interface elements that are not directly user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-ui-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
+   */
+
+  --jp-ui-font-scale-factor: 1.2;
+  --jp-ui-font-size0: 0.83333em;
+  --jp-ui-font-size1: 13px; /* Base font size */
+  --jp-ui-font-size2: 1.2em;
+  --jp-ui-font-size3: 1.44em;
+  --jp-ui-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
+    helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /*
+   * Use these font colors against the corresponding main layout colors.
+   * In a light theme, these go from dark to light.
+   */
+
+  /* Defaults use Material Design specification */
+  --jp-ui-font-color0: rgba(0, 0, 0, 100%);
+  --jp-ui-font-color1: rgba(0, 0, 0, 87%);
+  --jp-ui-font-color2: rgba(0, 0, 0, 54%);
+  --jp-ui-font-color3: rgba(0, 0, 0, 38%);
+
+  /*
+   * Use these against the brand/accent/warn/error colors.
+   * These will typically go from light to darker, in both a dark and light theme.
+   */
+
+  --jp-ui-inverse-font-color0: rgba(255, 255, 255, 100%);
+  --jp-ui-inverse-font-color1: rgba(255, 255, 255, 100%);
+  --jp-ui-inverse-font-color2: rgba(255, 255, 255, 70%);
+  --jp-ui-inverse-font-color3: rgba(255, 255, 255, 50%);
+
+  /* Content Fonts
+   *
+   * Content font variables are used for typography of user generated content.
+   *
+   * The font sizing here is done assuming that the body font size of --jp-content-font-size1
+   * is applied to a parent element. When children elements, such as headings, are sized
+   * in em all things will be computed relative to that body size.
+   */
+
+  --jp-content-line-height: 1.6;
+  --jp-content-font-scale-factor: 1.2;
+  --jp-content-font-size0: 0.83333em;
+  --jp-content-font-size1: 14px; /* Base font size */
+  --jp-content-font-size2: 1.2em;
+  --jp-content-font-size3: 1.44em;
+  --jp-content-font-size4: 1.728em;
+  --jp-content-font-size5: 2.0736em;
+
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-content-presentation-font-size1: 17px;
+  --jp-content-heading-line-height: 1;
+  --jp-content-heading-margin-top: 1.2em;
+  --jp-content-heading-margin-bottom: 0.8em;
+  --jp-content-heading-font-weight: 500;
+
+  /* Defaults use Material Design specification */
+  --jp-content-font-color0: rgba(0, 0, 0, 100%);
+  --jp-content-font-color1: rgba(0, 0, 0, 87%);
+  --jp-content-font-color2: rgba(0, 0, 0, 54%);
+  --jp-content-font-color3: rgba(0, 0, 0, 38%);
+  --jp-content-link-color: var(--md-blue-700);
+  --jp-content-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI',
+    helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /*
+   * Code Fonts
+   *
+   * Code font variables are used for typography of code and other monospaces content.
+   */
+
+  --jp-code-font-size: 14px;
+  --jp-code-line-height: 20px; /* 17px for 13px base */
+  --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */
+  --jp-code-font-family-default: menlo-regular, consolas, 'DejaVu Sans Mono', monospace;
+  --jp-code-font-family: var(--jp-code-font-family-default);
+
+  /* This gives a magnification of about 125% in presentation mode over normal. */
+  --jp-code-presentation-font-size: 16px;
+
+  /* may need to tweak cursor width if you change font size */
+  --jp-code-cursor-width0: 1.4px;
+  --jp-code-cursor-width1: 2px;
+  --jp-code-cursor-width2: 4px;
+
+  /* Layout
+   *
+   * The following are the main layout colors use in JupyterLab. In a light
+   * theme these would go from light to dark.
+   */
+
+  --jp-layout-color0: transparent;
+  --jp-layout-color1: white;
+  --jp-layout-color2: var(--md-grey-200);
+  --jp-layout-color3: var(--md-grey-400);
+  --jp-layout-color4: var(--md-grey-600);
+
+  /* Inverse Layout
+   *
+   * The following are the inverse layout colors use in JupyterLab. In a light
+   * theme these would go from dark to light.
+   */
+
+  --jp-inverse-layout-color0: #111;
+  --jp-inverse-layout-color1: var(--md-grey-900);
+  --jp-inverse-layout-color2: var(--md-grey-800);
+  --jp-inverse-layout-color3: var(--md-grey-700);
+  --jp-inverse-layout-color4: var(--md-grey-600);
+
+  /* Brand/accent */
+
+  --jp-brand-color0: var(--md-blue-900);
+  --jp-brand-color1: var(--md-blue-700);
+  --jp-brand-color2: var(--md-blue-300);
+  --jp-brand-color3: var(--md-blue-100);
+  --jp-brand-color4: var(--md-blue-50);
+  --jp-accent-color0: var(--md-green-900);
+  --jp-accent-color1: var(--md-green-700);
+  --jp-accent-color2: var(--md-green-300);
+  --jp-accent-color3: var(--md-green-100);
+
+  /* State colors (warn, error, success, info) */
+
+  --jp-warn-color0: var(--md-orange-900);
+  --jp-warn-color1: var(--md-orange-700);
+  --jp-warn-color2: var(--md-orange-300);
+  --jp-warn-color3: var(--md-orange-100);
+  --jp-error-color0: var(--md-red-900);
+  --jp-error-color1: var(--md-red-700);
+  --jp-error-color2: var(--md-red-300);
+  --jp-error-color3: var(--md-red-100);
+  --jp-success-color0: var(--md-green-900);
+  --jp-success-color1: var(--md-green-700);
+  --jp-success-color2: var(--md-green-300);
+  --jp-success-color3: var(--md-green-100);
+  --jp-info-color0: var(--md-cyan-900);
+  --jp-info-color1: var(--md-cyan-700);
+  --jp-info-color2: var(--md-cyan-300);
+  --jp-info-color3: var(--md-cyan-100);
+
+  /* Cell specific styles */
+
+  --jp-cell-padding: 5px;
+  --jp-cell-collapser-width: 8px;
+  --jp-cell-collapser-min-height: 20px;
+  --jp-cell-collapser-not-active-hover-opacity: 0.6;
+  --jp-cell-editor-background: var(--md-grey-100);
+  --jp-cell-editor-border-color: var(--md-grey-300);
+  --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300);
+  --jp-cell-editor-active-background: var(--jp-layout-color0);
+  --jp-cell-editor-active-border-color: var(--jp-brand-color1);
+  --jp-cell-prompt-width: 64px;
+  --jp-cell-prompt-font-family: var(--jp-code-font-family-default);
+  --jp-cell-prompt-letter-spacing: 0;
+  --jp-cell-prompt-opacity: 1;
+  --jp-cell-prompt-not-active-opacity: 0.5;
+  --jp-cell-prompt-not-active-font-color: var(--md-grey-700);
+
+  /* A custom blend of MD grey and blue 600
+   * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */
+  --jp-cell-inprompt-font-color: #307fc1;
+
+  /* A custom blend of MD grey and orange 600
+   * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */
+  --jp-cell-outprompt-font-color: #bf5b3d;
+
+  /* Notebook specific styles */
+
+  --jp-notebook-padding: 10px;
+  --jp-notebook-select-background: var(--jp-layout-color1);
+  --jp-notebook-multiselected-color: var(--md-blue-50);
+
+  /* The scroll padding is calculated to fill enough space at the bottom of the
+  notebook to show one single-line cell (with appropriate padding) at the top
+  when the notebook is scrolled all the way to the bottom. We also subtract one
+  pixel so that no scrollbar appears if we have just one single-line cell in the
+  notebook. This padding is to enable a 'scroll past end' feature in a notebook.
+  */
+  --jp-notebook-scroll-padding: calc(
+    100% - var(--jp-code-font-size) * var(--jp-code-line-height) -
+      var(--jp-code-padding) - var(--jp-cell-padding) - 1px
+  );
+
+  /* Rendermime styles */
+
+  --jp-rendermime-error-background: #fdd;
+  --jp-rendermime-table-row-background: var(--md-grey-100);
+  --jp-rendermime-table-row-hover-background: var(--md-light-blue-50);
+
+  /* Dialog specific styles */
+
+  --jp-dialog-background: rgba(0, 0, 0, 25%);
+
+  /* Console specific styles */
+
+  --jp-console-padding: 10px;
+
+  /* Toolbar specific styles */
+
+  --jp-toolbar-border-color: var(--jp-border-color1);
+  --jp-toolbar-micro-height: 8px;
+  --jp-toolbar-background: var(--jp-layout-color1);
+  --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 24%);
+  --jp-toolbar-header-margin: 4px 4px 0 4px;
+  --jp-toolbar-active-background: var(--md-grey-300);
+
+  /* Statusbar specific styles */
+
+  --jp-statusbar-height: 24px;
+
+  /* Input field styles */
+
+  --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300);
+  --jp-input-active-background: var(--jp-layout-color1);
+  --jp-input-hover-background: var(--jp-layout-color1);
+  --jp-input-background: var(--md-grey-100);
+  --jp-input-border-color: var(--jp-inverse-border-color);
+  --jp-input-active-border-color: var(--jp-brand-color1);
+  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 30%);
+
+  /* General editor styles */
+
+  --jp-editor-selected-background: #b4ceff;
+  --jp-editor-selected-focused-background: #b9d1ff;
+  --jp-editor-cursor-color: var(--jp-ui-font-color0);
+
+  /* Code mirror specific styles */
+
+  --jp-mirror-editor-keyword-color: #0b8658;
+  --jp-mirror-editor-atom-color: #88f;
+  --jp-mirror-editor-number-color: #0b8658;
+  --jp-mirror-editor-def-color: #00f;
+  --jp-mirror-editor-variable-color: var(--md-grey-900);
+  --jp-mirror-editor-variable-2-color: #2260a0;
+  --jp-mirror-editor-variable-3-color: #085;
+  --jp-mirror-editor-punctuation-color: #2260a0;
+  --jp-mirror-editor-property-color: #2260a0;
+  --jp-mirror-editor-operator-color: #c702c7;
+  --jp-mirror-editor-comment-color: #408080;
+  --jp-mirror-editor-string-color: #ba2121;
+  --jp-mirror-editor-string-2-color: #708;
+  --jp-mirror-editor-meta-color: #c702c7;
+  --jp-mirror-editor-qualifier-color: #555;
+  --jp-mirror-editor-builtin-color: #0b8658;
+  --jp-mirror-editor-bracket-color: #997;
+  --jp-mirror-editor-tag-color: #170;
+  --jp-mirror-editor-attribute-color: #00c;
+  --jp-mirror-editor-header-color: blue;
+  --jp-mirror-editor-quote-color: #090;
+  --jp-mirror-editor-link-color: #00c;
+  --jp-mirror-editor-error-color: #f00;
+  --jp-mirror-editor-hr-color: #999;
+
+  /*
+    RTC user specific colors.
+    These colors are used for the cursor, username in the editor,
+    and the icon of the user.
+  */
+
+  --jp-collaborator-color1: #ffad8e;
+  --jp-collaborator-color2: #dac83d;
+  --jp-collaborator-color3: #72dd76;
+  --jp-collaborator-color4: #00e4d0;
+  --jp-collaborator-color5: #45d4ff;
+  --jp-collaborator-color6: #e2b1ff;
+  --jp-collaborator-color7: #ff9de6;
+
+  /* Vega extension styles */
+
+  --jp-vega-background: white;
+
+  /* Sidebar-related styles */
+
+  --jp-sidebar-min-width: 250px;
+
+  /* Search-related styles */
+
+  --jp-search-toggle-off-opacity: 0.5;
+  --jp-search-toggle-hover-opacity: 0.8;
+  --jp-search-toggle-on-opacity: 1;
+  --jp-search-selected-match-background-color: rgb(245, 200, 0);
+  --jp-search-selected-match-color: black;
+  --jp-search-unselected-match-background-color: var(--jp-inverse-layout-color0);
+  --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0);
+
+  /* Icon colors that work well with light or dark backgrounds */
+  --jp-icon-contrast-color0: var(--md-purple-600);
+  --jp-icon-contrast-color1: var(--md-green-600);
+  --jp-icon-contrast-color2: var(--md-pink-600);
+  --jp-icon-contrast-color3: var(--md-blue-600);
+
+  /* Button colors */
+  --jp-accept-color-normal: var(--md-blue-700);
+  --jp-accept-color-hover: var(--md-blue-800);
+  --jp-accept-color-active: var(--md-blue-900);
+  --jp-warn-color-normal: var(--md-red-700);
+  --jp-warn-color-hover: var(--md-red-800);
+  --jp-warn-color-active: var(--md-red-900);
+  --jp-reject-color-normal: var(--md-grey-600);
+  --jp-reject-color-hover: var(--md-grey-700);
+  --jp-reject-color-active: var(--md-grey-800);
+}

package/src/theme.ts

@@ -0,0 +1,231 @@
+import {
+  defaultHighlightStyle,
+  HighlightStyle,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+
+export const jupyterEditorTheme = EditorView.theme({
+  /**
+   * CodeMirror themes are handling the background/color in this way. This works
+   * fine for CodeMirror editors outside the notebook, but the notebook styles
+   * these things differently.
+   */
+  '&': {
+    background: 'var(--jp-layout-color0)',
+    color: 'var(--mana-libro-text-default-color)',
+  },
+
+  /* In the notebook, we want this styling to be handled by its container */
+  '.jp-CodeConsole &, .jp-Notebook &': {
+    background: 'transparent',
+  },
+
+  '.cm-content': {
+    caretColor: 'var(--jp-editor-cursor-color)',
+  },
+
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeft:
+      'var(--jp-code-cursor-width0) solid var(--mana-libro-editor-cursor-color)',
+  },
+
+  '.cm-selectionBackground, .cm-content ::selection': {
+    color: 'unset',
+    backgroundColor: 'var(--mana-libro-editor-selection-color) !important',
+  },
+
+  '&.cm-focused .cm-selectionBackground': {
+    backgroundColor: 'var(--mana-libro-editor-selection-color) !important',
+  },
+
+  '.cm-gutters': {
+    borderRight: 'unset',
+    backgroundColor: 'var(--mana-libro-input-background)',
+    // paddingBottom: '15px',
+    color: 'var(--mana-libro-editor-gutter-number-color)',
+    fontFamily: 'var(--jp-code-font-family-default)',
+    fontWeight: '400',
+    fontSize: '13px',
+    lineHeight: '20px',
+  },
+
+  '.cm-foldGutter .cm-gutterElement': {
+    width: '20px',
+    paddingRight: '8px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '.cm-line': {
+    paddingLeft: '1px',
+  },
+
+  '.cm-activeLineGutter': {
+    backgroundColor: 'var(--mana-libro-editor-activeline-color) !important',
+  },
+
+  '.cm-lineNumbers .cm-gutterElement': {
+    padding: '0 0 0 16px',
+    minWidth: '32px',
+  },
+
+  'cm-selectionMatch': {
+    backgroundColor: 'var(--mana-libro-editor-selectionMatch-color)',
+  },
+
+  '.cm-activeLine': {
+    backgroundColor: 'var(--mana-libro-editor-activeline-color)',
+  },
+
+  '.cm-scroller': {
+    fontFamily: 'var(--jp-code-font-family-default)',
+    fontWeight: '400',
+    fontSize: '13px',
+    letterSpacing: '0',
+    lineHeight: '20px',
+  },
+
+  // '.cm-editor': {
+  //   paddingTop: '24px',
+  // },
+
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--jp-search-unselected-match-background-color)',
+    color: 'var(--jp-search-unselected-match-color)',
+  },
+
+  '.cm-searchMatch span': {
+    backgroundColor: 'var(--jp-search-unselected-match-background-color)',
+    color: 'var(--jp-search-unselected-match-color)',
+  },
+
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: 'var(--jp-search-selected-match-background-color) !important',
+    color: 'var(--jp-search-selected-match-color) !important',
+  },
+
+  '.cm-searchMatch.cm-searchMatch-selected span': {
+    backgroundColor: 'var(--jp-search-selected-match-background-color) !important',
+    color: 'var(--jp-search-selected-match-color) !important',
+  },
+
+  // '.cm-content, .cm-gutter': { minHeight: '30px' },
+});
+
+export const jupyterHighlightStyle = HighlightStyle.define([
+  // Order matters - a rule will override the previous ones; important for example for in headings styles.
+  { tag: t.meta, color: 'var(--jp-mirror-editor-meta-color)' },
+  { tag: t.heading, color: 'var(--jp-mirror-editor-header-color)' },
+  {
+    tag: [t.heading1, t.heading2, t.heading3, t.heading4],
+    color: 'var(--jp-mirror-editor-header-color)',
+    fontWeight: 'bold',
+  },
+  {
+    tag: t.keyword,
+    color: 'var(--mana-libro-editor-keyword-color)',
+    fontWeight: 'bold',
+  },
+  { tag: t.atom, color: 'var(--mana-libro-editor-atom-color)' },
+  { tag: t.number, color: 'var(--mana-libro-editor-number-color)' },
+  {
+    tag: [t.definition(t.name), t.function(t.definition(t.variableName))],
+    color: 'var(--mana-libro-editor-def-color)',
+  },
+  { tag: t.variableName, color: 'var(--mana-libro-editor-variable-color)' },
+  {
+    tag: [t.special(t.variableName), t.self],
+    color: 'var(--mana-libro-editor-variable-2-color)',
+  },
+  { tag: t.punctuation, color: 'var(--mana-libro-editor-punctuation-color)' },
+  { tag: t.propertyName, color: 'var(--mana-libro-editor-property-color)' },
+  {
+    tag: t.operator,
+    color: 'var(--mana-libro-editor-operator-color)',
+    fontWeight: 'bold',
+  },
+  {
+    tag: t.comment,
+    color: 'var(--mana-libro-editor-comment-color)',
+    fontStyle: 'italic',
+  },
+  { tag: t.string, color: 'var(--mana-libro-editor-string-color)' },
+  {
+    tag: [t.labelName, t.monospace, t.special(t.string)],
+    color: 'var(--jp-mirror-editor-string-2-color)',
+  },
+  { tag: t.bracket, color: 'var(--jp-mirror-editor-bracket-color)' },
+  { tag: t.tagName, color: 'var(--jp-mirror-editor-tag-color)' },
+  { tag: t.attributeName, color: 'var(--jp-mirror-editor-attribute-color)' },
+  { tag: t.quote, color: 'var(--jp-mirror-editor-quote-color)' },
+  {
+    tag: t.link,
+    color: 'var(--jp-mirror-editor-link-color)',
+    textDecoration: 'underline',
+  },
+  { tag: [t.separator, t.derefOperator, t.paren], color: '' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+]);
+
+/**
+ * JupyterLab CodeMirror 6 theme
+ */
+export const jupyterTheme: Extension = [
+  jupyterEditorTheme,
+  syntaxHighlighting(jupyterHighlightStyle),
+];
+
+/**
+ * A namespace to handle CodeMirror 6 theme
+ *
+ * @alpha
+ */
+/**
+ * CodeMirror 6 themes
+ */
+const themeMap: Map<string, Extension> = new Map([
+  ['codemirror', [EditorView.baseTheme({}), syntaxHighlighting(defaultHighlightStyle)]],
+  ['jupyter', jupyterTheme],
+]);
+
+/**
+ * Get the default CodeMirror 6 theme for JupyterLab
+ *
+ * @alpha
+ * @returns Default theme
+ */
+export function defaultTheme(): Extension {
+  return themeMap.get('jupyter')!;
+}
+
+/**
+ * Register a new theme.
+ *
+ * @alpha
+ * @param name Theme name
+ * @param theme Codemirror 6 theme extension
+ */
+export function registerTheme(name: string, theme: Extension) {
+  themeMap.set(name, theme);
+}
+
+/**
+ * Get a theme.
+ *
+ * #### Notes
+ * It falls back to the default theme
+ *
+ * @alpha
+ * @param name Theme name
+ * @returns Theme extension
+ */
+export function getTheme(name: string): Extension {
+  const ext = themeMap.get(name);
+
+  return ext ?? defaultTheme();
+}