ftd.code theme change fixed (#1299)

* code theme change fix

* get static value if mutable

* check if theme is not null

* minor fix

fastn-js/js/dom.js

@@ -1768,19 +1768,27 @@ class Node2 {
                 this.#node.classList.remove("line-numbers");
             }
         } else if (kind === fastn_dom.PropertyKind.CodeTheme) {
+            this.#extraData.code = this.#extraData.code ? this.#extraData.code : {};
+            if(fastn_utils.isNull(staticValue)) {
+                if(!fastn_utils.isNull(this.#extraData.code.theme)) {
+                    this.#node.classList.remove(this.#extraData.code.theme);
+                }
+                return;
+            }
             if (!ssr) {
                 fastn_utils.addCodeTheme(staticValue);
             }
+            staticValue = fastn_utils.getStaticValue(staticValue);
             let theme = staticValue.replace("\.", "-");
-            this.#extraData.code = this.#extraData.code ? this.#extraData.code : {};
-            if (this.#extraData.code.theme) {
-                this.#node.classList.remove(theme);
+            if (this.#extraData.code.theme !== theme) {
+                let codeNode = this.#children[0].getNode();
+                this.#node.classList.remove(this.#extraData.code.theme);
+                codeNode.classList.remove(this.#extraData.code.theme);
+                this.#extraData.code.theme = theme;
+                this.#node.classList.add(theme);
+                codeNode.classList.add(theme);
+                fastn_utils.highlightCode(codeNode, this.#extraData.code);
             }
-            this.#extraData.code.theme = theme;
-            this.#node.classList.add(theme);
-            let codeNode = this.#children[0].getNode();
-            codeNode.classList.add(theme);
-            fastn_utils.highlightCode(codeNode, this.#extraData.code);
         } else if (kind === fastn_dom.PropertyKind.CodeLanguage) {
             let language = `language-${staticValue}`;
             this.#extraData.code = this.#extraData.code ? this.#extraData.code : {};

ftd/t/js/57-code-dark-mode.ftd

@@ -0,0 +1,15 @@
+-- ftd.code:
+lang: ftd
+role: $inherited.types.copy-small
+theme: fastn-theme.light
+theme if { ftd.dark-mode }: fastn-theme.dark
+
+\-- ftd.column:
+padding.px: 10 ;; <hl>
+spacing.fixed.px: "50"
+height.fixed.px: 200
+width.fixed.px: 300 ;; <hl>
+overflow-y: scroll
+border-color: $red-yellow
+border-style: solid
+border-width.px: 2