Skip to content

Commit a6535e9

Browse files
amoutonbradyamoutonbrady
authored
Merge pull request #47 from aquaductape/add-dark-mode-and-restore-hidden-ui
Add dark theme on UIs and restore Compiler Mode
2 parents 531b237 + 0d29b1b commit a6535e9

File tree

6 files changed

+52
-47
lines changed

6 files changed

+52
-47
lines changed

‎playground/components/header.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,18 @@ export const Header: Component<{
8787
class="z-10"
8888
>
8989
<div
90-
class="md:items-center md:space-x-2 md:flex md:flex-row"
90+
class="md:items-center md:space-x-2 md:flex md:flex-row text-black dark:text-white"
9191
classList={{
92-
'shadow-md flex flex-col justify-center bg-white': showMenu(),
92+
'shadow-md flex flex-col justify-center bg-white dark:bg-gray-700': showMenu(),
9393
hidden: !showMenu(),
9494
}}
9595
>
9696
<button
9797
type="button"
9898
onClick={props.toggleDark}
99-
class="text-black md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100"
99+
class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
100100
classList={{
101-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
101+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
102102
showMenu(),
103103
}}
104104
title="Toggle dark mode"
@@ -110,9 +110,9 @@ export const Header: Component<{
110110
</button>
111111

112112
<label
113-
class="text-black md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 cursor-pointer"
113+
class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100 cursor-pointer"
114114
classList={{
115-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
115+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
116116
showMenu(),
117117
}}
118118
title="Import from JSON"
@@ -125,9 +125,9 @@ export const Header: Component<{
125125
<button
126126
type="button"
127127
onClick={() => exportToJSON(props.tabs)}
128-
class="text-black md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100"
128+
class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
129129
classList={{
130-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
130+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
131131
showMenu(),
132132
}}
133133
title="Export to JSON"
@@ -141,9 +141,9 @@ export const Header: Component<{
141141
<button
142142
type="button"
143143
onClick={() => exportToCsb(props.tabs)}
144-
class="text-black md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100"
144+
class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
145145
classList={{
146-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
146+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
147147
showMenu(),
148148
}}
149149
title="Export to CodeSandbox"
@@ -161,11 +161,11 @@ export const Header: Component<{
161161
<button
162162
type="button"
163163
onClick={shareLink}
164-
class="text-black md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded"
164+
class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded"
165165
classList={{
166166
'opacity-80 hover:opacity-100': !copy(),
167167
'text-green-100': copy() && !showMenu(),
168-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
168+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
169169
showMenu(),
170170
}}
171171
title="Share with a minified link"

‎playground/components/zoomDropdown.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,11 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
8888
>
8989
<button
9090
type="button"
91-
class="text-black md:text-white flex flex-row space-x-2 items-center w-full md:px-3 px-2 py-2 focus:ring-1 rounded text-white opacity-80 hover:opacity-100"
91+
class="dark:text-white md:text-white flex flex-row space-x-2 items-center w-full md:px-3 px-2 py-2 focus:ring-1 rounded opacity-80 hover:opacity-100"
9292
classList={{
9393
'bg-gray-900': toggle() && !props.showMenu,
94-
'bg-gray-300': toggle() && props.showMenu,
95-
'rounded-none active:bg-gray-300 hover:bg-gray-300 focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
94+
'bg-gray-300 dark:text-black': toggle() && props.showMenu,
95+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
9696
props.showMenu,
9797
}}
9898
onClick={onFOClick}
@@ -104,39 +104,39 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
104104
</button>
105105
<Show when={toggle()}>
106106
<div
107-
class="absolute top-full left-1/2 bg-white text-brand-default border border-gray-900 rounded shadow p-6 -translate-x-1/2 z-10"
107+
class="absolute top-full left-1/2 bg-white dark:bg-gray-700 text-brand-default border border-gray-900 rounded shadow p-6 -translate-x-1/2 z-10"
108108
classList={{
109109
'left-1/4': props.showMenu,
110110
}}
111111
>
112112
<div class="flex">
113113
<button
114-
class="bg-gray-500 text-white px-3 py-1 rounded-l text-sm uppercase tracking-wide hover:bg-gray-800"
114+
class="bg-gray-500 text-white px-3 py-1 rounded-l text-sm uppercase tracking-wide hover:bg-gray-800 dark:hover:bg-black"
115115
aria-label="decrease font size"
116116
onClick={() => updateZoomScale('decrease')}
117117
>
118118
-
119119
</button>
120-
<div class="text-black bg-gray-100 px-3 py-1 text-sm text-center w-20 uppercase tracking-wide ">
120+
<div class="text-black bg-gray-100 dark:bg-gray-200 px-3 py-1 text-sm text-center w-20 uppercase tracking-wide ">
121121
{zoomState.zoom}%
122122
</div>
123123
<button
124-
class="bg-gray-500 text-white px-3 py-1 rounded-r text-sm uppercase tracking-wide mr-4 hover:bg-gray-800"
124+
class="bg-gray-500 text-white px-3 py-1 rounded-r text-sm uppercase tracking-wide mr-4 hover:bg-gray-800 dark:hover:bg-black"
125125
aria-label="increase font size"
126126
onClick={() => updateZoomScale('increase')}
127127
>
128128
+
129129
</button>
130130
<button
131-
class="bg-gray-500 text-white px-3 py-1 rounded text-sm uppercase tracking-wide hover:bg-gray-800"
131+
class="bg-gray-500 text-white px-3 py-1 rounded text-sm uppercase tracking-wide hover:bg-gray-800 dark:hover:bg-black"
132132
aria-label="reset font size"
133133
onClick={() => updateZoomScale('reset')}
134134
>
135135
Reset
136136
</button>
137137
</div>
138138
<div className="mt-10">
139-
<label class="block my-3 cursor-pointer">
139+
<label class="block my-3 cursor-pointer dark:text-white">
140140
<input
141141
type="checkbox"
142142
class="mr-4 cursor-pointer"
@@ -145,7 +145,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
145145
/>
146146
Override browser zoom keyboard shortcut
147147
</label>
148-
<label class="block my-3 cursor-pointer">
148+
<label class="block my-3 cursor-pointer dark:text-white">
149149
<input
150150
type="checkbox"
151151
class="mr-4 cursor-pointer"

‎src/components/gridResizer/dot.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
import type { Component, JSX } from 'solid-js';
1+
import type { Component } from 'solid-js';
22

3-
export const Dot: Component = () => {
4-
return <span class="m-1 w-1 h-1 rounded-full bg-blueGray-200" />;
3+
export const Dot: Component<{ isDragging: boolean }> = (props) => {
4+
return (
5+
<span
6+
class="m-1 w-1 h-1 rounded-full bg-blueGray-300 dark:bg-blueGray-600 dark:group-hover:bg-blueGray-200"
7+
classList={{
8+
'bg-blueGray-200': props.isDragging,
9+
'dark:bg-blueGray-200': props.isDragging,
10+
}}
11+
/>
12+
);
513
};

‎src/components/gridResizer/gridResizer.tsx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
Component,
3-
JSX,
4-
splitProps,
5-
createSignal,
6-
createEffect,
7-
onCleanup,
8-
} from 'solid-js';
1+
import { Component, JSX, splitProps, createSignal, createEffect, onCleanup } from 'solid-js';
92
import { throttle } from '../../utils/throttle';
103
import { Dot } from './dot';
114

@@ -72,9 +65,12 @@ export const GridResizer: Component<GridResizerProps> = (props) => {
7265
}
7366
});
7467

75-
const baseClasses = 'justify-center items-center border-blueGray-200 hover:bg-brand-default';
68+
const baseClasses =
69+
'justify-center group items-center border-blueGray-200 dark:border-blueGray-700 hover:bg-brand-default dark:hover:bg-brand-default';
7670
const resizingClasses = () =>
77-
`${isDragging() ? 'bg-brand-default' : 'bg-blueGray-50 dark:bg-blueGray-800'}`;
71+
`${
72+
isDragging() ? 'bg-brand-default dark:bg-brand-default' : 'bg-blueGray-50 dark:bg-gray-900'
73+
}`;
7874
const directionClasses = () =>
7975
local.direction === 'horizontal'
8076
? `flex-col cursor-col-resize border-l-2 border-r-2 hidden${
@@ -95,9 +91,9 @@ export const GridResizer: Component<GridResizerProps> = (props) => {
9591
}
9692
/>
9793
<div ref={setRef} class={classes()} {...other}>
98-
<Dot />
99-
<Dot />
100-
<Dot />
94+
<Dot isDragging={isDragging()} />
95+
<Dot isDragging={isDragging()} />
96+
<Dot isDragging={isDragging()} />
10197
</div>
10298
</>
10399
);

‎src/components/repl.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ export const Repl: Component<ReplProps> = (props) => {
474474
showActionBar={props.actionBar}
475475
/>
476476

477-
<div class="bg-white dark:bg-blueGray-800 p-5 hidden md:block">
477+
<div class="bg-white dark:bg-blueGray-800 p-5">
478478
<label class="font-semibold text-sm uppercase">Compile mode</label>
479479

480480
<div class="mt-1 space-y-1 text-sm">

‎tailwind.config.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ const theme = require('tailwindcss/defaultTheme');
33

44
module.exports = {
55
mode: 'jit',
6-
purge: [
7-
"./src/**/*.{tsx,ts,css}",
8-
"./playground/**/*.{tsx,ts,css}",
9-
"./index.html"
10-
],
6+
purge: ['./src/**/*.{tsx,ts,css}', './playground/**/*.{tsx,ts,css}', './index.html'],
117
theme: {
128
extend: {
139
colors: {
@@ -18,7 +14,7 @@ module.exports = {
1814
medium: '#446b9e',
1915
light: '#4f88c6',
2016
},
21-
other: '#1e1e1e'
17+
other: '#1e1e1e',
2218
},
2319
fontFamily: {
2420
// This font doesn't render properly, it seems it has a line-height issue
@@ -29,10 +25,15 @@ module.exports = {
2925
},
3026
cursor: {
3127
'col-resize': 'col-resize',
32-
'row-resize': 'row-resize'
33-
}
28+
'row-resize': 'row-resize',
29+
},
3430
},
3531
},
3632
darkMode: 'class',
33+
variants: {
34+
extend: {
35+
backgroundColor: ['group-hover'],
36+
},
37+
},
3738
plugins: [require('@tailwindcss/forms')],
3839
};

0 commit comments

Comments
 (0)