텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집

공백 변경 숨기기

변경 없는 행 숨기기

줄바꿈 비활성화

레이아웃

비교 단위

텍스트 스타일

구문 강조

Diffchecker Desktop 가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!데스크톱 앱 받기

Themes

생성일 4개월 전비교 결과 만료 없음

2 삭제

행
총
삭제

글자
총
삭제

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

249 행

4 추가

행
총
추가

글자
총
추가

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

251 행

import * as colorPalette from '@desktop-client/style/palette';

export const pageBackground = colorPalette.navy100;

export const pageBackgroundModalActive = colorPalette.navy200;

export const pageBackgroundTopLeft = colorPalette.navy100;

export const pageBackgroundBottomRight = colorPalette.blue150;

export const pageBackgroundLineTop = colorPalette.white;

export const pageBackgroundLineMid = colorPalette.navy100;

export const pageBackgroundLineBottom = colorPalette.blue150;

export const pageText = '#272630';

export const pageTextLight = colorPalette.navy500;

export const pageTextSubdued = colorPalette.navy300;

export const pageTextDark = colorPalette.navy800;

export const pageTextPositive = colorPalette.purple600;

export const pageTextLink = colorPalette.blue600;

export const pageTextLinkLight = colorPalette.blue300;

export const cardBackground = colorPalette.white;

export const cardBorder = colorPalette.purple700;

export const cardShadow = colorPalette.navy700;

export const tableBackground = colorPalette.white;

export const tableRowBackgroundHover = colorPalette.navy50;

export const tableText = pageText;

export const tableTextLight = colorPalette.navy400;

export const tableTextSubdued = colorPalette.navy100;

export const tableTextSelected = colorPalette.navy700;

export const tableTextHover = colorPalette.navy900;

export const tableTextInactive = colorPalette.navy500;

export const tableHeaderText = colorPalette.navy600;

export const tableHeaderBackground = colorPalette.white;

export const tableBorder = colorPalette.navy100;

export const tableBorderSelected = colorPalette.purple500;

export const tableBorderHover = colorPalette.purple400;

export const tableBorderSeparator = colorPalette.navy400;

export const tableRowBackgroundHighlight = colorPalette.blue150;

export const tableRowBackgroundHighlightText = colorPalette.navy700;

export const tableRowHeaderBackground = colorPalette.navy50;

export const tableRowHeaderText = colorPalette.navy800;

export const numberPositive = colorPalette.green700;

export const numberNegative = colorPalette.red500;

export const numberNeutral = colorPalette.navy100;

export const budgetNumberNegative = numberNegative;

export const budgetNumberZero = tableTextSubdued;

export const budgetNumberNeutral = tableText;

export const budgetNumberPositive = budgetNumberNeutral;

export const templateNumberFunded = numberPositive;

export const templateNumberUnderFunded = colorPalette.orange700;

export const toBudgetPositive = numberPositive;

export const toBudgetZero = numberPositive;

export const toBudgetNegative = budgetNumberNegative;

export const sidebarBackground = colorPalette.navy900;

export const sidebarItemBackgroundPending = colorPalette.orange200;

export const sidebarItemBackgroundPositive = colorPalette.green500;

export const sidebarItemBackgroundFailed = colorPalette.red300;

export const sidebarItemBackgroundHover = colorPalette.navy800;

export const sidebarItemAccentSelected = colorPalette.purple200;

export const sidebarItemText = colorPalette.navy150;

export const sidebarItemTextSelected = colorPalette.purple200;

export const sidebarBudgetName = colorPalette.navy150;

export const menuBackground = colorPalette.white;

export const menuItemBackground = colorPalette.navy50;

export const menuItemBackgroundHover = colorPalette.navy100;

export const menuItemText = colorPalette.navy900;

export const menuItemTextHover = menuItemText;

export const menuItemTextSelected = colorPalette.purple300;

export const menuItemTextHeader = colorPalette.navy400;

