From 6db2c0bf93c75c63c7a4a70a51c1f41ec62ecf6b Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 10 Feb 2023 18:34:02 +0100 Subject: [PATCH] only invert prose for dark themes --- website/src/components/HeadCommon.astro | 16 +++++++++---- .../components/PageContent/PageContent.astro | 2 +- website/src/repl/Footer.jsx | 23 ++++++++++++++++--- website/src/repl/Reference.jsx | 2 +- website/src/repl/themes.mjs | 15 ++++++------ website/tailwind.config.cjs | 1 + 6 files changed, 42 insertions(+), 17 deletions(-) diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro index 22828f26..98143374 100644 --- a/website/src/components/HeadCommon.astro +++ b/website/src/components/HeadCommon.astro @@ -46,14 +46,20 @@ const base = BASE_URL; }; } function setTheme(name) { - console.log('setTheme', name); const { settings } = getTheme(name); - const cssVariables = Object.entries(settings) - .map(([key, value]) => `--${key}: ${value};`) - .join('\n'); + // set css variables themeStyle.innerHTML = `:root { - ${cssVariables} + ${Object.entries(settings) + .map(([key, value]) => `--${key}: ${value};`) + .join('\n')} }`; + // tailwind dark mode + if (settings.light) { + document.documentElement.classList.remove('dark'); + } else { + document.documentElement.classList.add('dark'); + } + // persist theme name localStorage.setItem('strudel-theme', name); } setTheme(localStorage.getItem('strudel-theme')); diff --git a/website/src/components/PageContent/PageContent.astro b/website/src/components/PageContent/PageContent.astro index b6131e16..367e80e2 100644 --- a/website/src/components/PageContent/PageContent.astro +++ b/website/src/components/PageContent/PageContent.astro @@ -22,7 +22,7 @@ const currentPage = Astro.url.pathname; On this Page: --> -
+
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx index f2f6f304..09f1d7f5 100644 --- a/website/src/repl/Footer.jsx +++ b/website/src/repl/Footer.jsx @@ -2,8 +2,8 @@ import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon'; import { logger } from '@strudel.cycles/core'; import { cx } from '@strudel.cycles/react'; import { nanoid } from 'nanoid'; -import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react'; -import { useEvent, loadedSamples, ReplContext } from './Repl'; +import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; +import { useEvent, loadedSamples } from './Repl'; import { Reference } from './Reference'; import { themes, themeColors } from './themes.mjs'; @@ -89,7 +89,7 @@ export function Footer({ context }) { ref={footerContent} > {activeFooter === 'intro' && ( -
+

🌀 welcome

@@ -229,3 +229,20 @@ function linkify(inputText) { function classNames(...classes) { return classes.filter(Boolean).join(' '); } + +/* export function useTheme() { + const [theme, setTheme] = useState(localStorage.getItem('strudel-theme')); + useEvent('strudel-theme', (e) => { + console.log(e.detail); + setTheme(e.detail); + }); + const themeSettings = settings[theme || 'strudelTheme']; + return { + theme, + setTheme, + settings: themeSettings, + isDark: !themeSettings.light, + isLight: !!themeSettings.light, + }; +} + */ diff --git a/website/src/repl/Reference.jsx b/website/src/repl/Reference.jsx index b27809ef..08f95a6f 100644 --- a/website/src/repl/Reference.jsx +++ b/website/src/repl/Reference.jsx @@ -14,7 +14,7 @@ export function Reference() { ))}
-
+

API Reference

This is the long list functions you can use! Remember that you don't need to remember all of those and that diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs index 4f2c6367..4db292cd 100644 --- a/website/src/repl/themes.mjs +++ b/website/src/repl/themes.mjs @@ -177,6 +177,7 @@ export const settings = { lineHighlight: '#36334280', }, eclipse: { + light: true, background: '#fff', foreground: '#000', caret: '#FFFFFF', @@ -188,6 +189,7 @@ export const settings = { gutterBorder: 'transparent', }, githubLight: { + light: true, background: '#fff', foreground: '#24292e', selection: '#BBDFFF', @@ -214,6 +216,7 @@ export const settings = { gutterForeground: '#7c6f64', }, gruvboxLight: { + light: true, background: '#fbf1c7', foreground: '#3c3836', caret: '#af3a03', @@ -236,6 +239,7 @@ export const settings = { lineHighlight: '#545b61', }, materialLight: { + light: true, background: '#FAFAFA', foreground: '#90A4AE', caret: '#272727', @@ -247,6 +251,7 @@ export const settings = { lineHighlight: '#CCD7DA50', }, noctisLilac: { + light: true, background: '#f2f1f8', foreground: '#0c006b', caret: '#5c49e9', @@ -278,6 +283,7 @@ export const settings = { lineHighlight: '#00000059', }, solarizedLight: { + light: true, background: '#fdf6e3', foreground: '#657b83', caret: '#586e75', @@ -308,6 +314,7 @@ export const settings = { lineHighlight: '#00000059', }, tokyoNightDay: { + light: true, background: '#e1e2e7', foreground: '#3760bf', caret: '#3760bf', @@ -353,6 +360,7 @@ export const settings = { fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace', }, xcodeLight: { + light: true, background: '#fff', foreground: '#3D3D3D', selection: '#BBDFFF', @@ -371,13 +379,6 @@ export const settings = { }, }; -export const vars = { - abcdef: { - bg: '#0f0f0f', - activeLine: '#314151', - }, -}; - function getColors(str) { const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g; const colors = []; diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs index dcd550df..e49229f3 100644 --- a/website/tailwind.config.cjs +++ b/website/tailwind.config.cjs @@ -3,6 +3,7 @@ const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { + darkMode: 'class', content: [ './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', '../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',