theme design

style/sample.css

@@ -10,4 +10,81 @@ canvas{
   height:50%;
   align-items: center;
   border: 1px solid black;
+}
+html[data-theme="light"]{
+
+}
+html[data-theme="dark"]{
+
+}
+@property --vw{
+  syntax: '<length>';
+  inherits:true;
+  initial-value:100vw;
+}
+@property --vh{
+  syntax: '<length>';
+  inherits:true;
+  initial-value:100vh;
+}
+:root{
+  --body-background-color:rgba(53, 139, 225, 0.333);
+  --background-color:rgba(53, 139, 225, 0.333);
+  --backdrop-color:rgba(94, 164, 235, 0.3);
+  --font-color:rgb(91, 158, 91);
+  --font-shadow-color:rgb(91, 158, 91);
+  --filter-color:rgb(91, 158, 91);
+  --filter-shadow-color:rgb(91, 158, 91);
+  --hover-color:rgba(71, 220, 71, 0.133);
+  --a-color:rgba(71, 220, 71, 0.133);
+  --a-link-color:rgba(71, 220, 71, 0.133);
+  --a-hover-color:rgba(71, 220, 71, 0.133);
+  --a-active-color:rgba(71, 220, 71, 0.133);  
+  --a-visited-color:rgba(71, 220, 71, 0.133);
+  --normal-color:rgba(190, 243, 238, 0.133);
+  --notice-color:rgba(88, 144, 235, 0.133);
+  --warming-color:rgba(240, 218, 75, 0.133);
+  --wrong-color:rgba(243, 31, 31, 0.133);
+  --red:#122;
+  --green:#122;
+  --blue:#122;
+  --black:#122;
+  --white:#122;
+  --gray:#122;
+  --yellow:#122;
+  --purple:#122;
+  --pink:#122;
+  --orange:#122;
+  --brown:#122;
+  --cyan:#122;
+  --magenta:#122;
+  --C:#122;
+  --M:#122;
+  --Y:#122;
+  --K:#122;
+  --plate-size-default:98%;
+  --font-size:12px;
+  --font-default-size:12px;
+  --font-scale-size:24px;
+  --font-scale-default-size:24px;
+  --title-size:18px;
+  --title-default-size:18px;
+  --content-size:12px;
+  --content-default-size:12px;
+  --button-text-size:15px;
+  --button-text-default-size:15px;
+  --test-border:2px solid black;
+  --production-border:2px solid black;
+  --w:tan(atan2(var(--vw)),1px);
+  --h:tan(atan2(var(--vh)),1px);
+}
+body::before{
+  content:counter(w) "x" counter(h);
+  counter-reset: w var(--w) h var(--h);
+  font-size:100px;
+  position:fixed;
+  inset:0;
+  width:fit-content;
+  height:fit-content;
+  margin:auto;
 }