export const menuBorder = colorPalette.navy100;

export const menuBorderHover = colorPalette.purple100;

export const menuKeybindingText = colorPalette.navy400;

export const menuAutoCompleteBackground = colorPalette.navy900;

export const menuAutoCompleteBackgroundHover = colorPalette.navy600;

export const menuAutoCompleteText = colorPalette.white;

export const menuAutoCompleteTextHover = colorPalette.green150;

export const menuAutoCompleteTextHeader = colorPalette.orange150;

export const menuAutoCompleteItemTextHover = menuAutoCompleteText;

export const menuAutoCompleteItemText = menuAutoCompleteText;

export const modalBackground = colorPalette.white;

export const modalBorder = colorPalette.white;

export const mobileHeaderBackground = colorPalette.purple400;

export const mobileHeaderText = colorPalette.navy50;

export const mobileHeaderTextSubdued = colorPalette.gray200;

export const mobileHeaderTextHover = 'rgba(200, 200, 200, .15)';

export const mobilePageBackground = colorPalette.navy50;

export const mobileNavBackground = colorPalette.white;

export const mobileNavItem = colorPalette.gray300;

export const mobileNavItemSelected = colorPalette.purple500;

export const mobileAccountShadow = colorPalette.navy300;

export const mobileAccountText = colorPalette.blue800;

export const mobileTransactionSelected = colorPalette.purple500;

// Mobile view themes (for the top bar)

export const mobileViewTheme = mobileHeaderBackground;

export const mobileConfigServerViewTheme = colorPalette.purple500;

export const markdownNormal = colorPalette.purple150;

export const markdownDark = colorPalette.purple400;

export const markdownLight = colorPalette.purple100;

// Button

export const buttonMenuText = colorPalette.navy100;

export const buttonMenuTextHover = colorPalette.navy50;

export const buttonMenuBackground = 'transparent';

export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';

export const buttonMenuBorder = colorPalette.navy500;

export const buttonMenuSelectedText = colorPalette.green800;

export const buttonMenuSelectedTextHover = colorPalette.orange800;

export const buttonMenuSelectedBackground = colorPalette.orange200;

export const buttonMenuSelectedBackgroundHover = colorPalette.orange300;

export const buttonMenuSelectedBorder = buttonMenuSelectedBackground;

export const buttonPrimaryText = colorPalette.white;

export const buttonPrimaryTextHover = buttonPrimaryText;

export const buttonPrimaryBackground = colorPalette.purple500;

export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;

export const buttonPrimaryBackgroundHover = colorPalette.purple300;

export const buttonPrimaryBorder = buttonPrimaryBackground;

export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)';

export const buttonPrimaryDisabledText = colorPalette.white;

export const buttonPrimaryDisabledBackground = colorPalette.navy300;

export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;

export const buttonNormalText = colorPalette.navy900;

export const buttonNormalTextHover = buttonNormalText;

export const buttonNormalBackground = colorPalette.white;

export const buttonNormalBackgroundHover = buttonNormalBackground;

export const buttonNormalBorder = colorPalette.navy150;

export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)';

export const buttonNormalSelectedText = colorPalette.white;

export const buttonNormalSelectedBackground = colorPalette.blue600;

export const buttonNormalDisabledText = colorPalette.navy300;

export const buttonNormalDisabledBackground = buttonNormalBackground;

export const buttonNormalDisabledBorder = buttonNormalBorder;

export const calendarText = colorPalette.navy50;

export const calendarBackground = colorPalette.navy900;

export const calendarItemText = colorPalette.navy150;

export const calendarItemBackground = colorPalette.navy800;

export const calendarSelectedBackground = colorPalette.navy500;

export const buttonBareText = buttonNormalText;

export const buttonBareTextHover = buttonNormalText;

export const buttonBareBackground = 'transparent';

export const buttonBareBackgroundHover = 'rgba(100, 100, 100, .15)';

