+
+
+ `;
+ }
+
+ firstUpdated() {
+ const root = this.shadowRoot!.querySelector(".editor") as HTMLElement;
+ const editor = CodeMirror(root, {
+ value: this.value,
+ mode: "javascript",
+ lineNumbers: true,
+ lineWrapping: true,
+ indentUnit: 4,
+ tabSize: 4,
+ indentWithTabs: true,
+ autofocus: true,
+ });
+ console.debug(editor);
+ editor.setSize("100%", `100%`);
+ this.updateTheme();
+ window
+ .matchMedia("(prefers-color-scheme: dark)")
+ .addEventListener("change", (e) => {
+ this.dark = e.matches;
+ this.updateTheme();
+ });
+ }
+
+ private updateTheme() {
+ // TODO: Generate Theme
+ }
+
+ private setColor(val: string) {
+ this.color = val;
+ this.updateTheme();
+ }
+
+ private onColor(e: Event) {
+ const target = e.target as HTMLInputElement;
+ this.setColor(target.value);
+ }
+
+ private randomColor() {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ this.setColor(color);
+ }
+
+ private toggleDark() {
+ this.dark = !this.dark;
+ this.updateTheme();
+ }
+
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "code-window": CodeWindow;
+ }
+}
+```
+
+Here we are setting up some of the editor basics to load in the styles needed for the basic layout.
+
+There are also few methods that handle updating of properties on the element such as `toggleDark` and `setColor`. When you run the application you should see the following:
+
+
+
+It doesn't look great yet, but now we can add a CodeMirror theme to import. Create a file `src/theme.ts` and update it with the following:
+
+```
+import { css } from "lit";
+
+export const codeMirrorTheme = css`
+ .CodeMirror {
+ background-color: var(--md-sys-color-background);
+ color: var(--md-sys-color-on-background);
+ }
+
+ .CodeMirror-gutters {
+ background: var(--md-sys-color-surface-variant);
+ color: var(--md-sys-color-on-surface-variant);
+ border: none;
+ }
+
+ .CodeMirror-guttermarker,
+ .CodeMirror-guttermarker-subtle,
+ .CodeMirror-linenumber {
+ color: var(--md-sys-color-on-background);
+ }
+
+ .CodeMirror-cursor {
+ border-left: 1px solid var(--md-sys-color-primary);
+ }
+ .cm-fat-cursor .CodeMirror-cursor {
+ background-color: var(--md-sys-color-background);
+ }
+ .cm-animate-fat-cursor {
+ background-color: var(--md-sys-color-background);
+ }
+
+ div.CodeMirror-selected {
+ background: var(--md-sys-color-surface-variant);
+ }
+
+ .CodeMirror-focused div.CodeMirror-selected {
+ background: var(--md-sys-color-surface-variant);
+ }
+
+ .CodeMirror-line::selection,
+ .CodeMirror-line > span::selection,
+ .CodeMirror-line > span > span::selection {
+ background: var(--md-sys-color-surface-variant);
+ }
+
+ .CodeMirror-line::-moz-selection,
+ .CodeMirror-line > span::-moz-selection,
+ .CodeMirror-line > span > span::-moz-selection {
+ background: var(--md-sys-color-surface-variant);
+ }
+
+ .CodeMirror-activeline-background {
+ background: var(--md-sys-color-surface);
+ }
+
+ .cm-keyword {
+ color: var(--md-custom-color-keyword) !important;
+ }
+
+ .cm-operator {
+ color: var(--md-custom-color-operator) !important;
+ }
+
+ .cm-variable-2 {
+ color: var(--md-custom-color-variable-2) !important;
+ }
+
+ .cm-variable-3,
+ .cm-type {
+ color: var(--md-custom-color-variable-3) !important;
+ }
+
+ .cm-builtin {
+ color: var(--md-custom-color-builtin) !important;
+ }
+
+ .cm-atom {
+ color: var(--md-custom-color-atom) !important;
+ }
+
+ .cm-number {
+ color: var(--md-custom-color-number) !important;
+ }
+
+ .cm-def {
+ color: var(--md-custom-color-def) !important;
+ }
+
+ .cm-string {
+ color: var(--md-custom-color-string) !important;
+ }
+
+ .cm-string-2 {
+ color: var(--md-custom-color-string-2) !important;
+ }
+
+ .cm-comment {
+ color: var(--md-custom-color-comment) !important;
+ }
+
+ .cm-variable {
+ color: var(--md-custom-color-variable) !important;
+ }
+
+ .cm-tag {
+ color: var(--md-custom-color-tag) !important;
+ }
+
+ .cm-meta {
+ color: var(--md-custom-color-meta) !important;
+ }
+
+ .cm-attribute {
+ color: var(--md-custom-color-attribute) !important;
+ }
+
+ .cm-property {
+ color: var(--md-custom-color-property) !important;
+ }
+
+ .cm-qualifier {
+ color: var(--md-custom-color-qualifier) !important;
+ }
+
+ .cm-variable-3,
+ .cm-type {
+ color: var(--md-custom-color-variable-3) !important;
+ }
+
+ .cm-error {
+ color: var(--md-sys-color-on-error);
+ background-color: var(--md-sys-color-error);
+ }
+
+ .CodeMirror-matchingbracket {
+ text-decoration: underline;
+ color: var(--md-sys-color-on-surface);
+ }
+`;
+```
+
+Here we are defining all the styles as [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) so we can easily update them.
+
+Now import the theme and apply the styles in the component:
+
+```
+import { codeMirrorTheme } from "./theme";
+
+@customElement("code-window")
+export class CodeWindow extends LitElement {
+ static styles = css`
+ ${unsafeCSS(codemirrorStyles)}
+ ${codeMirrorTheme}
+ ...
+```
+
+Now we need to implement the `updateTheme` method in our element:
+
+```
+updateTheme() {
+ const source = this.color;
+ const dark = this.dark;
+ const target = this.shadowRoot!.querySelector("main") as HTMLElement;
+ const properties = [
+ `--md-custom-color-keyword: #c75779;`,
+ `--md-custom-color-operator: #008800;`,
+ `--md-custom-color-variable: #90ccff;`,
+ `--md-custom-color-variable-2: #dd7700;`,
+ `--md-custom-color-variable-3: #3333bb;`,
+ `--md-custom-color-variable-3: #decb6b;`,
+ `--md-custom-color-builtin: #003388;`,
+ `--md-custom-color-atom: #bb4646;`,
+ `--md-custom-color-number: #b4c5ff;`,
+ `--md-custom-color-def: #82aaff;`,
+ `--md-custom-color-string: #ffb4a9;`,
+ `--md-custom-color-string-2: #ffb4a9;`,
+ `--md-custom-color-comment: #888888;`,
+ `--md-custom-color-tag: #000080;`,
+ `--md-custom-color-meta: #a9c7ff;`,
+ `--md-custom-color-attribute: #008080;`,
+ `--md-custom-color-property: #336699;`,
+ `--md-custom-color-qualifier: #690;`,
+ ];
+ const customColors = properties.map((property) => {
+ const [key, value] = property.split(":");
+ const name = key.trim().replace(/^--md-custom-color-/, "");
+ const color = argbFromHex(value.trim().replace(";", ""));
+ return {
+ name,
+ value: color,
+ blend: true,
+ };
+ });
+ const theme = themeFromSourceColor(argbFromHex(source), customColors);
+ applyTheme(theme, { target, dark });
+ for (const custom of theme.customColors) {
+ const name = custom.color.name;
+ const section = dark ? custom.dark : custom.light;
+ target.style.setProperty(
+ `--md-custom-color-${name}`,
+ hexFromArgb(section.color)
+ );
+ }
+}
+```
+
+Here we are using the [Material Color Utilities](https://github.com/material-foundation/material-color-utilities) package and generating a theme from a source color. We can take advantage of Custom Colors to blend the values to the theme.
+
+After the theme is generated we can apply them to the root element and have the custom properties update the editor.
+
+
+
+Changing the source color can update the theme:
+
+
+
+Changing the brightness can set the colors as well:
+
+
+
+
+
+## Conclusion
+
+If you want to learn more about building with Lit you can read the docs [here](https://lit.dev/).
+
+The source for this example can be found [here](https://github.com/rodydavis/codemirror-dynamic-theme).
+
+If you want to check out dynamic themes for VSCode I created an extension [here](https://github.com/rodydavis/vscode-dynamic-theme).
\ No newline at end of file
diff --git a/skills/dart-html-web-components/SKILL.md b/skills/dart-html-web-components/SKILL.md
new file mode 100644
index 0000000..f4b0a54
--- /dev/null
+++ b/skills/dart-html-web-components/SKILL.md
@@ -0,0 +1,234 @@
+---
+name: how-to-create-html-web-components-with-dart
+description: Discover the power of Web Components and how to build them with both JavaScript and Dart for reusable, framework-agnostic UI elements.
+metadata:
+ url: https://rodydavis.com/posts/dart-html-web-components
+ last_modified: Tue, 03 Feb 2026 20:04:14 GMT
+---
+
+# How to create HTML Web Components with Dart
+
+
+I am a long time [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) fan (since helping DevRel [lit.dev](https://lit.dev/) and [Material Web Components](https://github.com/material-components/material-web)) and have also loved writing [Dart](https://dart.dev/) in both [Flutter](https://flutter.dev/) applications and full stack apps.
+
+Despite being [used at so many companies](https://arewebcomponentsathingyet.com/), Web Components have faced a lot of pushback from JavaScript developers that use frameworks to target the web. ☹️
+
+What you may not realize is that the web has a way to create new HTML tags that can be used in **ANY** JS framework or place that returns HTML and you can progressively enchance applications. 🤩
+
+Since they are custom HTML tags, if you swap implementations, you do not need to update where it is used and you can ship components a separate files [instead of one big bundle](https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755).
+
+Dart [used to support Web Components](https://github.com/dart-archive/web-components) at one point and was even used by a precursor to Lit in a product call [Polymer](https://github.com/polymer-dart).
+
+## Creating a Web Component in Javascript
+
+To create a web component in Javascript you just need to extend HTML element and provide callbacks for when the component is mounted.
+
+```
+class HelloWorld extends HTMLElement {
+ static observedAttributes = ["name"];
+
+ constructor() {
+ super();
+ }
+
+ update() {
+ this.innerHTML = `Hello: ${this.getAttribute('name')}`;
+ }
+
+ connectedCallback() {
+ console.log("Custom element added to page.");
+ this. update();
+ }
+
+ disconnectedCallback() {
+ console.log("Custom element removed from page.");
+ }
+
+ adoptedCallback() {
+ console.log("Custom element moved to new page.");
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ console.log(`Attribute ${name} has changed.`);
+ if (name === 'name') {
+ this. update();
+ }
+ }
+}
+
+customElements.define("hello-world", HelloWorld);
+```
+
+We can then use it in HTML like the following:
+
+```
+
+
+