项目原始demo,不改动
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
 
 
 
 

108 lines
2.0 KiB

  1. import Vue from 'vue';
  2. export function functionalThemeClasses(context) {
  3. const vm = { ...context.props,
  4. ...context.injections
  5. };
  6. const isDark = Themeable.options.computed.isDark.call(vm);
  7. return Themeable.options.computed.themeClasses.call({
  8. isDark
  9. });
  10. }
  11. /* @vue/component */
  12. const Themeable = Vue.extend().extend({
  13. name: 'themeable',
  14. provide() {
  15. return {
  16. theme: this.themeableProvide
  17. };
  18. },
  19. inject: {
  20. theme: {
  21. default: {
  22. isDark: false
  23. }
  24. }
  25. },
  26. props: {
  27. dark: {
  28. type: Boolean,
  29. default: null
  30. },
  31. light: {
  32. type: Boolean,
  33. default: null
  34. }
  35. },
  36. data() {
  37. return {
  38. themeableProvide: {
  39. isDark: false
  40. }
  41. };
  42. },
  43. computed: {
  44. appIsDark() {
  45. return this.$vuetify.theme.dark || false;
  46. },
  47. isDark() {
  48. if (this.dark === true) {
  49. // explicitly dark
  50. return true;
  51. } else if (this.light === true) {
  52. // explicitly light
  53. return false;
  54. } else {
  55. // inherit from parent, or default false if there is none
  56. return this.theme.isDark;
  57. }
  58. },
  59. themeClasses() {
  60. return {
  61. 'theme--dark': this.isDark,
  62. 'theme--light': !this.isDark
  63. };
  64. },
  65. /** Used by menus and dialogs, inherits from v-app instead of the parent */
  66. rootIsDark() {
  67. if (this.dark === true) {
  68. // explicitly dark
  69. return true;
  70. } else if (this.light === true) {
  71. // explicitly light
  72. return false;
  73. } else {
  74. // inherit from v-app
  75. return this.appIsDark;
  76. }
  77. },
  78. rootThemeClasses() {
  79. return {
  80. 'theme--dark': this.rootIsDark,
  81. 'theme--light': !this.rootIsDark
  82. };
  83. }
  84. },
  85. watch: {
  86. isDark: {
  87. handler(newVal, oldVal) {
  88. if (newVal !== oldVal) {
  89. this.themeableProvide.isDark = this.isDark;
  90. }
  91. },
  92. immediate: true
  93. }
  94. }
  95. });
  96. export default Themeable;
  97. //# sourceMappingURL=index.js.map