export const buttonBareBackgroundActive = 'rgba(100, 100, 100, .25)';

export const buttonBareDisabledText = buttonNormalDisabledText;

export const buttonBareDisabledBackground = buttonBareBackground;

export const noticeBackground = colorPalette.green150;

export const noticeBackgroundLight = colorPalette.green100;

export const noticeBackgroundDark = colorPalette.green500;

export const noticeText = colorPalette.green700;

export const noticeTextLight = colorPalette.green500;

export const noticeTextDark = colorPalette.green900;

export const noticeTextMenu = colorPalette.green200;

export const noticeBorder = colorPalette.green500;

export const warningBackground = colorPalette.orange200;

export const warningText = colorPalette.orange700;

export const warningTextLight = colorPalette.orange500;

export const warningTextDark = colorPalette.orange900;

export const warningBorder = colorPalette.orange500;

export const errorBackground = colorPalette.red100;

export const errorText = colorPalette.red500;

export const errorTextDark = colorPalette.red700;

export const errorTextDarker = colorPalette.red900;

export const errorTextMenu = colorPalette.red200;

export const errorBorder = colorPalette.red500;

export const upcomingBackground = colorPalette.purple100;

export const upcomingText = colorPalette.purple700;

export const upcomingBorder = colorPalette.purple500;

export const formLabelText = colorPalette.blue600;

export const formLabelBackground = colorPalette.blue200;

export const formInputBackground = colorPalette.navy50;

export const formInputBackgroundSelected = colorPalette.white;

export const formInputBackgroundSelection = colorPalette.purple500;

export const formInputBorder = colorPalette.navy150;

export const formInputTextReadOnlySelection = colorPalette.navy50;

export const formInputBorderSelected = colorPalette.purple500;

export const formInputText = colorPalette.navy900;

export const formInputTextSelected = colorPalette.navy50;

export const formInputTextPlaceholder = colorPalette.navy300;

export const formInputTextPlaceholderSelected = colorPalette.navy200;

export const formInputTextSelection = colorPalette.navy100;

export const formInputShadowSelected = colorPalette.purple300;

export const formInputTextHighlight = colorPalette.purple200;

export const checkboxText = tableBackground;

export const checkboxBackgroundSelected = colorPalette.blue500;

export const checkboxBorderSelected = colorPalette.blue500;

export const checkboxShadowSelected = colorPalette.blue300;

export const checkboxToggleBackground = colorPalette.gray400;

export const checkboxToggleBackgroundSelected = colorPalette.purple600;

export const checkboxToggleDisabled = colorPalette.gray200;

export const pillBackground = colorPalette.navy150;

export const pillBackgroundLight = colorPalette.navy50;

export const pillText = colorPalette.navy800;

export const pillTextHighlighted = colorPalette.purple600;

export const pillBorder = colorPalette.navy150;

export const pillBorderDark = colorPalette.navy300;

export const pillBackgroundSelected = colorPalette.blue150;

export const pillTextSelected = colorPalette.blue900;

export const pillBorderSelected = colorPalette.purple500;

export const pillTextSubdued = colorPalette.navy200;

export const reportsRed = colorPalette.red300;

export const reportsBlue = colorPalette.blue400;

export const reportsGreen = colorPalette.green400;

export const reportsGray = colorPalette.gray400;

export const reportsLabel = colorPalette.navy900;

export const reportsInnerLabel = colorPalette.navy800;

export const reportsNumberPositive = numberPositive;

export const reportsNumberNegative = numberNegative;

export const reportsNumberNeutral = numberNeutral;

export const reportsChartFill = reportsNumberPositive;

export const noteTagBackground = colorPalette.purple125;

export const noteTagBackgroundHover = colorPalette.purple150;

export const noteTagDefault = colorPalette.purple125;

export const noteTagText = colorPalette.black;

export const budgetCurrentMonth = tableBackground;

export const budgetOtherMonth = colorPalette.gray50;

