c86618ecd3
* feat(dep-graph): add dark mode Squashed commits: feat(dep-graph): Updating tailwind config file. As of version 3.0 higher tailwind jit mode is default. Instead of purge is now content and as dark mode will be added as class. feat(dep-graph): Enabling toggable dark mode. As darkmode (tailwind.congig.json) is set as class, we need to add the script to the head tag on index.html. see: https://tailwindcss.com/docs/dark-mode feat(dep-graph): Adding theme Initializer and creating support functions All functions related to theme changing and initialization are located on the theme-resolver.tsx The themeInit function will run when page is loaded and apply add class to the <html> tag as dark or light accordignly. Theme resolver applies the changes and keeps localstorage and <html class> in sync. feat(dep-graph): Adding theme panel The pannel allows users to switch themes. Currently it only changes the html class and localstorage. feat(dep-graph): Creating tailwind dark colors pallete The current colors remain as light. The dark colors are an attempt to contrast the light ones. feat(dep-graph): Adding additional styles to sidebar feat(dep-graph): Define styling presets for darkmode to allow consistent and concise classNames. feat(dep-graph): Apply dark styling classes to sidebar feat(dep-graph): Added dark mode styles to the debugger feat(dep-graph): Added Color to tailwind config and adjusting imports. feat(dep-graph): Created theme tracker feat(dep-graph): Added dark classes to graph container feat(dep-graph): Adjusted some edge styles for better UX. Added dynamic selection of colors according to the current theme. feat(dep-graph): Added transition when switching themes. feat(dep-graph): Readded auto roation for implicit label and dynamic background. feat(dep-graph): Assigned generic types to selectDynbamically, and added new color to the pallete. feat(dep-graph): Added dynamic styles for theming. feat(dep-graph): Added mock for matchMedia. Tests will fail otherwise. feat(dep-graph): Added styles to tippy. feat(dep-graph): Moved theme related functions to theme-resolver file feat(dep-graph): Implement dark mode on tooltips. feat(dep-graph): re-evaluate graph colors on theme change cleanup(dep-graph): Removed duplicate style chore(dep-graph): Testing theme preferences Adding test cases for theme initialization, and the ability to change. cleanup(dep-graph): removing repeated style classes Fixed issue with webpack plugin (#8231) feat(npm): resolved issue with live reload failing Fixed the issue with live reload when adding scripts in project.json Closes #8230 chore(repo): update nx to 13.10.0-beta.1 (#9407) feat(dep-graph): re-evaluate graph colors on theme change fix(dep-graph): use theme background color in image download * fix(dep-graph): change dark mode styles * cleanup(dep-graph): cleanup e2e tests and naming Co-authored-by: Philip Fulcher <philip@nrwl.io>
60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
const path = require('path');
|
|
|
|
module.exports = {
|
|
content: [
|
|
path.join(__dirname, 'src/**/*.{js,ts,jsx,tsx,html}'),
|
|
// ...createGlobPatternsForDependencies(__dirname),
|
|
],
|
|
darkMode: 'class', // or 'media' or 'class'
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
black: 'hsla(0, 0%, 13%, 1)',
|
|
blue: {
|
|
'nx-dark': 'hsla(214, 61%, 11%, 1)',
|
|
'nx-base': 'hsla(214, 62%, 21%, 1)',
|
|
},
|
|
green: {
|
|
'nx-base': 'hsla(162, 47%, 50%, 1)',
|
|
},
|
|
sidebar: {
|
|
dark: '#27272a',
|
|
'border-dark': '#52525b',
|
|
'btn-dark': '#1c1917',
|
|
'title-dark': '#f4f4f5',
|
|
'text-dark': '#cbd5e1',
|
|
'subtitle-dark': '#94a3b8',
|
|
},
|
|
graph: {
|
|
dark: '#262626',
|
|
'text-dark': '#cbd5e1',
|
|
},
|
|
},
|
|
typography: {
|
|
DEFAULT: {
|
|
css: {
|
|
'code::before': {
|
|
content: '',
|
|
},
|
|
'code::after': {
|
|
content: '',
|
|
},
|
|
'blockquote p:first-of-type::before': {
|
|
content: '',
|
|
},
|
|
'blockquote p:last-of-type::after': {
|
|
content: '',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {
|
|
translate: ['group-hover'],
|
|
},
|
|
},
|
|
plugins: [require('@tailwindcss/typography')],
|
|
};
|