<link href="/style.css" rel="stylesheet" />
</head>
- <body>
+ <body class="bg-theme-background text-theme-text">
<div id="app"></div>
<script type="module" src="/index.js"></script>
</body>
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ body {
+ --theme-brand: 248 166 107;
+
+ --theme-background: 255 255 255;
+ --theme-background-elevated: 255 255 255;
+ --theme-background-tint: 243 244 245;
+ --theme-background-highlight: 239 243 255;
+
+ --theme-text: 44 49 57;
+ --theme-text-muted: 136 145 161;
+ --theme-text-very-muted: 193 199 208;
+
+ --theme-shadow: 236 238 240;
+ --theme-border: 236 238 240;
+ }
+
+ body.dark-theme {
+ /* --theme-brand: 248 166 107; */
+
+ --theme-background: 34 38 44;
+ --theme-background-elevated: 44 49 57;
+ --theme-background-tint: 34 38 44;
+ --theme-background-highlight: 136 145 161;
+
+ --theme-text: 193 199 208;
+ --theme-text-muted: 136 145 161;
+ --theme-text-very-muted: 94 107 128;
+
+ --theme-shadow: none;
+ --theme-border: 94 107 128;
+ }
+}
\ No newline at end of file
/** @type {import('tailwindcss').Config} */
+
module.exports = {
content: ["client/**/*.{html,js,vue}"],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ "theme-brand": "rgb(var(--theme-brand) / <alpha-value>)",
+ "theme-background": "rgb(var(--theme-background) / <alpha-value>)",
+ "theme-background-elevated": "rgb(var(--theme-background-elevated) / <alpha-value>)",
+ "theme-background-tint": "rgb(var(--theme-background-tint) / <alpha-value>)",
+ "theme-background-highlight": "rgb(var(--theme-background-highlight) / <alpha-value>)",
+ "theme-text": "rgb(var(--theme-text) / <alpha-value>)",
+ "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",
+ "theme-text-very-muted": "rgb(var(--theme-text-very-muted) / <alpha-value>)",
+ "theme-shadow": "rgb(var(--theme-shadow) / <alpha-value>)",
+ "theme-border": "rgb(var(--theme-border) / <alpha-value>)",
+ },
+ },
},
plugins: [],
};
git.99rst.org / flatnotes.git / commitdiff