export const budgetHeaderCurrentMonth = budgetOtherMonth;

export const budgetHeaderOtherMonth = colorPalette.gray80;

export const floatingActionBarBackground = colorPalette.purple400;

export const floatingActionBarBorder = floatingActionBarBackground;

export const floatingActionBarText = colorPalette.navy50;

export const tooltipText = colorPalette.navy900;

export const tooltipBackground = colorPalette.navy50;

export const tooltipBackground = colorPalette.white;

export const tooltipBorder = colorPalette.navy150;

export const calendarCellBackground = colorPalette.navy100;

export const overlayBackground = 'rgba(0, 0, 0, 0.3)';

// Chart colors - Qualitative scale (9 colors)

export const chartQual1 = colorPalette.chartQual1;

export const chartQual2 = colorPalette.chartQual2;

export const chartQual3 = colorPalette.chartQual3;

export const chartQual4 = colorPalette.chartQual4;

export const chartQual5 = colorPalette.chartQual5;

export const chartQual6 = colorPalette.chartQual6;

export const chartQual7 = colorPalette.chartQual7;

export const chartQual8 = colorPalette.chartQual8;

export const chartQual9 = colorPalette.chartQual9;

저장된 비교 결과

원본

파일 열기

import * as colorPalette from '@desktop-client/style/palette';

export const pageBackground = colorPalette.navy100;
export const pageBackgroundModalActive = colorPalette.navy200;
export const pageBackgroundTopLeft = colorPalette.navy100;
export const pageBackgroundBottomRight = colorPalette.blue150;
export const pageBackgroundLineTop = colorPalette.white;
export const pageBackgroundLineMid = colorPalette.navy100;
export const pageBackgroundLineBottom = colorPalette.blue150;
export const pageText = '#272630';
export const pageTextLight = colorPalette.navy500;
export const pageTextSubdued = colorPalette.navy300;
export const pageTextDark = colorPalette.navy800;
export const pageTextPositive = colorPalette.purple600;
export const pageTextLink = colorPalette.blue600;
export const pageTextLinkLight = colorPalette.blue300;

export const cardBackground = colorPalette.white;
export const cardBorder = colorPalette.purple700;
export const cardShadow = colorPalette.navy700;

export const tableBackground = colorPalette.white;
export const tableRowBackgroundHover = colorPalette.navy50;
export const tableText = pageText;
export const tableTextLight = colorPalette.navy400;
export const tableTextSubdued = colorPalette.navy100;
export const tableTextSelected = colorPalette.navy700;
export const tableTextHover = colorPalette.navy900;
export const tableTextInactive = colorPalette.navy500;
export const tableHeaderText = colorPalette.navy600;
export const tableHeaderBackground = colorPalette.white;
export const tableBorder = colorPalette.navy100;
export const tableBorderSelected = colorPalette.purple500;
export const tableBorderHover = colorPalette.purple400;
export const tableBorderSeparator = colorPalette.navy400;
export const tableRowBackgroundHighlight = colorPalette.blue150;
export const tableRowBackgroundHighlightText = colorPalette.navy700;
export const tableRowHeaderBackground = colorPalette.navy50;
export const tableRowHeaderText = colorPalette.navy800;

export const numberPositive = colorPalette.green700;
export const numberNegative = colorPalette.red500;
export const numberNeutral = colorPalette.navy100;
export const budgetNumberNegative = numberNegative;
export const budgetNumberZero = tableTextSubdued;
export const budgetNumberNeutral = tableText;
export const budgetNumberPositive = budgetNumberNeutral;
export const templateNumberFunded = numberPositive;
export const templateNumberUnderFunded = colorPalette.orange700;
export const toBudgetPositive = numberPositive;
export const toBudgetZero = numberPositive;
export const toBudgetNegative = budgetNumberNegative;

