Skip to content

feat: refine bg/text color for dark mode #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 11, 2024
Merged

feat: refine bg/text color for dark mode #686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
429fe5c
feat: refine bg/text color for dark mode
alexzhang1030 Nov 5, 2024
43c8c8e
chore: update overlay bg color for dark mode
alexzhang1030 Nov 5, 2024
b59ec33
chore: update more color
alexzhang1030 Nov 5, 2024
5da1962
chore: update more colors
alexzhang1030 Nov 5, 2024
06695da
chore: update state value color
alexzhang1030 Nov 6, 2024
e091cc7
chore: revert bg changes
alexzhang1030 Nov 11, 2024
70baa9b
chore: update
webfansplz Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/applet/src/components/state/RootStateViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const { expanded, toggleExpanded } = useToggleExpanded(props.expandedStateId)
/>
<!-- placeholder -->
<span v-else pl5 />
<span font-state-field text-3.5>
<span font-state-field text-3.5 text-hex-a3a3a3>
{{ key }}
</span>
</div>
Expand Down
17 changes: 14 additions & 3 deletions packages/applet/src/components/state/StateFieldViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const stateFormatClass = computed(() => {
if (type.value === 'custom')
return `${(props.data.value as InspectorCustomState)._custom?.type ?? 'string'}-custom-state`
else
return ``
return 'unknown-state-type'
})

