feat(app): add alt theme style

Author: riccardoperra

apps/codeimage/src/App.tsx

@@ -90,6 +90,7 @@ export function App() {
               tabIcon={tabIcon()?.content}
               showWatermark={terminal.showWatermark}
               opacity={terminal.opacity}
+              alternativeTheme={terminal.alternativeTheme}
             >
               <CustomEditor />
             </DynamicTerminal>

apps/codeimage/src/components/Frame/Frame.css.ts

@@ -46,7 +46,7 @@ export const handler = style([
 export const content = style({
   width: '100%',
   height: '100%',
-  marginTop: '20px',
+  marginTop: '10px',
   marginBottom: '40px',
   position: 'relative',
 });
@@ -198,23 +198,9 @@ export const presets = style({
   columnGap: themeVars.spacing['2'],
 });
 
-export const presetsContainer = style({
+export const toolbar = style({
   height: '28px',
   width: 'auto',
-  borderRadius: themeVars.borderRadius.lg,
   display: 'flex',
-  alignItems: 'center',
-  backgroundColor: darkGrayScale.gray5,
-  columnGap: '8px',
-  color: darkGrayScale.gray11,
-  paddingRight: themeVars.spacing['4'],
-});
-
-export const presetsBox = style({
-  display: 'block',
-  height: '28px',
-  width: '28px',
-  borderRadius: themeVars.borderRadius.lg,
-  background: backgroundColorVar,
-  marginRight: themeVars.spacing['1'],
+  justifyContent: 'flex-end',
 });

apps/codeimage/src/components/Frame/FrameHandler.tsx

@@ -1,6 +1,11 @@
 import {focusedEditor$} from '@codeimage/store/editor';
 import {onCopyToClipboard} from '@codeimage/store/effects/onCopyToClipboard';
-import {Box} from '@codeimage/ui';
+import {
+  isAlternativeTheme$,
+  setAlternativeTheme,
+  toggleAlternativeTheme,
+} from '@codeimage/store/terminal';
+import {Box, Button} from '@codeimage/ui';
 import {dispatch} from '@ngneat/effects';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {WithRef} from 'solid-headless/dist/types/utils/dynamic-prop';
@@ -42,6 +47,8 @@ export function FrameHandler(
 
   const ratio = 0.1;
 
+  const isAlternative = from(isAlternativeTheme$);
+
   createEffect(
     on([handlerRef], ([frame]) => {
       if (modality === 'mobile') {
@@ -77,6 +84,20 @@ export function FrameHandler(
         }
         ref={setHandlerRef}
       >
+        <div class={styles.toolbar}>
+          <Button
+            variant={'solid'}
+            size={'xs'}
+            theme={'secondary'}
+            style={{height: 'auto'}}
+            onClick={() => toggleAlternativeTheme()}
+          >
+            {isAlternative()
+              ? 'Apply default theme'
+              : 'Apply alternative theme'}
+          </Button>
+        </div>
+
         <div
           class={styles.content}
           ref={createRef<'div'>(props, e => {

apps/codeimage/src/components/Terminal/TerminalHost.tsx

@@ -27,11 +27,14 @@ export interface TerminalHostProps extends BaseTerminalProps {
 
 export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
   const background = () => {
+    if (props.alternativeTheme) {
+      return `rgba(${styles.terminalVars.headerColor}, .70)`;
+    }
     const opacity = (props.opacity ?? 100) / 100;
     if (props.opacity !== 100) {
       return `rgba(0,0,0, ${opacity})`;
     }
-    return rgba(props.background, opacity);
+    return props.background;
   };
 
   return (

apps/codeimage/src/components/Terminal/terminal.css.ts

@@ -10,6 +10,7 @@ export const [terminalTheme, terminalVars] = createTheme({
   textColor: themeVars.backgroundColor.gray['800'],
   boxShadow: themeVars.boxShadow.lg,
   tabDelta: '10px',
+  headerColor: '0, 0, 0',
 });
 
 export const wrapper = style([
@@ -22,6 +23,18 @@ export const wrapper = style([
     borderRadius: terminalVars.radius,
     boxShadow: terminalVars.boxShadow,
     transition: 'box-shadow .2s, border-radius .2s',
+    selectors: {
+      '&[data-theme-mode=light]': {
+        vars: {
+          [terminalVars.headerColor]: `255, 255, 255`,
+        },
+      },
+      '&[data-theme-mode=dark] &': {
+        vars: {
+          [terminalVars.headerColor]: `0, 0, 0`,
+        },
+      },
+    },
   },
 ]);
 

apps/codeimage/src/state/terminal.ts

@@ -22,6 +22,7 @@ export interface TerminalState {
   readonly showWatermark: boolean;
   readonly showGlassReflection: boolean;
   readonly opacity: number;
+  readonly alternativeTheme: boolean;
 }
 
 const initialState: TerminalState = {
@@ -39,6 +40,7 @@ const initialState: TerminalState = {
   showWatermark: true,
   showGlassReflection: false,
   opacity: 100,
+  alternativeTheme: false,
 };
 
 const store = createStore(
@@ -67,6 +69,10 @@ export function toggleShowHeader() {
   store.update(setProp('showHeader', showHeader => !showHeader));
 }
 
+export function toggleAlternativeTheme() {
+  store.update(setProp('alternativeTheme', alternative => !alternative));
+}
+
 export function toggleWatermark() {
   store.update(setProp('showWatermark', showWatermark => !showWatermark));
 }
@@ -82,3 +88,7 @@ export function setTabName(tabName: string) {
 export const terminal$ = store.pipe(distinctUntilChanged(shallow));
 
 export const tabName$ = store.pipe(select(state => state.tabName));
+
+export const isAlternativeTheme$ = store.pipe(
+  select(state => state.alternativeTheme),
+);