export const sidebarBackground = colorPalette.navy900;
export const sidebarItemBackgroundPending = colorPalette.orange200;
export const sidebarItemBackgroundPositive = colorPalette.green500;
export const sidebarItemBackgroundFailed = colorPalette.red300;
export const sidebarItemBackgroundHover = colorPalette.navy800;
export const sidebarItemAccentSelected = colorPalette.purple200;
export const sidebarItemText = colorPalette.navy150;
export const sidebarItemTextSelected = colorPalette.purple200;
export const sidebarBudgetName = colorPalette.navy150;

export const menuBackground = colorPalette.white;
export const menuItemBackground = colorPalette.navy50;
export const menuItemBackgroundHover = colorPalette.navy100;
export const menuItemText = colorPalette.navy900;
export const menuItemTextHover = menuItemText;
export const menuItemTextSelected = colorPalette.purple300;
export const menuItemTextHeader = colorPalette.navy400;
export const menuBorder = colorPalette.navy100;
export const menuBorderHover = colorPalette.purple100;
export const menuKeybindingText = colorPalette.navy400;
export const menuAutoCompleteBackground = colorPalette.navy900;
export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
export const menuAutoCompleteText = colorPalette.white;
export const menuAutoCompleteTextHeader = colorPalette.orange150;
export const menuAutoCompleteItemText = menuAutoCompleteText;

export const modalBackground = colorPalette.white;
export const modalBorder = colorPalette.white;
export const mobileHeaderBackground = colorPalette.purple400;
export const mobileHeaderText = colorPalette.navy50;
export const mobileHeaderTextSubdued = colorPalette.gray200;
export const mobileHeaderTextHover = 'rgba(200, 200, 200, .15)';
export const mobilePageBackground = colorPalette.navy50;
export const mobileNavBackground = colorPalette.white;
export const mobileNavItem = colorPalette.gray300;
export const mobileNavItemSelected = colorPalette.purple500;
export const mobileAccountShadow = colorPalette.navy300;
export const mobileAccountText = colorPalette.blue800;
export const mobileTransactionSelected = colorPalette.purple500;

// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;
export const mobileConfigServerViewTheme = colorPalette.purple500;

export const markdownNormal = colorPalette.purple150;
export const markdownDark = colorPalette.purple400;
export const markdownLight = colorPalette.purple100;

// Button
export const buttonMenuText = colorPalette.navy100;
export const buttonMenuTextHover = colorPalette.navy50;
export const buttonMenuBackground = 'transparent';
export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
export const buttonMenuBorder = colorPalette.navy500;
export const buttonMenuSelectedText = colorPalette.green800;
export const buttonMenuSelectedTextHover = colorPalette.orange800;
export const buttonMenuSelectedBackground = colorPalette.orange200;
export const buttonMenuSelectedBackgroundHover = colorPalette.orange300;
export const buttonMenuSelectedBorder = buttonMenuSelectedBackground;

export const buttonPrimaryText = colorPalette.white;
export const buttonPrimaryTextHover = buttonPrimaryText;
export const buttonPrimaryBackground = colorPalette.purple500;
export const buttonPrimaryBackgroundHover = buttonPrimaryBackground;
export const buttonPrimaryBorder = buttonPrimaryBackground;
export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)';
export const buttonPrimaryDisabledText = colorPalette.white;
export const buttonPrimaryDisabledBackground = colorPalette.navy300;
export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;

export const buttonNormalText = colorPalette.navy900;
export const buttonNormalTextHover = buttonNormalText;
export const buttonNormalBackground = colorPalette.white;
export const buttonNormalBackgroundHover = buttonNormalBackground;
export const buttonNormalBorder = colorPalette.navy150;
export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)';
export const buttonNormalSelectedText = colorPalette.white;
export const buttonNormalSelectedBackground = colorPalette.blue600;
export const buttonNormalDisabledText = colorPalette.navy300;
export const buttonNormalDisabledBackground = buttonNormalBackground;
export const buttonNormalDisabledBorder = buttonNormalBorder;

