feat: add system mode to the theme selector (#7853)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Arnost Pleskot 2024-04-08 16:46:24 +02:00 committed by GitHub
parent 92bc08207c
commit cd50aa719f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 301 additions and 56 deletions

View file

@ -2,7 +2,7 @@ import { StaticCanvasAppState, AppState } from "../types";
import { StaticCanvasRenderConfig } from "../scene/types";
import { THEME_FILTER } from "../constants";
import { THEME, THEME_FILTER } from "../constants";
export const fillCircle = (
context: CanvasRenderingContext2D,
@ -49,7 +49,7 @@ export const bootstrapCanvas = ({
context.setTransform(1, 0, 0, 1, 0, 0);
context.scale(scale, scale);
if (isExporting && theme === "dark") {
if (isExporting && theme === THEME.DARK) {
context.filter = THEME_FILTER;
}

View file

@ -41,6 +41,7 @@ import {
ELEMENT_READY_TO_ERASE_OPACITY,
FRAME_STYLE,
MIME_TYPES,
THEME,
} from "../constants";
import { getStroke, StrokeOptions } from "perfect-freehand";
import {
@ -79,7 +80,7 @@ const shouldResetImageFilter = (
appState: StaticCanvasAppState,
) => {
return (
appState.theme === "dark" &&
appState.theme === THEME.DARK &&
isInitializedImageElement(element) &&
!isPendingImageElement(element, renderConfig) &&
renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg
@ -668,7 +669,7 @@ export const renderElement = (
// TODO change later to only affect AI frames
if (isMagicFrameElement(element)) {
context.strokeStyle =
appState.theme === "light" ? "#7affd7" : "#1d8264";
appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
}
if (FRAME_STYLE.radius && context.roundRect) {

View file

@ -1,3 +1,4 @@
import { THEME } from "../constants";
import { PointSnapLine, PointerSnapLine } from "../snapping";
import { InteractiveCanvasAppState, Point } from "../types";
@ -18,7 +19,7 @@ export const renderSnaps = (
// Don't change if zen mode, because we draw only crosses, we want the
// colors to be more visible
const snapColor =
appState.theme === "light" || appState.zenModeEnabled
appState.theme === THEME.LIGHT || appState.zenModeEnabled
? SNAP_COLOR_LIGHT
: SNAP_COLOR_DARK;
// in zen mode make the cross more visible since we don't draw the lines