hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

switchable css variables for theming

Browse source
This commit is contained in:
Felix Roos 2023-02-10 11:32:36 +01:00
parent 0326244956
commit 0b994a1b0f
10 changed files with 75 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/react/src/components/style.css
View file

@ -1,5 +1,5 @@
.cm-editor { .cm-editor {
/* background-color: transparent !important; */ background-color: transparent !important;
height: 100%; height: 100%;
z-index: 11; z-index: 11;
font-size: 18px; font-size: 18px;
@ -14,5 +14,5 @@
} }
.cm-line > * { .cm-line > * {
/* background: #00000095; */ background: var(--background);
} }

31
website/src/components/HeadCommon.astro
View file

@ -28,3 +28,34 @@ const base = BASE_URL;
<script src="/src/pwa.ts"></script> <script src="/src/pwa.ts"></script>
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />} {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
<script>
// const themeStyle = document.getElementById('theme');
const themeStyle = document.createElement('style');
themeStyle.id = 'strudel-theme';
document.head.append(themeStyle);
function setTheme(theme) {
const cssVariables = Object.entries(theme)
.map(([key, value]) => `--${key}: ${value};`)
.join('\n');
themeStyle.innerHTML = `:root {
${cssVariables}
}`;
}
// default theme
setTheme({
background: '#222',
foreground: '#FFFFFF',
caret: '#FFFFFF',
selection: '#49483E',
selectionMatch: '#49483E',
gutterBackground: '#272822',
gutterForeground: '#FFFFFF70',
lineHighlight: '#00000059',
});
document.addEventListener('strudel-theme', (e: any) => {
console.log('strudel theme', e.detail);
// TODO: persist theme
setTheme(e.detail);
});
</script>

2
website/src/layouts/MainLayout.astro
View file

@ -31,7 +31,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</title> </title>
</head> </head>
<body class="h-screen text-gray-50"> <body class="h-screen text-gray-50 bg-background">
<div class="w-full h-full space-y-4 flex flex-col"> <div class="w-full h-full space-y-4 flex flex-col">
<header class="max-w-full fixed top-0 w-full z-[100]"> <header class="max-w-full fixed top-0 w-full z-[100]">
<Header currentPage={currentPage} /> <Header currentPage={currentPage} />

2
website/src/pages/index.astro
View file

@ -8,7 +8,7 @@ import { Repl } from '../repl/Repl.jsx';
<HeadCommon /> <HeadCommon />
<title>Strudel REPL</title> <title>Strudel REPL</title>
</head> </head>
<body> <body class="bg-background">
<Repl client:only="react" /> <Repl client:only="react" />
</body> </body>
</html> </html>

18
website/src/repl/Footer.jsx
View file

@ -68,7 +68,7 @@ export function Footer({ context }) {
return null; return null;
} }
return ( return (
<footer className="bg-footer z-[20]"> <footer className="bg-lineHighlight z-[20]">
<div className="flex justify-between px-2"> <div className="flex justify-between px-2">
<div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}> <div className={cx('flex select-none max-w-full overflow-auto', activeFooter && 'pb-2')}>
<FooterTab name="intro" label="welcome" /> <FooterTab name="intro" label="welcome" />
@ -179,6 +179,22 @@ export function Footer({ context }) {
onClick={() => { onClick={() => {
console.log(k, themeColors(t)); console.log(k, themeColors(t));
setTheme(t); setTheme(t);
document.dispatchEvent(
new CustomEvent('strudel-theme', {
detail: {
// TODO: dynamic
background: '#21202e',
foreground: '#edecee',
caret: '#a277ff',
selection: '#3d375e7f',
selectionMatch: '#3d375e7f',
gutterBackground: '#21202e',
gutterForeground: '#edecee',
gutterBorder: 'transparent',
lineHighlight: '#a394f033',
},
}),
);
}} }}
> >
<div className="mb-2 w-full text-center">{k}</div> <div className="mb-2 w-full text-center">{k}</div>

2
website/src/repl/Header.jsx
View file

@ -32,7 +32,7 @@ export function Header({ context }) {
id="header" id="header"
className={cx( className={cx(
'py-1 flex-none w-full text-black justify-between z-[100] text-lg select-none sticky top-0', 'py-1 flex-none w-full text-black justify-between z-[100] text-lg select-none sticky top-0',
!isZen && !isEmbedded && 'bg-header', !isZen && !isEmbedded && 'bg-lineHighlight',
isEmbedded ? 'flex' : 'md:flex', isEmbedded ? 'flex' : 'md:flex',
)} )}
> >

4
website/src/repl/Repl.css
View file

@ -10,10 +10,6 @@
opacity: 0.5; opacity: 0.5;
} }
.cm-gutters {
display: none !important;
}
.cm-content { .cm-content {
padding-top: 12px !important; padding-top: 12px !important;
padding-left: 8px !important; padding-left: 8px !important;

12
website/src/repl/themes.mjs
View file

@ -61,6 +61,18 @@ export const themes = {
tokyoNightDay, tokyoNightDay,
xcodeLight, xcodeLight,
}; };
// TODO: persist theme
export const defaultSettingsAura = {
background: '#21202e',
foreground: '#edecee',
caret: '#a277ff',
selection: '#3d375e7f',
selectionMatch: '#3d375e7f',
gutterBackground: '#21202e',
gutterForeground: '#edecee',
gutterBorder: 'transparent',
lineHighlight: '#a394f033',
};
export const vars = { export const vars = {
abcdef: { abcdef: {

4
website/src/styles/index.css
View file

@ -1,7 +1,3 @@
body {
background-color: #222;
}
.cm-gutters { .cm-gutters {
display: none !important; display: none !important;
} }

10
website/tailwind.config.cjs
View file

@ -22,6 +22,16 @@ module.exports = {
header: '#00000050', header: '#00000050',
// header: 'transparent', // header: 'transparent',
footer: '#00000050', footer: '#00000050',
// codemirror-theme settings
background: 'var(--background)',
foreground: 'var(--foreground)',
caret: 'var(--caret)',
selection: 'var(--selection)',
selectionMatch: 'var(--selectionMatch)',
gutterBackground: 'var(--gutterBackground)',
gutterForeground: 'var(--gutterForeground)',
gutterBorder: 'var(--gutterBorder)',
lineHighlight: 'var(--lineHighlight)',
}, },
typography(theme) { typography(theme) {
return { return {