const fieldsCount = computed(() => {
Expand Down Expand Up @@ -199,12 +199,12 @@ async function submitDrafting() {
/>
<!-- placeholder -->
<span v-else pl5 />
<span op70 class="whitespace-nowrap">
<span whitespace-nowrap text-purple-700 op70 dark:text-purple-300>
{{ normalizedDisplayedKey }}
</span>
<span mx1>:</span>
<StateFieldInputEditor v-if="editing" v-model="editingText" class="mr-1" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
<span :class="stateFormatClass" class="flex whitespace-nowrap">
<span :class="stateFormatClass" class="flex whitespace-nowrap dark:text-#bdc6cf">
<span class="flex" v-html="normalizedDisplayedValue" />
</span>
<StateFieldEditor
Expand All @@ -231,6 +231,17 @@ async function submitDrafting() {
</div>
</template>

<style lang="scss">
// Maybe related https://github.com/vuejs/core/issues/12241
// Let's leave it global for now, until it's fixed
// This will compiled to `.dark[v-xxx] selectors` if using scoped
.function-custom-state {
& > span {
--at-apply: 'dark:text-#997fff!';
}
}
</style>

<style lang="scss" scoped>
// string
:deep(.string-custom-state) {
Expand Down
2 changes: 1 addition & 1 deletion packages/applet/src/modules/components/components/RenderCode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function close() {
</script>

<template>
<div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
<div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#121212">
<div class="h-12 w-full flex items-center justify-between p-2">
<span class="font-500">Render Code</span>
<i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
Expand Down
8 changes: 4 additions & 4 deletions packages/applet/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@ export default defineConfig(mergeConfigs([unoConfig, {
],
shortcuts: [{
// general
'bg-base': 'bg-white dark:bg-black',
'text-base': 'text-black dark:text-white',
'bg-base': 'bg-white dark:bg-#121212',
'text-base': 'text-black dark:text-#dfe0e2',
'bg-active': 'bg-gray:5',
'border-base': 'border-gray/20',
'transition-base': 'transition-all duration-200',

// selective list
'selectable-item': 'flex items-center px-2 py-1 rounded cursor-pointer hover:bg-primary-200 dark:(hover:bg-gray-800) @active:(text-white bg-primary-600 hover:(text-white bg-primary-600))',

'code-block': 'dark:bg-[#121212] bg-white',
'code-block': 'dark:bg-#121212 bg-white',

// state
'string-state-type': 'text-#e74c3c dark:(text-#c41a16)',
'string-state-type': 'text-#e74c3c dark:(text-#FFB980)',
'literal-state-type': 'text-#03c dark:(text-#997fff)',
'boolean-state-type': 'text-#27ae60 dark:(text-#abebc6)',
'null-state-type': 'text-#999',
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/assets/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ body::-webkit-scrollbar {
.v-popper--theme-tooltip .v-popper__arrow-inner,
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--uno: 'border-white dark:border-hex-121212';
--uno: 'border-white dark:border-#121212';
}

.v-popper--theme-tooltip .v-popper__arrow-outer,
Expand Down
10 changes: 5 additions & 5 deletions packages/client/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ export default defineConfig(mergeConfigs([unoConfig, {
],
shortcuts: [{
// general
'bg-base': 'bg-white dark:bg-[#121212]',
'text-base': 'text-black dark:text-white',
'bg-base': 'bg-white dark:bg-#121212',
'text-base': 'text-black dark:text-#dfe0e2',
'bg-active': 'bg-gray:5',
'border-base': 'border-gray/20',
'navbar-base': 'border-b border-base h-50px',
Expand All @@ -61,11 +61,11 @@ export default defineConfig(mergeConfigs([unoConfig, {
'x-divider': 'h-1px w-full bg-gray/15',

// glass
'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#121212]/90',
'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#121212/90',
'navbar-glass': 'sticky z-10 top-0 glass-effect',

// code
'code-block': 'dark:bg-[#121212] bg-white',
'code-block': 'dark:bg-#121212 bg-white',

// panel grids
'panel-grids': 'panel-grids-light dark:panel-grids-dark',
Expand All @@ -80,7 +80,7 @@ export default defineConfig(mergeConfigs([unoConfig, {
'state-value': 'text-#444 dark:(text-#bdc6cf)',
'state-value-label': 'text-gray-500',
'state-value-literal': 'text-#03c dark:(text-#997fff)',
'state-value-string': 'text-#c41a16',
'state-value-string': 'text-#FFB980',
}, [/^theme-card-(\w+)$/, $ => `p2 flex gap2 border border-base bg-base items-center rounded min-w-40 min-h-25 justify-center transition-all saturate-0 op50 shadow hover:(op100 bg-${$[1]}/10 text-${$[1]}6 saturate-100)`]],
presets: [
presetAttributify(),
Expand Down
2 changes: 1 addition & 1 deletion packages/devtools-kit/src/core/component/state/custom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function getFunctionDetails(func: Function) {
return {
_custom: {
type: 'function' satisfies customTypeEnums,
displayText: `<span style="opacity:.5;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
},
}
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const panelState = ref<{
const cssVars = computed(() => {
const dark = mode.value === 'dark'
return {
'--vue-devtools-widget-bg': dark ? '#111' : '#ffffff',
'--vue-devtools-widget-bg': dark ? '#121212' : '#ffffff',
'--vue-devtools-widget-fg': dark ? '#F5F5F5' : '#111',
'--vue-devtools-widget-border': dark ? '#3336' : '#efefef',
'--vue-devtools-widget-shadow': dark ? 'rgba(0,0,0,0.3)' : 'rgba(128,128,128,0.1)',
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/components/CodeBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@ const rendered = computed(() => {
}
}
}
span {
--at-apply: '$ui-bg-base!';
}
--at-apply: '$ui-bg-base!';
}
pre {
&:focus-visible {
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/theme/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ export const unoConfig = {
'$ui-z-max-override': 'z-2147483647',

// general
'$ui-bg-base': 'bg-white dark:bg-black',
'$ui-bg-base': 'bg-white dark:bg-#121212',
'$ui-base': 'box-border font-inherit',
'$ui-transition': 'transition-all duration-300 ease-in-out',
'$ui-borderless': '!border-transparent !shadow-none',
'$ui-base-br': 'rounded-3px',
'$ui-border-base': 'border-gray/20',
'$ui-text': 'text-black dark:text-white',
'$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-black/90',
'$ui-text': 'text-black dark:text-#dfe0e2',
'$ui-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-#3C3C3C/90',
},
rules: [
['$ui-font-inherit', { 'font-family': 'inherit' }],
Expand Down