export const calendarText = colorPalette.navy50;
export const calendarBackground = colorPalette.navy900;
export const calendarItemText = colorPalette.navy150;
export const calendarItemBackground = colorPalette.navy800;
export const calendarSelectedBackground = colorPalette.navy500;

export const buttonBareText = buttonNormalText;
export const buttonBareTextHover = buttonNormalText;
export const buttonBareBackground = 'transparent';
export const buttonBareBackgroundHover = 'rgba(100, 100, 100, .15)';
export const buttonBareBackgroundActive = 'rgba(100, 100, 100, .25)';
export const buttonBareDisabledText = buttonNormalDisabledText;
export const buttonBareDisabledBackground = buttonBareBackground;

export const noticeBackground = colorPalette.green150;
export const noticeBackgroundLight = colorPalette.green100;
export const noticeBackgroundDark = colorPalette.green500;
export const noticeText = colorPalette.green700;
export const noticeTextLight = colorPalette.green500;
export const noticeTextDark = colorPalette.green900;
export const noticeTextMenu = colorPalette.green200;
export const noticeBorder = colorPalette.green500;
export const warningBackground = colorPalette.orange200;
export const warningText = colorPalette.orange700;
export const warningTextLight = colorPalette.orange500;
export const warningTextDark = colorPalette.orange900;
export const warningBorder = colorPalette.orange500;
export const errorBackground = colorPalette.red100;
export const errorText = colorPalette.red500;
export const errorTextDark = colorPalette.red700;
export const errorTextDarker = colorPalette.red900;
export const errorTextMenu = colorPalette.red200;
export const errorBorder = colorPalette.red500;
export const upcomingBackground = colorPalette.purple100;
export const upcomingText = colorPalette.purple700;
export const upcomingBorder = colorPalette.purple500;

export const formLabelText = colorPalette.blue600;
export const formLabelBackground = colorPalette.blue200;
export const formInputBackground = colorPalette.navy50;
export const formInputBackgroundSelected = colorPalette.white;
export const formInputBackgroundSelection = colorPalette.purple500;
export const formInputBorder = colorPalette.navy150;
export const formInputTextReadOnlySelection = colorPalette.navy50;
export const formInputBorderSelected = colorPalette.purple500;
export const formInputText = colorPalette.navy900;
export const formInputTextSelected = colorPalette.navy50;
export const formInputTextPlaceholder = colorPalette.navy300;
export const formInputTextPlaceholderSelected = colorPalette.navy200;
export const formInputTextSelection = colorPalette.navy100;
export const formInputShadowSelected = colorPalette.purple300;
export const formInputTextHighlight = colorPalette.purple200;
export const checkboxText = tableBackground;
export const checkboxBackgroundSelected = colorPalette.blue500;
export const checkboxBorderSelected = colorPalette.blue500;
export const checkboxShadowSelected = colorPalette.blue300;
export const checkboxToggleBackground = colorPalette.gray400;
export const checkboxToggleBackgroundSelected = colorPalette.purple600;
export const checkboxToggleDisabled = colorPalette.gray200;

export const pillBackground = colorPalette.navy150;
export const pillBackgroundLight = colorPalette.navy50;
export const pillText = colorPalette.navy800;
export const pillTextHighlighted = colorPalette.purple600;
export const pillBorder = colorPalette.navy150;
export const pillBorderDark = colorPalette.navy300;
export const pillBackgroundSelected = colorPalette.blue150;
export const pillTextSelected = colorPalette.blue900;
export const pillBorderSelected = colorPalette.purple500;
export const pillTextSubdued = colorPalette.navy200;

export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
export const reportsGreen = colorPalette.green400;
export const reportsGray = colorPalette.gray400;
export const reportsLabel = colorPalette.navy900;
export const reportsInnerLabel = colorPalette.navy800;
export const reportsNumberPositive = numberPositive;
export const reportsNumberNegative = numberNegative;
export const reportsNumberNeutral = numberNeutral;
export const reportsChartFill = reportsNumberPositive;

