refactor: Rename appearance to theme (#3237)

* refactor: Rename appearance to theme

* fix

* update changelog

* rename theme_dark to theme--dark

* add about migration

src/css/styles.scss

@@ -41,13 +41,13 @@
     z-index: var(--zIndex-canvas);
   }
 
-  &.Appearance_dark {
+  &.theme--dark {
     // The percentage is inspired by
     // https://material.io/design/color/dark-theme.html#properties, which
     // recommends surface color of #121212, 93% yields #111111 for #FFF
 
     canvas {
-      filter: var(--appearance-filter);
+      filter: var(--theme-filter);
     }
   }
 

src/css/theme.scss

@@ -2,7 +2,7 @@
 @import "./variables.module.scss";
 
 .excalidraw {
-  --appearance-filter: none;
+  --theme-filter: none;
   --button-destructive-bg-color: #{$oc-red-1};
   --button-destructive-color: #{$oc-red-9};
   --button-gray-1: #{$oc-gray-2};
@@ -35,16 +35,16 @@
   --space-factor: 0.25rem;
   --text-primary-color: #{$oc-gray-8};
 
-  &.Appearance_dark {
+  &.theme--dark {
     background: $oc-black;
 
-    &.Appearance_dark-background-none {
+    &.theme--dark-background-none {
       background: none;
     }
   }
 
-  &.Appearance_dark {
-    --appearance-filter: #{$appearance-filter};
+  &.theme--dark {
+    --theme-filter: #{$theme-filter};
     --button-destructive-bg-color: #5a0000;
     --button-destructive-color: #{$oc-red-3};
     --button-gray-1: #363636;

src/css/variables.module.scss

@@ -2,9 +2,9 @@
 
 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
-$appearance-filter: "invert(93%) hue-rotate(180deg)";
+$theme-filter: "invert(93%) hue-rotate(180deg)";
 
 :export {
   isMobileQuery: unquote($is-mobile-query);
-  appearanceFilter: unquote($appearance-filter);
+  themeFilter: unquote($theme-filter);
 }