From aa662a7e607699ecfc003e2ac68003feffb4d291 Mon Sep 17 00:00:00 2001 From: xypnox Date: Mon, 15 Jan 2024 20:47:17 +0530 Subject: [PATCH] Add more previews --- src/components/nav/Navbar.astro | 5 + src/components/themePreview.tsx | 246 +++++++++++++++++++++++++- src/content/blog/dark-modes/index.mdx | 67 ++++++- 3 files changed, 308 insertions(+), 10 deletions(-) diff --git a/src/components/nav/Navbar.astro b/src/components/nav/Navbar.astro index 8dd0e3e..921a438 100644 --- a/src/components/nav/Navbar.astro +++ b/src/components/nav/Navbar.astro @@ -43,6 +43,11 @@ import '../../scripts/menu' margin: 0 auto; gap: 1rem; z-index: 1000; + pointer-events: none; + } + + nav.navbar > * { + pointer-events: auto; } @keyframes borderFlash { diff --git a/src/components/themePreview.tsx b/src/components/themePreview.tsx index 70db56e..eb9c0e8 100644 --- a/src/components/themePreview.tsx +++ b/src/components/themePreview.tsx @@ -21,6 +21,7 @@ interface Themevars { cardBorder?: string cardShadow?: string astro?: { code?: Record } + colors?: Record } interface Preview { @@ -180,6 +181,73 @@ const lightThemeCodeVars: Themevars = { } } +const lightColorsVars: Themevars = { + txt: "#222640", + // light gray + bg: "#f0f0f0", + + surface: "#fff", + + colors: { + primary: "#0d6efd", + secondary: "#6c757d", + warning: "#ffc107", + danger: "#dc3545", + success: "#198754", + info: "#0dcaf0", + } +} + +const darkColorsVars: Themevars = { + txt: "#B5C0DB", + // light gray + bg: "#1A1E27", + + surface: "#303748", + + colors: { + primary: "#0d6efd", + secondary: "#6c757d", + warning: "#ffc107", + danger: "#dc3545", + success: "#198754", + info: "#0dcaf0", + } +} + +const xypColorsVars: Themevars = { + txt: "#919DCF", + // light gray + bg: "#0f111a", + + surface: "#1e213980", + + colors: { + primary: "#ff5370", + secondary: "#6b5eff", + heading: "#CCA685", + italic: "#CC64AD", + fadeText: "#919DCF80", + text: "#919DCF", + } +} + +const gruvColorsVars: Themevars = { + txt: "#AEA398", + // light gray + bg: "#252525", + + surface: "#3C3836", + + colors: { + primary: "#FBA359", + secondary: "#B8BB26", + heading: "#88B877", + italic: "#F47F71", + fadeText: "#897969", + text: "#AEA398", + } +} export const themePreviewConfigVars = { lightMode, @@ -197,6 +265,10 @@ export const themePreviewConfigVars = { codeVars, themeCodeVars, lightThemeCodeVars, + lightColorsVars, + darkColorsVars, + xypColorsVars, + gruvColorsVars, } const minimalElements: UIElement[] = [ @@ -210,6 +282,69 @@ const minimalElements: UIElement[] = [ }, ] +const iconElements = [ + + { type: "icon", text: "ph:user-switch-duotone", }, + { type: "icon", text: "ph:gear-fine-duotone", }, + { type: "icon", text: "ph:paint-brush-broad-duotone", }, + + { type: "icon", text: "pixelarticons:reciept", }, + { type: "icon", text: "pixelarticons:home", }, + { type: "icon", text: "pixelarticons:cloud", }, + + { type: "icon", text: "ph:heart", }, + { type: "icon", text: "ph:heart-fill", }, + { type: "icon", text: "ph:heart-straight-break-duotone", }, + + { type: "icon", text: "line-md:downloading-loop", }, + { type: "icon", text: "line-md:coffee-half-empty-twotone-loop", }, + { type: "icon", text: "line-md:sun-rising-twotone-loop", }, +] + +const moonIconElements = [ + { type: "icon", text: "wi:moon-alt-full", }, + { type: "icon", text: "wi:moon-alt-waning-gibbous-2", }, + { type: "icon", text: "wi:moon-alt-waning-gibbous-4", }, + + { type: "icon", text: "wi:moon-alt-third-quarter", }, + { type: "icon", text: "wi:moon-alt-waning-crescent-2", }, + { type: "icon", text: "wi:moon-alt-waning-crescent-4", }, + + { type: "icon", text: "wi:moon-alt-new", }, + { type: "icon", text: "wi:moon-alt-waxing-crescent-2", }, + { type: "icon", text: "wi:moon-alt-waxing-crescent-4", }, + + + { type: "icon", text: "wi:moon-alt-first-quarter", }, + { type: "icon", text: "wi:moon-alt-waxing-gibbous-2", }, + { type: "icon", text: "wi:moon-alt-waxing-gibbous-4", }, +] + +// Shift the moonIconElements array by half + +const moonIconElementsCorrected = [ + ...moonIconElements.slice(6), + ...moonIconElements.slice(0, 6), +] + +const iconsElements = [{ + type: "icons", + text: "Icons", + elements: iconElements, +}] + +const moonIconsElements = [{ + type: "icons", + text: "Moon Icons", + elements: moonIconElements, +}] + +const reversedMoonIconsElements = [{ + type: "icons", + text: "Moon Icons", + elements: moonIconElementsCorrected, +}] + const cardElements: UIElement[] = [ { type: "card", @@ -249,7 +384,21 @@ export const themePreviewSplitsConfigs: Record { elements: cardElements, vars: themePreviewConfigVars.lightModeCardFlippedVars, }, { elements: cardElements, vars: themePreviewConfigVars.lightModeCardBorderVars, }, ] - } + }, + icons: { + previews: [ + { elements: iconsElements, vars: themePreviewConfigVars.lightMode, }, + { elements: iconsElements, vars: themePreviewConfigVars.blackModeVars, }, + ] + }, + moonIcons: { + previews: [ + { elements: moonIconsElements, vars: themePreviewConfigVars.lightMode, }, + { elements: moonIconsElements, vars: themePreviewConfigVars.blackModeVars, }, + { elements: reversedMoonIconsElements, vars: themePreviewConfigVars.blackModeVars, }, + ] + }, + } @@ -352,6 +501,29 @@ const ShinyCard = styled(Card)` } ` +const IconGrid = styled("div")` + display: grid; + grid-template: repeat(3, 1fr) / repeat(4, 1fr); + grid-auto-rows: 2rem; + gap: 2rem; + width: 100%; + min-height: 6rem; + grid-auto-flow: column; + align-items: center; + justify-items: center; + + & > div { + width: max-content; + } + + iconify-icon { + width: 2rem; + height: 2rem; + font-size: 2rem; + color: var(--preview-txt); + } +` + const CodeBlock = styled("pre")` width: 100%; x-overflow: auto; @@ -419,12 +591,44 @@ const ColorPreview = styled("div")` background-color: var(--color); ` +const ColorPreviewLarge = styled("div")` + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem; + border-radius: 0.5rem; + background-color: var(--color); +` + const ColorSwatches = styled("div")` display: flex; flex-wrap: wrap; gap: 0.5rem; ` +const ColorInfo = styled("div")` + display: flex; + flex-direction: column; + font-size: 0.75rem; +` + +const ColorCard = styled(Card)` + padding: 0.5rem; + margin: 0; + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: center; + font-size: ${theme.font.size.sm}; + border-radius: 0.75rem; +` + +const ColorsPreview = styled("div")` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(14ch, 1fr)); + width: 100%; + gap: 0.5rem; +` + const InfoHeaderWrapper = styled("div")` display: flex; gap: 0.5rem; @@ -525,7 +729,12 @@ const ThemeInfo = (props: ThemePreviewProps) => { ) } -const RenderElement = (props: { element: UIElement }) => { +const RenderElement = (props: { + element: UIElement, + vars: Themevars, +}) => { + + const logVars = () => { console.log(props.vars); return null } return @@ -548,7 +757,7 @@ const RenderElement = (props: { element: UIElement }) => { {(element) => ( - + )} @@ -557,6 +766,33 @@ const RenderElement = (props: { element: UIElement }) => { + + + + {(entry) => ( + + + +
{entry[1]}
+
{entry[0]}
+ + + )} + + + + + + + {(element) => ( + + )} + + + + + + } @@ -578,7 +814,9 @@ export const ThemePreview = (props: ThemePreviewProps) => { {(element) => ( - + )} diff --git a/src/content/blog/dark-modes/index.mdx b/src/content/blog/dark-modes/index.mdx index aa95f15..71ba6f9 100644 --- a/src/content/blog/dark-modes/index.mdx +++ b/src/content/blog/dark-modes/index.mdx @@ -50,8 +50,6 @@ import { ThemePreview, ThemePreviewSplits, themePreviewConfigVars, themePreviewE Dark mode is _a different stylistic version of the same interface_, and uses lighter colors on top of darker background. There should be _no change_ in layout. Any changes that could be done to the layout should work in both modes. -Some things remained dark, some turned towards light like the web browser with the default white background. And the bright themes of the operating systems. - Dark mode has now become a staple in modern interfaces. Mainstream apps, government websites, and operating systems all have dark modes now, and I prefer them over the harsh white, however ugly they may be. _But does everything need a dark mode? And can everything be turned dark?_ @@ -119,8 +117,6 @@ While this serves for basic text only content, there are various elements that d ## Colors -### Relative colors - Although an explanation about how the _perceived colors depend on the background_ is not needed, here is a fine example: +Note that colors in the light background look different when shown with dark background. + + + +Sometimes it may be what is desired, but we can tweak the colors to suit each other and the background. Such themes work well together and still retain contrast to differentiate with color. Color should not be the sole way of differentiation as it would not be legible to the visually impaired. Moreover, anything that makes things more legible is good for everyone. + + + + +The first set of colors in the palettes above are the ones currently being used on this website, and the second are chosen from the Gruvbox color scheme. + ### The ugly gray @@ -247,7 +280,7 @@ https://m3.material.io/styles/color/choosing-a-scheme And I think these gray themes are what have given the dark mode the aura of unsaturated monochromatic soulless interfaces. As if colors are meant to be reserved for the light mode. -## Colors that were lost +### Colors that were lost Some colors look bad on white background if used as text. Yellow is a prime example. But in the world of dark mode, yellow literally shines! @@ -379,7 +412,7 @@ Some may want a custom theme that matches their overall style, so they may want As an example, this blog uses astro which comes with [shikijs/shiki](https://github.com/shikijs/shiki) syntax highlighter which can take a textmate or vscode highlighting config and use it to highlight code in html. However, due to the inherent complexities of the structure of theme, modification is non trivial. While I was tempted by it's css-variables color theme, it doesn't work as nicely with complex code snippets such as `jsx`. I ended up writing/tweaking the default vscode dark theme to match my color scheme: -```tsx +```js // Just some jsx to preview the theme! /** * Shows a single theme preview @@ -440,6 +473,28 @@ Perhaps we want a more lively look and we are using lavender and pink as our mai ]} /> +## Icons & Illustrations + +Icons and Illustrations add visual appeal to a interface and help users navigate/understand the interface by adding meaning. + +Simple icons and illustrations can be directly converted to dark mode by inverting the colors and tweaking them to suit the needs. + +For icons, a icon-font or svg icons (ex: iconify.design) can be adjusted via the text color. Illustrations in vector formats also lend themselves to tweaking the colors for the dark mode. + + + +But it should be noted that not all illustrations and icons are fit for direct conversion. + +In case of icons, we can take the phases of the moons for example. A standard icon for the new moon is. However, it doesn't translate to dark mode as the meaning of the colors to represent the phases is also inverted. In such a case, using a different set of icons corresponding for different modes works well. + + + ## Contrasty design There are designs for software (websites, products) that use different modes (dark/light) in the same interface to distinguish a sidebar/navigation/sections of a page.