export const noteTagBackground = colorPalette.purple125;
export const noteTagBackgroundHover = colorPalette.purple150;
export const noteTagDefault = colorPalette.purple125;
export const noteTagText = colorPalette.black;

export const budgetCurrentMonth = tableBackground;
export const budgetOtherMonth = colorPalette.gray50;
export const budgetHeaderCurrentMonth = budgetOtherMonth;
export const budgetHeaderOtherMonth = colorPalette.gray80;

export const floatingActionBarBackground = colorPalette.purple400;
export const floatingActionBarBorder = floatingActionBarBackground;
export const floatingActionBarText = colorPalette.navy50;

export const tooltipText = colorPalette.navy900;
export const tooltipBackground = colorPalette.navy50;
export const tooltipBorder = colorPalette.navy150;

export const calendarCellBackground = colorPalette.navy100;

export const overlayBackground = 'rgba(0, 0, 0, 0.3)';

// Chart colors - Qualitative scale (9 colors)
export const chartQual1 = colorPalette.chartQual1;
export const chartQual2 = colorPalette.chartQual2;
export const chartQual3 = colorPalette.chartQual3;
export const chartQual4 = colorPalette.chartQual4;
export const chartQual5 = colorPalette.chartQual5;
export const chartQual6 = colorPalette.chartQual6;
export const chartQual7 = colorPalette.chartQual7;
export const chartQual8 = colorPalette.chartQual8;
export const chartQual9 = colorPalette.chartQual9;

수정본

파일 열기

import * as colorPalette from '@desktop-client/style/palette';

export const cardBackground = colorPalette.white;
export const cardBorder = colorPalette.purple700;
export const cardShadow = colorPalette.navy700;

export const menuBackground = colorPalette.white;
export const menuItemBackground = colorPalette.navy50;
export const menuItemBackgroundHover = colorPalette.navy100;
export const menuItemText = colorPalette.navy900;
export const menuItemTextHover = menuItemText;
export const menuItemTextSelected = colorPalette.purple300;
export const menuItemTextHeader = colorPalette.navy400;
export const menuBorder = colorPalette.navy100;
export const menuBorderHover = colorPalette.purple100;
export const menuKeybindingText = colorPalette.navy400;
export const menuAutoCompleteBackground = colorPalette.navy900;
export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
export const menuAutoCompleteText = colorPalette.white;
export const menuAutoCompleteTextHover = colorPalette.green150;
export const menuAutoCompleteTextHeader = colorPalette.orange150;
export const menuAutoCompleteItemTextHover = menuAutoCompleteText;
export const menuAutoCompleteItemText = menuAutoCompleteText;

// Mobile view themes (for the top bar)
export const mobileViewTheme = mobileHeaderBackground;
export const mobileConfigServerViewTheme = colorPalette.purple500;

export const markdownNormal = colorPalette.purple150;
export const markdownDark = colorPalette.purple400;
export const markdownLight = colorPalette.purple100;

export const buttonPrimaryText = colorPalette.white;
export const buttonPrimaryTextHover = buttonPrimaryText;
export const buttonPrimaryBackground = colorPalette.purple500;
export const buttonPrimaryBackgroundHover = colorPalette.purple300;
export const buttonPrimaryBorder = buttonPrimaryBackground;
export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)';
export const buttonPrimaryDisabledText = colorPalette.white;
export const buttonPrimaryDisabledBackground = colorPalette.navy300;
export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground;

export const floatingActionBarBackground = colorPalette.purple400;
export const floatingActionBarBorder = floatingActionBarBackground;
export const floatingActionBarText = colorPalette.navy50;

export const tooltipText = colorPalette.navy900;
export const tooltipBackground = colorPalette.white;
export const tooltipBorder = colorPalette.navy150;

export const calendarCellBackground = colorPalette.navy100;

export const overlayBackground = 'rgba(0, 0, 0, 0.3)';